Using a ToggleButton in your XAML Metro style AppBar

×

First time here?

You are looking at the most recent posts. You may also want to check out older archives. Please leave a comment, ask a question and consider subscribing to the latest posts via RSS or email. Thank you for visiting!

Monetize your Metro style app with Microsoft AdCenter | | Redesigning my blog for adaptive layout

posted @ Monday, March 19, 2012 9:08 PM | 6 Comments

If you’ve been playing around with the Windows 8 Consumer Preview then hopefully you’ve seen the hundreds of samples provided and downloaded some apps form the store. In a lot of those applications you’ll notice the common theme of the use of an AppBar…the command bar that shows when you swipe from the top or bottom of the screen. You can also invoke the AppBar by right-clicking or using the Windows 8 keyboard shortcut of Windows key + ‘z’ to bring it up as well.

Bing Maps AppBar
Picture of the AppBar in the Bing Maps application

Most of the applications use the standard AppBar button concepts that clicking invokes some action for the app. There may be times, however, where that button serves as a “toggle” to something in your app. Using the Bing Maps app as an example, the “Show Traffic” command is actually a toggle command that, well, shows traffic. You want to give your users some visual indication whether that toggle selection is on/off. This can be accomplished in XAML by using 2 buttons and toggling their visibility, but that may be overkill for what you simple want to do.

The Visual Studio project templates provide a set of styles for the AppBar for you, but more importantly a base style AppBarButtonStyle that serves as the core design. Altering this just slightly and you can have a ToggleAppBarButtonStyle for your project. Here’s the style for that base:

        1: <Style x:Key="ToggleAppBarButtonStyle" TargetType="ToggleButton">

       2:     <Setter Property="Foreground" Value="{StaticResource AppBarItemForegroundBrush}"/>

       3:     <Setter Property="VerticalAlignment" Value="Stretch"/>

       4:     <Setter Property="FontFamily" Value="Segoe UI Symbol"/>

       5:     <Setter Property="FontWeight" Value="Normal"/>

       6:     <Setter Property="FontSize" Value="21.333"/>

       7:     <Setter Property="AutomationProperties.ItemType" Value="AppBar ToggleButton"/>

       8:     <Setter Property="Template">

       9:         <Setter.Value>

            <ControlTemplate TargetType="ToggleButton">

                <Grid Width="100" Background="Transparent">

                    <StackPanel VerticalAlignment="Top" Margin="0,14,0,13">

                        <Grid Width="40" Height="40" Margin="0,0,0,5" HorizontalAlignment="Center">

                            <TextBlock x:Name="BackgroundGlyph" Text="&#xE0A8;" FontFamily="Segoe UI Symbol" FontSize="53.333" Margin="-4,-19,0,0" Foreground="{StaticResource AppBarItemBackgroundBrush}"/>

                            <TextBlock x:Name="BackgroundCheckedGlyph" Visibility="Collapsed" Text="&#xE0A8;" FontFamily="Segoe UI Symbol" FontSize="53.333" Margin="-4,-19,0,0" Foreground="{StaticResource AppBarItemForegroundBrush}"/>

                            <TextBlock x:Name="OutlineGlyph" Text="&#xE0A7;" FontFamily="Segoe UI Symbol" FontSize="53.333" Margin="-4,-19,0,0"/>

                            <ContentPresenter x:Name="Content" HorizontalAlignment="Center" Margin="-1,-1,0,0" VerticalAlignment="Center"/>

                        </Grid>

                        <TextBlock

                        x:Name="TextLabel"

                        Text="{TemplateBinding AutomationProperties.Name}"

                        Margin="0,0,2,0"

                        FontSize="12"

                        TextAlignment="Center"

                        Width="88"

                        MaxHeight="32"

                        TextTrimming="WordEllipsis"

                        Style="{StaticResource BasicTextStyle}"/>

                    </StackPanel>

                    <Rectangle

                        x:Name="FocusVisualWhite"

                        IsHitTestVisible="False"

                        Stroke="{StaticResource FocusVisualWhiteStrokeBrush}"

                        StrokeEndLineCap="Square"

                        StrokeDashArray="1,1"

                        Opacity="0"

                        StrokeDashOffset="1.5"/>

                    <Rectangle

                        x:Name="FocusVisualBlack"

                        IsHitTestVisible="False"

                        Stroke="{StaticResource FocusVisualBlackStrokeBrush}"

                        StrokeEndLineCap="Square"

                        StrokeDashArray="1,1"

                        Opacity="0"

                        StrokeDashOffset="0.5"/>

  

                    <VisualStateManager.VisualStateGroups>

                        <VisualStateGroup x:Name="CommonStates">

                            <VisualState x:Name="Normal"/>

                            <VisualState x:Name="PointerOver">

                                <Storyboard>

                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGlyph" Storyboard.TargetProperty="Foreground">

                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource AppBarItemHoverBackgroundBrush}"/>

                                    </ObjectAnimationUsingKeyFrames>

                                </Storyboard>

                            </VisualState>

                            <VisualState x:Name="Pressed">

                                <Storyboard>

                                    <DoubleAnimation

                                    Storyboard.TargetName="OutlineGlyph"

                                    Storyboard.TargetProperty="Opacity"

                                    To="0"

                                    Duration="0"/>

                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGlyph" Storyboard.TargetProperty="Foreground">

                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource AppBarItemForegroundBrush}"/>

                                    </ObjectAnimationUsingKeyFrames>

                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="Foreground">

                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource AppBarItemPressedForegroundBrush}"/>

                                    </ObjectAnimationUsingKeyFrames>

                                </Storyboard>

                            </VisualState>

                            <VisualState x:Name="Disabled">

                                <Storyboard>

                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OutlineGlyph" Storyboard.TargetProperty="Foreground">

                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource AppBarItemDisabledForegroundBrush}"/>

                                    </ObjectAnimationUsingKeyFrames>

                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="Foreground">

                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource AppBarItemDisabledForegroundBrush}"/>

                                    </ObjectAnimationUsingKeyFrames>

                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel" Storyboard.TargetProperty="Foreground">

                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource AppBarItemDisabledForegroundBrush}"/>

                                    </ObjectAnimationUsingKeyFrames>

                                </Storyboard>

                            </VisualState>

                        </VisualStateGroup>

                        <VisualStateGroup x:Name="FocusStates">

                            <VisualState x:Name="Focused">

                                <Storyboard>

                                    <DoubleAnimation

                                        Storyboard.TargetName="FocusVisualWhite"

                                        Storyboard.TargetProperty="Opacity"

                                        To="1"

                                        Duration="0"/>

                                    <DoubleAnimation

                                        Storyboard.TargetName="FocusVisualBlack"

                                        Storyboard.TargetProperty="Opacity"

                                        To="1"

                                        Duration="0"/>

                                </Storyboard>

                            </VisualState>

                            <VisualState x:Name="Unfocused" />

                            <VisualState x:Name="PointerFocused" />

                        </VisualStateGroup>

                        <VisualStateGroup x:Name="CheckStates">

                            <VisualState x:Name="Checked">

                                <Storyboard>

                                    <DoubleAnimation

                                    Storyboard.TargetName="OutlineGlyph"

                                    Storyboard.TargetProperty="Opacity"

                                    To="0"

                                    Duration="0"/>

                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGlyph" Storyboard.TargetProperty="Foreground">

                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource AppBarItemForegroundBrush}"/>

                                    </ObjectAnimationUsingKeyFrames>

                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundCheckedGlyph" Storyboard.TargetProperty="Visibility">

                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>

                                    </ObjectAnimationUsingKeyFrames>

                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="Foreground">

                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource AppBarItemPressedForegroundBrush}"/>

                                    </ObjectAnimationUsingKeyFrames>

                                </Storyboard>

                            </VisualState>

                            <VisualState x:Name="Unchecked"/>

                            <VisualState x:Name="Indeterminate"/>

                        </VisualStateGroup>

                    </VisualStateManager.VisualStateGroups>

                </Grid>

            </ControlTemplate>

        </Setter.Value>

    </Setter>

