Post
Ask Question

AppBarToggleButton Control In Universal Apps

An AppBarToggleButton control is used when we request users to select 2 or 3 (with Indeterminate) options in a Universal app. 

Think AppBarToggleButton as a CheckBox with Button Style.

An AppBarToggleButton looks like the following:

(Checked and Swiped for titles)

 


(UnChecked and Swiped for titles)





Here's an example how to use AppBarToggleButton in XAML:
  1. <Page.BottomAppBar>  
  2.         <CommandBar>  
  3.             <AppBarToggleButton x:Name="apbartg1" IsChecked="True" Icon="Mute" Label="Mute" />  
  4.             <AppBarButton Icon="Like" Label="SymbolIcon" />  
  5.             <AppBarSeparator/>  
  6.             <!-- App bar button with bitmap icon. -->  
  7.             <AppBarButton Label="BitmapIcon" >  
  8.                 <AppBarButton.Icon>  
  9.                     <BitmapIcon UriSource="ms-appx:///Assets/StoreLogo.png"/>  
  10.                 </AppBarButton.Icon>  
  11.             </AppBarButton>  
  12.             <AppBarSeparator/>  
  13.   
  14.             <!-- App bar button with font icon. -->  
  15.             <AppBarButton Label="FontIcon" >  
  16.                 <AppBarButton.Icon>  
  17.                     <FontIcon FontFamily="Candara" Glyph="Σ"/>  
  18.                 </AppBarButton.Icon>  
  19.             </AppBarButton>  
  20.             <AppBarSeparator/>  
  21.             <!-- App bar button with path icon. -->  
  22.             <AppBarButton Label="PathIcon" >  
  23.                 <AppBarButton.Icon>  
  24.                     <PathIcon Data="F1 M 16,12 20,2L 20,16 1,16" HorizontalAlignment="Center"/>  
  25.                 </AppBarButton.Icon>  
  26.             </AppBarButton>  
  27.         </CommandBar>  
  28.     </Page.BottomAppBar>   
When you run this example,you'll see that there a togglebutton with title "Mute" where you can change its states.




Now that we've built a sample in showing how it is declared in XAML, why don't we add more functionality to it?

Let's add 2 events that it can do some work every time the state of the ToggleButton changes:
  1. <AppBarToggleButton x:Name="apbartg1" IsChecked="True" Icon="Mute" Label="Mute" 
    Checked="apbartg1_Checked" Unchecked="apbartg1_Unchecked" />  
Checked and Unchecked events will help you control its state and let you do some work in code. Let's say we want to make it look like a volume button. Once checked it can mute sound and unchecked it can open the volume.
  1. private void apbartg1_Checked(object sender, RoutedEventArgs e)  
  2. {  
  3.    apbartg1.Icon = new SymbolIcon(Symbol.Mute);              
  4. }  
  5.   
  6. private void apbartg1_Unchecked(object sender, RoutedEventArgs e)  
  7. {  
  8.     apbartg1.Icon = new SymbolIcon(Symbol.Volume);  
  9. }  
As I've mentioned in my previous article "AppBarButton Control in Universal Apps", we could use 4 types of Icons for a Button. Since AppBarToggleButton derives from the Buttons, we can use SymbolIcon, BitMapIcon, FontIcon and PathIcon types for this job. As I have used SymbolIcon, I easily accessed them and changed its icon value via these types.

When you run this example, you shall see togglebutton changes its Icon on every state changes.

(Checked State and Mute Icon is on)



(UnChecked State and Volume Icon is on)



AppBarToggleButton is pretty useful when you request users to select 2 or 3 options.  


Similar Articles