XALT Media Functionalities

My previous article about XALT was all about base of XALT for developers. In this article by continuing that part along with some new extended features and new functionalities that will be a boon for developers; apart from the base in this article I’ll be explaining some media and extended level functionalities and some cool stuff with XALT. But for the base, I want you to first go through my previous article about “XALT for Developers”.

XALT | Extended Functionalities

Extended level functionalities of XALT are as follows:

• Placement
• Animation
• Back Navigation
• Header Customization
• Design-Time Experience

XALT | Example (Placement/Animation)

XALT provides a better placement/animation through simple lines of code. What we need to only do is to change and maintain the code depending on our requirement in the development work or any other related procedure.

1. <StackPanel
      RequestedTheme=“Light”>
      …
   </StackPanel>
   // Dark
   
   
   
2. <StackPanel
      RequestedTheme=“Dark”>
      …
   </StackPanel>
   // Light
   
   
   

XALT | Controls

Controls in XALT can be several. This scenario depends upon the need of development along with scope and modeling.

XALT | Hub Control

<Hub Header="My App Name"
   <HubSection Header="Section 1">
<DataTemplate>
<! -- Your content here -->

XALT | App Bar Button

An App bar in XALT can easily be divided into four categories. These two categories have a different significance but the core functioning is the same in both cases.



App Bar Button | Symbol

<AppBarButton Icon="Favorite" Label="Add to Favorites" />
   // below is the verbose method for symbol
   <AppBarButton Label="Favorite">
   <AppBarButton.Icon>
      <SymbolIcon Symbol="Favorite" />
   </AppBarButton.Icon>
</AppBarButton>

App Bar Button | Custom Font

<AppBarButton Label="Favorite">
   <AppBarButton.Icon>
      <FontIcon FontFamily="assets/myfont.ttf#Font Name"
      Glyph="H" />
   </AppBarButton.Icon>
</AppBarButton>

App Bar Button | Image

<AppBarButton Label="Favorite">
   <AppBarButton.Icon>
      <BitmapIcon UriSource="assets/abhi.png" />
   </AppBarButton.Icon>
</AppBarButton>

App Bar Button | Vector

<AppBarButton Label="Favorite">
   <AppBarButton.Icon>
      <PathIcon Data="..." />
   </AppBarButton.Icon>
</AppBarButton>

XALT | Command Bar

A Command Bar is one of the most desired applications of node.js (XALT). For developing this functionality you need to go through this code:

<Page.BottomAppBar>
   <CommandBar>
      <CommandBar.PrimaryCommands>
         <! -- app bar buttons here -->
      </CommandBar.PrimaryCommands>
      <CommandBar.SecondaryCommands>
         <! -- app bar buttons here -->
      </CommandBar.SecondaryCommands>
   </CommandBar>
</Page.BottomAppBar>