</Style>

Now with that style we can have a simple style that shows a toggle on and off for the same button:

       1: ...

       2: <Page.BottomAppBar>

       3:     <AppBar>

       4:         <ToggleButton Style="{StaticResource ToggleAppBarButtonStyle}" 

       5:                 AutomationProperties.Name="Search" 

       6:                 Content="&#xE11A;" />

       7:     </AppBar>

       8: </Page.BottomAppBar>

       9: ...

The result would show:

ToggleButtonAppBarStyle in off/on state

This way we exhibit all the same behaviors of the AppBarButtonStyle, but just applied to the ToggleButton element in XAML. Now we could probably refactor both to have an even more derivative base style and use more BasedOn styling, but how it is currently structured we couldn’t have a ToggleButton based on a Button style. But thanks to the style/template engine in XAML we can re-use a lot and serve our needs!

Notice that you can set the Content to be whatever you want. Since my base style uses the Segoe UI Symbol font, I’m setting the unicode value for a glyph here for Search. A set of some cool glyphs you can use can be found in my previous post on XAML AppBar button styles.

You can get the ToggleAppBarButtonStyle from here: https://gist.github.com/2131230.

Hope this helps!

tags: windows 8, winrt, xaml, appbar, win8, metro

This work is licensed under a Creative Commons Attribution By license.

Monetize your Metro style app with Microsoft AdCenter | | Redesigning my blog for adaptive layout

4/30/2012 12:31 AM | # re: Using a ToggleButton in your XAML Metro style AppBar

Thank you!
this helped!

6/4/2012 7:35 AM | # re: Using a ToggleButton in your XAML Metro style AppBar

Tim,

seems this will not work with RC anymore. Most brushes are unknown.
Any idea how to fix this?

TIA

6/4/2012 8:05 AM | # re: Using a ToggleButton in your XAML Metro style AppBar

figured that out: the brushes have been renamed from "...groundBrush" to "...groundThemeBrush"

6/4/2012 9:56 AM | # re: Using a ToggleButton in your XAML Metro style AppBar

@Chris - yes brush names have changed. See http://aka.ms/rpdevdoc for the full list of changes.

8/29/2012 11:18 AM | # re: Using a ToggleButton in your XAML Metro style AppBar

Tim,

I see from your comment on my blog that Win8 RTM has included support for ToggleButtons in StandardStyles.xaml

However, there seems to be some issues - see stackoverflow.com/...

In particular there is a TextBlock called BackgroundCheckedGlyph missing - the designer throws errors in debug mode about this.

Any news, or anything you can find on this?

Best,

Carl

8/30/2012 4:17 AM | # re: Using a ToggleButton in your XAML Metro style AppBar

Further to my last comment, I believe I have a working solution for styling a ToggleButton in Windows 8 RTM. There are definitely issues with the default StandardStyles.xaml

See my blog post for working solution:
nonsenseinbasic.blogspot.co.uk/...

Name (required) Subject E-mail (will not be published) Website Remember Me? Please enter your comments

Please add 7 and 1 and type the answer here: