Using a ToggleButton in your XAML Metro style AppBar
Thanks for visiting! Just a fair warning this post is fairly 'old' in tech terms and may contain outdated
information and/or broken links or pictures. Please verify info and feel free to contact me if questions!
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.
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">
<pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum2" style="color: #606060"> 2:</span> <span style="color: #0000ff"><</span><span style="color: #800000">Setter</span> <span style="color: #ff0000">Property</span><span style="color: #0000ff">="Foreground"</span> <span style="color: #ff0000">Value</span><span style="color: #0000ff">="{StaticResource AppBarItemForegroundBrush}"</span><span style="color: #0000ff">/></span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum3" style="color: #606060"> 3:</span> <span style="color: #0000ff"><</span><span style="color: #800000">Setter</span> <span style="color: #ff0000">Property</span><span style="color: #0000ff">="VerticalAlignment"</span> <span style="color: #ff0000">Value</span><span style="color: #0000ff">="Stretch"</span><span style="color: #0000ff">/></span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum4" style="color: #606060"> 4:</span> <span style="color: #0000ff"><</span><span style="color: #800000">Setter</span> <span style="color: #ff0000">Property</span><span style="color: #0000ff">="FontFamily"</span> <span style="color: #ff0000">Value</span><span style="color: #0000ff">="Segoe UI Symbol"</span><span style="color: #0000ff">/></span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum5" style="color: #606060"> 5:</span> <span style="color: #0000ff"><</span><span style="color: #800000">Setter</span> <span style="color: #ff0000">Property</span><span style="color: #0000ff">="FontWeight"</span> <span style="color: #ff0000">Value</span><span style="color: #0000ff">="Normal"</span><span style="color: #0000ff">/></span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum6" style="color: #606060"> 6:</span> <span style="color: #0000ff"><</span><span style="color: #800000">Setter</span> <span style="color: #ff0000">Property</span><span style="color: #0000ff">="FontSize"</span> <span style="color: #ff0000">Value</span><span style="color: #0000ff">="21.333"</span><span style="color: #0000ff">/></span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum7" style="color: #606060"> 7:</span> <span style="color: #0000ff"><</span><span style="color: #800000">Setter</span> <span style="color: #ff0000">Property</span><span style="color: #0000ff">="AutomationProperties.ItemType"</span> <span style="color: #ff0000">Value</span><span style="color: #0000ff">="AppBar ToggleButton"</span><span style="color: #0000ff">/></span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum8" style="color: #606060"> 8:</span> <span style="color: #0000ff"><</span><span style="color: #800000">Setter</span> <span style="color: #ff0000">Property</span><span style="color: #0000ff">="Template"</span><span style="color: #0000ff">></span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum9" style="color: #606060"> 9:</span> <span style="color: #0000ff"><</span><span style="color: #800000">Setter.Value</span><span style="color: #0000ff">></span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum10" style="color: #606060"> 10:</span> <span style="color: #0000ff"><</span><span style="color: #800000">ControlTemplate</span> <span style="color: #ff0000">TargetType</span><span style="color: #0000ff">="ToggleButton"</span><span style="color: #0000ff">></span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum11" style="color: #606060"> 11:</span> <span style="color: #0000ff"><</span><span style="color: #800000">Grid</span> <span style="color: #ff0000">Width</span><span style="color: #0000ff">="100"</span> <span style="color: #ff0000">Background</span><span style="color: #0000ff">="Transparent"</span><span style="color: #0000ff">></span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum12" style="color: #606060"> 12:</span> <span style="color: #0000ff"><</span><span style="color: #800000">StackPanel</span> <span style="color: #ff0000">VerticalAlignment</span><span style="color: #0000ff">="Top"</span> <span style="color: #ff0000">Margin</span><span style="color: #0000ff">="0,14,0,13"</span><span style="color: #0000ff">></span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum13" style="color: #606060"> 13:</span> <span style="color: #0000ff"><</span><span style="color: #800000">Grid</span> <span style="color: #ff0000">Width</span><span style="color: #0000ff">="40"</span> <span style="color: #ff0000">Height</span><span style="color: #0000ff">="40"</span> <span style="color: #ff0000">Margin</span><span style="color: #0000ff">="0,0,0,5"</span> <span style="color: #ff0000">HorizontalAlignment</span><span style="color: #0000ff">="Center"</span><span style="color: #0000ff">></span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum14" style="color: #606060"> 14:</span> <span style="color: #0000ff"><</span><span style="color: #800000">TextBlock</span> <span style="color: #ff0000">x:Name</span><span style="color: #0000ff">="BackgroundGlyph"</span> <span style="color: #ff0000">Text</span><span style="color: #0000ff">="&#xE0A8;"</span> <span style="color: #ff0000">FontFamily</span><span style="color: #0000ff">="Segoe UI Symbol"</span> <span style="color: #ff0000">FontSize</span><span style="color: #0000ff">="53.333"</span> <span style="color: #ff0000">Margin</span><span style="color: #0000ff">="-4,-19,0,0"</span> <span style="color: #ff0000">Foreground</span><span style="color: #0000ff">="{StaticResource AppBarItemBackgroundBrush}"</span><span style="color: #0000ff">/></span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum15" style="color: #606060"> 15:</span> <span style="color: #0000ff"><</span><span style="color: #800000">TextBlock</span> <span style="color: #ff0000">x:Name</span><span style="color: #0000ff">="BackgroundCheckedGlyph"</span> <span style="color: #ff0000">Visibility</span><span style="color: #0000ff">="Collapsed"</span> <span style="color: #ff0000">Text</span><span style="color: #0000ff">="&#xE0A8;"</span> <span style="color: #ff0000">FontFamily</span><span style="color: #0000ff">="Segoe UI Symbol"</span> <span style="color: #ff0000">FontSize</span><span style="color: #0000ff">="53.333"</span> <span style="color: #ff0000">Margin</span><span style="color: #0000ff">="-4,-19,0,0"</span> <span style="color: #ff0000">Foreground</span><span style="color: #0000ff">="{StaticResource AppBarItemForegroundBrush}"</span><span style="color: #0000ff">/></span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum16" style="color: #606060"> 16:</span> <span style="color: #0000ff"><</span><span style="color: #800000">TextBlock</span> <span style="color: #ff0000">x:Name</span><span style="color: #0000ff">="OutlineGlyph"</span> <span style="color: #ff0000">Text</span><span style="color: #0000ff">="&#xE0A7;"</span> <span style="color: #ff0000">FontFamily</span><span style="color: #0000ff">="Segoe UI Symbol"</span> <span style="color: #ff0000">FontSize</span><span style="color: #0000ff">="53.333"</span> <span style="color: #ff0000">Margin</span><span style="color: #0000ff">="-4,-19,0,0"</span><span style="color: #0000ff">/></span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum17" style="color: #606060"> 17:</span> <span style="color: #0000ff"><</span><span style="color: #800000">ContentPresenter</span> <span style="color: #ff0000">x:Name</span><span style="color: #0000ff">="Content"</span> <span style="color: #ff0000">HorizontalAlignment</span><span style="color: #0000ff">="Center"</span> <span style="color: #ff0000">Margin</span><span style="color: #0000ff">="-1,-1,0,0"</span> <span style="color: #ff0000">VerticalAlignment</span><span style="color: #0000ff">="Center"</span><span style="color: #0000ff">/></span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum18" style="color: #606060"> 18:</span> <span style="color: #0000ff"></</span><span style="color: #800000">Grid</span><span style="color: #0000ff">></span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum19" style="color: #606060"> 19:</span> <span style="color: #0000ff"><</span><span style="color: #800000">TextBlock</span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum20" style="color: #606060"> 20:</span> <span style="color: #ff0000">x:Name</span><span style="color: #0000ff">="TextLabel"</span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum21" style="color: #606060"> 21:</span> <span style="color: #ff0000">Text</span><span style="color: #0000ff">="{TemplateBinding AutomationProperties.Name}"</span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum22" style="color: #606060"> 22:</span> <span style="color: #ff0000">Margin</span><span style="color: #0000ff">="0,0,2,0"</span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum23" style="color: #606060"> 23:</span> <span style="color: #ff0000">FontSize</span><span style="color: #0000ff">="12"</span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum24" style="color: #606060"> 24:</span> <span style="color: #ff0000">TextAlignment</span><span style="color: #0000ff">="Center"</span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum25" style="color: #606060"> 25:</span> <span style="color: #ff0000">Width</span><span style="color: #0000ff">="88"</span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum26" style="color: #606060"> 26:</span> <span style="color: #ff0000">MaxHeight</span><span style="color: #0000ff">="32"</span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum27" style="color: #606060"> 27:</span> <span style="color: #ff0000">TextTrimming</span><span style="color: #0000ff">="WordEllipsis"</span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum28" style="color: #606060"> 28:</span> <span style="color: #ff0000">Style</span><span style="color: #0000ff">="{StaticResource BasicTextStyle}"</span><span style="color: #0000ff">/></span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum29" style="color: #606060"> 29:</span> <span style="color: #0000ff"></</span><span style="color: #800000">StackPanel</span><span style="color: #0000ff">></span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum30" style="color: #606060"> 30:</span> <span style="color: #0000ff"><</span><span style="color: #800000">Rectangle</span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum31" style="color: #606060"> 31:</span> <span style="color: #ff0000">x:Name</span><span style="color: #0000ff">="FocusVisualWhite"</span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum32" style="color: #606060"> 32:</span> <span style="color: #ff0000">IsHitTestVisible</span><span style="color: #0000ff">="False"</span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum33" style="color: #606060"> 33:</span> <span style="color: #ff0000">Stroke</span><span style="color: #0000ff">="{StaticResource FocusVisualWhiteStrokeBrush}"</span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum34" style="color: #606060"> 34:</span> <span style="color: #ff0000">StrokeEndLineCap</span><span style="color: #0000ff">="Square"</span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum35" style="color: #606060"> 35:</span> <span style="color: #ff0000">StrokeDashArray</span><span style="color: #0000ff">="1,1"</span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum36" style="color: #606060"> 36:</span> <span style="color: #ff0000">Opacity</span><span style="color: #0000ff">="0"</span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum37" style="color: #606060"> 37:</span> <span style="color: #ff0000">StrokeDashOffset</span><span style="color: #0000ff">="1.5"</span><span style="color: #0000ff">/></span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum38" style="color: #606060"> 38:</span> <span style="color: #0000ff"><</span><span style="color: #800000">Rectangle</span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum39" style="color: #606060"> 39:</span> <span style="color: #ff0000">x:Name</span><span style="color: #0000ff">="FocusVisualBlack"</span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum40" style="color: #606060"> 40:</span> <span style="color: #ff0000">IsHitTestVisible</span><span style="color: #0000ff">="False"</span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum41" style="color: #606060"> 41:</span> <span style="color: #ff0000">Stroke</span><span style="color: #0000ff">="{StaticResource FocusVisualBlackStrokeBrush}"</span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum42" style="color: #606060"> 42:</span> <span style="color: #ff0000">StrokeEndLineCap</span><span style="color: #0000ff">="Square"</span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum43" style="color: #606060"> 43:</span> <span style="color: #ff0000">StrokeDashArray</span><span style="color: #0000ff">="1,1"</span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum44" style="color: #606060"> 44:</span> <span style="color: #ff0000">Opacity</span><span style="color: #0000ff">="0"</span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum45" style="color: #606060"> 45:</span> <span style="color: #ff0000">StrokeDashOffset</span><span style="color: #0000ff">="0.5"</span><span style="color: #0000ff">/></span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum46" style="color: #606060"> 46:</span> </pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum47" style="color: #606060"> 47:</span> <span style="color: #0000ff"><</span><span style="color: #800000">VisualStateManager.VisualStateGroups</span><span style="color: #0000ff">></span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum48" style="color: #606060"> 48:</span> <span style="color: #0000ff"><</span><span style="color: #800000">VisualStateGroup</span> <span style="color: #ff0000">x:Name</span><span style="color: #0000ff">="CommonStates"</span><span style="color: #0000ff">></span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum49" style="color: #606060"> 49:</span> <span style="color: #0000ff"><</span><span style="color: #800000">VisualState</span> <span style="color: #ff0000">x:Name</span><span style="color: #0000ff">="Normal"</span><span style="color: #0000ff">/></span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum50" style="color: #606060"> 50:</span> <span style="color: #0000ff"><</span><span style="color: #800000">VisualState</span> <span style="color: #ff0000">x:Name</span><span style="color: #0000ff">="PointerOver"</span><span style="color: #0000ff">></span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum51" style="color: #606060"> 51:</span> <span style="color: #0000ff"><</span><span style="color: #800000">Storyboard</span><span style="color: #0000ff">></span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum52" style="color: #606060"> 52:</span> <span style="color: #0000ff"><</span><span style="color: #800000">ObjectAnimationUsingKeyFrames</span> <span style="color: #ff0000">Storyboard</span>.<span style="color: #ff0000">TargetName</span><span style="color: #0000ff">="BackgroundGlyph"</span> <span style="color: #ff0000">Storyboard</span>.<span style="color: #ff0000">TargetProperty</span><span style="color: #0000ff">="Foreground"</span><span style="color: #0000ff">></span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum53" style="color: #606060"> 53:</span> <span style="color: #0000ff"><</span><span style="color: #800000">DiscreteObjectKeyFrame</span> <span style="color: #ff0000">KeyTime</span><span style="color: #0000ff">="0"</span> <span style="color: #ff0000">Value</span><span style="color: #0000ff">="{StaticResource AppBarItemHoverBackgroundBrush}"</span><span style="color: #0000ff">/></span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum54" style="color: #606060"> 54:</span> <span style="color: #0000ff"></</span><span style="color: #800000">ObjectAnimationUsingKeyFrames</span><span style="color: #0000ff">></span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum55" style="color: #606060"> 55:</span> <span style="color: #0000ff"></</span><span style="color: #800000">Storyboard</span><span style="color: #0000ff">></span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum56" style="color: #606060"> 56:</span> <span style="color: #0000ff"></</span><span style="color: #800000">VisualState</span><span style="color: #0000ff">></span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum57" style="color: #606060"> 57:</span> <span style="color: #0000ff"><</span><span style="color: #800000">VisualState</span> <span style="color: #ff0000">x:Name</span><span style="color: #0000ff">="Pressed"</span><span style="color: #0000ff">></span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum58" style="color: #606060"> 58:</span> <span style="color: #0000ff"><</span><span style="color: #800000">Storyboard</span><span style="color: #0000ff">></span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum59" style="color: #606060"> 59:</span> <span style="color: #0000ff"><</span><span style="color: #800000">DoubleAnimation</span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum60" style="color: #606060"> 60:</span> <span style="color: #ff0000">Storyboard</span>.<span style="color: #ff0000">TargetName</span><span style="color: #0000ff">="OutlineGlyph"</span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum61" style="color: #606060"> 61:</span> <span style="color: #ff0000">Storyboard</span>.<span style="color: #ff0000">TargetProperty</span><span style="color: #0000ff">="Opacity"</span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum62" style="color: #606060"> 62:</span> <span style="color: #ff0000">To</span><span style="color: #0000ff">="0"</span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum63" style="color: #606060"> 63:</span> <span style="color: #ff0000">Duration</span><span style="color: #0000ff">="0"</span><span style="color: #0000ff">/></span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum64" style="color: #606060"> 64:</span> <span style="color: #0000ff"><</span><span style="color: #800000">ObjectAnimationUsingKeyFrames</span> <span style="color: #ff0000">Storyboard</span>.<span style="color: #ff0000">TargetName</span><span style="color: #0000ff">="BackgroundGlyph"</span> <span style="color: #ff0000">Storyboard</span>.<span style="color: #ff0000">TargetProperty</span><span style="color: #0000ff">="Foreground"</span><span style="color: #0000ff">></span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum65" style="color: #606060"> 65:</span> <span style="color: #0000ff"><</span><span style="color: #800000">DiscreteObjectKeyFrame</span> <span style="color: #ff0000">KeyTime</span><span style="color: #0000ff">="0"</span> <span style="color: #ff0000">Value</span><span style="color: #0000ff">="{StaticResource AppBarItemForegroundBrush}"</span><span style="color: #0000ff">/></span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum66" style="color: #606060"> 66:</span> <span style="color: #0000ff"></</span><span style="color: #800000">ObjectAnimationUsingKeyFrames</span><span style="color: #0000ff">></span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum67" style="color: #606060"> 67:</span> <span style="color: #0000ff"><</span><span style="color: #800000">ObjectAnimationUsingKeyFrames</span> <span style="color: #ff0000">Storyboard</span>.<span style="color: #ff0000">TargetName</span><span style="color: #0000ff">="Content"</span> <span style="color: #ff0000">Storyboard</span>.<span style="color: #ff0000">TargetProperty</span><span style="color: #0000ff">="Foreground"</span><span style="color: #0000ff">></span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum68" style="color: #606060"> 68:</span> <span style="color: #0000ff"><</span><span style="color: #800000">DiscreteObjectKeyFrame</span> <span style="color: #ff0000">KeyTime</span><span style="color: #0000ff">="0"</span> <span style="color: #ff0000">Value</span><span style="color: #0000ff">="{StaticResource AppBarItemPressedForegroundBrush}"</span><span style="color: #0000ff">/></span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum69" style="color: #606060"> 69:</span> <span style="color: #0000ff"></</span><span style="color: #800000">ObjectAnimationUsingKeyFrames</span><span style="color: #0000ff">></span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum70" style="color: #606060"> 70:</span> <span style="color: #0000ff"></</span><span style="color: #800000">Storyboard</span><span style="color: #0000ff">></span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum71" style="color: #606060"> 71:</span> <span style="color: #0000ff"></</span><span style="color: #800000">VisualState</span><span style="color: #0000ff">></span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum72" style="color: #606060"> 72:</span> <span style="color: #0000ff"><</span><span style="color: #800000">VisualState</span> <span style="color: #ff0000">x:Name</span><span style="color: #0000ff">="Disabled"</span><span style="color: #0000ff">></span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum73" style="color: #606060"> 73:</span> <span style="color: #0000ff"><</span><span style="color: #800000">Storyboard</span><span style="color: #0000ff">></span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum74" style="color: #606060"> 74:</span> <span style="color: #0000ff"><</span><span style="color: #800000">ObjectAnimationUsingKeyFrames</span> <span style="color: #ff0000">Storyboard</span>.<span style="color: #ff0000">TargetName</span><span style="color: #0000ff">="OutlineGlyph"</span> <span style="color: #ff0000">Storyboard</span>.<span style="color: #ff0000">TargetProperty</span><span style="color: #0000ff">="Foreground"</span><span style="color: #0000ff">></span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum75" style="color: #606060"> 75:</span> <span style="color: #0000ff"><</span><span style="color: #800000">DiscreteObjectKeyFrame</span> <span style="color: #ff0000">KeyTime</span><span style="color: #0000ff">="0"</span> <span style="color: #ff0000">Value</span><span style="color: #0000ff">="{StaticResource AppBarItemDisabledForegroundBrush}"</span><span style="color: #0000ff">/></span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum76" style="color: #606060"> 76:</span> <span style="color: #0000ff"></</span><span style="color: #800000">ObjectAnimationUsingKeyFrames</span><span style="color: #0000ff">></span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum77" style="color: #606060"> 77:</span> <span style="color: #0000ff"><</span><span style="color: #800000">ObjectAnimationUsingKeyFrames</span> <span style="color: #ff0000">Storyboard</span>.<span style="color: #ff0000">TargetName</span><span style="color: #0000ff">="Content"</span> <span style="color: #ff0000">Storyboard</span>.<span style="color: #ff0000">TargetProperty</span><span style="color: #0000ff">="Foreground"</span><span style="color: #0000ff">></span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum78" style="color: #606060"> 78:</span> <span style="color: #0000ff"><</span><span style="color: #800000">DiscreteObjectKeyFrame</span> <span style="color: #ff0000">KeyTime</span><span style="color: #0000ff">="0"</span> <span style="color: #ff0000">Value</span><span style="color: #0000ff">="{StaticResource AppBarItemDisabledForegroundBrush}"</span><span style="color: #0000ff">/></span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum79" style="color: #606060"> 79:</span> <span style="color: #0000ff"></</span><span style="color: #800000">ObjectAnimationUsingKeyFrames</span><span style="color: #0000ff">></span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum80" style="color: #606060"> 80:</span> <span style="color: #0000ff"><</span><span style="color: #800000">ObjectAnimationUsingKeyFrames</span> <span style="color: #ff0000">Storyboard</span>.<span style="color: #ff0000">TargetName</span><span style="color: #0000ff">="TextLabel"</span> <span style="color: #ff0000">Storyboard</span>.<span style="color: #ff0000">TargetProperty</span><span style="color: #0000ff">="Foreground"</span><span style="color: #0000ff">></span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum81" style="color: #606060"> 81:</span> <span style="color: #0000ff"><</span><span style="color: #800000">DiscreteObjectKeyFrame</span> <span style="color: #ff0000">KeyTime</span><span style="color: #0000ff">="0"</span> <span style="color: #ff0000">Value</span><span style="color: #0000ff">="{StaticResource AppBarItemDisabledForegroundBrush}"</span><span style="color: #0000ff">/></span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum82" style="color: #606060"> 82:</span> <span style="color: #0000ff"></</span><span style="color: #800000">ObjectAnimationUsingKeyFrames</span><span style="color: #0000ff">></span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum83" style="color: #606060"> 83:</span> <span style="color: #0000ff"></</span><span style="color: #800000">Storyboard</span><span style="color: #0000ff">></span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum84" style="color: #606060"> 84:</span> <span style="color: #0000ff"></</span><span style="color: #800000">VisualState</span><span style="color: #0000ff">></span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum85" style="color: #606060"> 85:</span> <span style="color: #0000ff"></</span><span style="color: #800000">VisualStateGroup</span><span style="color: #0000ff">></span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum86" style="color: #606060"> 86:</span> <span style="color: #0000ff"><</span><span style="color: #800000">VisualStateGroup</span> <span style="color: #ff0000">x:Name</span><span style="color: #0000ff">="FocusStates"</span><span style="color: #0000ff">></span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum87" style="color: #606060"> 87:</span> <span style="color: #0000ff"><</span><span style="color: #800000">VisualState</span> <span style="color: #ff0000">x:Name</span><span style="color: #0000ff">="Focused"</span><span style="color: #0000ff">></span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum88" style="color: #606060"> 88:</span> <span style="color: #0000ff"><</span><span style="color: #800000">Storyboard</span><span style="color: #0000ff">></span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum89" style="color: #606060"> 89:</span> <span style="color: #0000ff"><</span><span style="color: #800000">DoubleAnimation</span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum90" style="color: #606060"> 90:</span> <span style="color: #ff0000">Storyboard</span>.<span style="color: #ff0000">TargetName</span><span style="color: #0000ff">="FocusVisualWhite"</span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum91" style="color: #606060"> 91:</span> <span style="color: #ff0000">Storyboard</span>.<span style="color: #ff0000">TargetProperty</span><span style="color: #0000ff">="Opacity"</span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum92" style="color: #606060"> 92:</span> <span style="color: #ff0000">To</span><span style="color: #0000ff">="1"</span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum93" style="color: #606060"> 93:</span> <span style="color: #ff0000">Duration</span><span style="color: #0000ff">="0"</span><span style="color: #0000ff">/></span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum94" style="color: #606060"> 94:</span> <span style="color: #0000ff"><</span><span style="color: #800000">DoubleAnimation</span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum95" style="color: #606060"> 95:</span> <span style="color: #ff0000">Storyboard</span>.<span style="color: #ff0000">TargetName</span><span style="color: #0000ff">="FocusVisualBlack"</span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum96" style="color: #606060"> 96:</span> <span style="color: #ff0000">Storyboard</span>.<span style="color: #ff0000">TargetProperty</span><span style="color: #0000ff">="Opacity"</span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum97" style="color: #606060"> 97:</span> <span style="color: #ff0000">To</span><span style="color: #0000ff">="1"</span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum98" style="color: #606060"> 98:</span> <span style="color: #ff0000">Duration</span><span style="color: #0000ff">="0"</span><span style="color: #0000ff">/></span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum99" style="color: #606060"> 99:</span> <span style="color: #0000ff"></</span><span style="color: #800000">Storyboard</span><span style="color: #0000ff">></span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum100" style="color: #606060"> 100:</span> <span style="color: #0000ff"></</span><span style="color: #800000">VisualState</span><span style="color: #0000ff">></span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum101" style="color: #606060"> 101:</span> <span style="color: #0000ff"><</span><span style="color: #800000">VisualState</span> <span style="color: #ff0000">x:Name</span><span style="color: #0000ff">="Unfocused"</span> <span style="color: #0000ff">/></span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum102" style="color: #606060"> 102:</span> <span style="color: #0000ff"><</span><span style="color: #800000">VisualState</span> <span style="color: #ff0000">x:Name</span><span style="color: #0000ff">="PointerFocused"</span> <span style="color: #0000ff">/></span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum103" style="color: #606060"> 103:</span> <span style="color: #0000ff"></</span><span style="color: #800000">VisualStateGroup</span><span style="color: #0000ff">></span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum104" style="color: #606060"> 104:</span> <span style="color: #0000ff"><</span><span style="color: #800000">VisualStateGroup</span> <span style="color: #ff0000">x:Name</span><span style="color: #0000ff">="CheckStates"</span><span style="color: #0000ff">></span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum105" style="color: #606060"> 105:</span> <span style="color: #0000ff"><</span><span style="color: #800000">VisualState</span> <span style="color: #ff0000">x:Name</span><span style="color: #0000ff">="Checked"</span><span style="color: #0000ff">></span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum106" style="color: #606060"> 106:</span> <span style="color: #0000ff"><</span><span style="color: #800000">Storyboard</span><span style="color: #0000ff">></span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum107" style="color: #606060"> 107:</span> <span style="color: #0000ff"><</span><span style="color: #800000">DoubleAnimation</span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum108" style="color: #606060"> 108:</span> <span style="color: #ff0000">Storyboard</span>.<span style="color: #ff0000">TargetName</span><span style="color: #0000ff">="OutlineGlyph"</span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum109" style="color: #606060"> 109:</span> <span style="color: #ff0000">Storyboard</span>.<span style="color: #ff0000">TargetProperty</span><span style="color: #0000ff">="Opacity"</span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum110" style="color: #606060"> 110:</span> <span style="color: #ff0000">To</span><span style="color: #0000ff">="0"</span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum111" style="color: #606060"> 111:</span> <span style="color: #ff0000">Duration</span><span style="color: #0000ff">="0"</span><span style="color: #0000ff">/></span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum112" style="color: #606060"> 112:</span> <span style="color: #0000ff"><</span><span style="color: #800000">ObjectAnimationUsingKeyFrames</span> <span style="color: #ff0000">Storyboard</span>.<span style="color: #ff0000">TargetName</span><span style="color: #0000ff">="BackgroundGlyph"</span> <span style="color: #ff0000">Storyboard</span>.<span style="color: #ff0000">TargetProperty</span><span style="color: #0000ff">="Foreground"</span><span style="color: #0000ff">></span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum113" style="color: #606060"> 113:</span> <span style="color: #0000ff"><</span><span style="color: #800000">DiscreteObjectKeyFrame</span> <span style="color: #ff0000">KeyTime</span><span style="color: #0000ff">="0"</span> <span style="color: #ff0000">Value</span><span style="color: #0000ff">="{StaticResource AppBarItemForegroundBrush}"</span><span style="color: #0000ff">/></span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum114" style="color: #606060"> 114:</span> <span style="color: #0000ff"></</span><span style="color: #800000">ObjectAnimationUsingKeyFrames</span><span style="color: #0000ff">></span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum115" style="color: #606060"> 115:</span> <span style="color: #0000ff"><</span><span style="color: #800000">ObjectAnimationUsingKeyFrames</span> <span style="color: #ff0000">Storyboard</span>.<span style="color: #ff0000">TargetName</span><span style="color: #0000ff">="BackgroundCheckedGlyph"</span> <span style="color: #ff0000">Storyboard</span>.<span style="color: #ff0000">TargetProperty</span><span style="color: #0000ff">="Visibility"</span><span style="color: #0000ff">></span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum116" style="color: #606060"> 116:</span> <span style="color: #0000ff"><</span><span style="color: #800000">DiscreteObjectKeyFrame</span> <span style="color: #ff0000">KeyTime</span><span style="color: #0000ff">="0"</span> <span style="color: #ff0000">Value</span><span style="color: #0000ff">="Visible"</span><span style="color: #0000ff">/></span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum117" style="color: #606060"> 117:</span> <span style="color: #0000ff"></</span><span style="color: #800000">ObjectAnimationUsingKeyFrames</span><span style="color: #0000ff">></span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum118" style="color: #606060"> 118:</span> <span style="color: #0000ff"><</span><span style="color: #800000">ObjectAnimationUsingKeyFrames</span> <span style="color: #ff0000">Storyboard</span>.<span style="color: #ff0000">TargetName</span><span style="color: #0000ff">="Content"</span> <span style="color: #ff0000">Storyboard</span>.<span style="color: #ff0000">TargetProperty</span><span style="color: #0000ff">="Foreground"</span><span style="color: #0000ff">></span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum119" style="color: #606060"> 119:</span> <span style="color: #0000ff"><</span><span style="color: #800000">DiscreteObjectKeyFrame</span> <span style="color: #ff0000">KeyTime</span><span style="color: #0000ff">="0"</span> <span style="color: #ff0000">Value</span><span style="color: #0000ff">="{StaticResource AppBarItemPressedForegroundBrush}"</span><span style="color: #0000ff">/></span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum120" style="color: #606060"> 120:</span> <span style="color: #0000ff"></</span><span style="color: #800000">ObjectAnimationUsingKeyFrames</span><span style="color: #0000ff">></span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum121" style="color: #606060"> 121:</span> <span style="color: #0000ff"></</span><span style="color: #800000">Storyboard</span><span style="color: #0000ff">></span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum122" style="color: #606060"> 122:</span> <span style="color: #0000ff"></</span><span style="color: #800000">VisualState</span><span style="color: #0000ff">></span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum123" style="color: #606060"> 123:</span> <span style="color: #0000ff"><</span><span style="color: #800000">VisualState</span> <span style="color: #ff0000">x:Name</span><span style="color: #0000ff">="Unchecked"</span><span style="color: #0000ff">/></span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum124" style="color: #606060"> 124:</span> <span style="color: #0000ff"><</span><span style="color: #800000">VisualState</span> <span style="color: #ff0000">x:Name</span><span style="color: #0000ff">="Indeterminate"</span><span style="color: #0000ff">/></span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum125" style="color: #606060"> 125:</span> <span style="color: #0000ff"></</span><span style="color: #800000">VisualStateGroup</span><span style="color: #0000ff">></span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum126" style="color: #606060"> 126:</span> <span style="color: #0000ff"></</span><span style="color: #800000">VisualStateManager.VisualStateGroups</span><span style="color: #0000ff">></span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum127" style="color: #606060"> 127:</span> <span style="color: #0000ff"></</span><span style="color: #800000">Grid</span><span style="color: #0000ff">></span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum128" style="color: #606060"> 128:</span> <span style="color: #0000ff"></</span><span style="color: #800000">ControlTemplate</span><span style="color: #0000ff">></span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum129" style="color: #606060"> 129:</span> <span style="color: #0000ff"></</span><span style="color: #800000">Setter.Value</span><span style="color: #0000ff">></span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum130" style="color: #606060"> 130:</span> <span style="color: #0000ff"></</span><span style="color: #800000">Setter</span><span style="color: #0000ff">></span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum131" style="color: #606060"> 131:</span> <span style="color: #0000ff"></</span><span style="color: #800000">Style</span><span style="color: #0000ff">></span></pre>Now with that style we can have a simple style that shows a toggle on and off for the same button:
1: ...
<pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum2" style="color: #606060"> 2:</span> <span style="color: #0000ff"><</span><span style="color: #800000">Page.BottomAppBar</span><span style="color: #0000ff">></span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum3" style="color: #606060"> 3:</span> <span style="color: #0000ff"><</span><span style="color: #800000">AppBar</span><span style="color: #0000ff">></span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum4" style="color: #606060"> 4:</span> <span style="color: #0000ff"><</span><span style="color: #800000">ToggleButton</span> <span style="color: #ff0000">Style</span><span style="color: #0000ff">="{StaticResource ToggleAppBarButtonStyle}"</span> </pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum5" style="color: #606060"> 5:</span> <span style="color: #ff0000">AutomationProperties</span>.<span style="color: #ff0000">Name</span><span style="color: #0000ff">="Search"</span> </pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum6" style="color: #606060"> 6:</span> <span style="color: #ff0000">Content</span><span style="color: #0000ff">="&#xE11A;"</span> <span style="color: #0000ff">/></span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum7" style="color: #606060"> 7:</span> <span style="color: #0000ff"></</span><span style="color: #800000">AppBar</span><span style="color: #0000ff">></span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum8" style="color: #606060"> 8:</span> <span style="color: #0000ff"></</span><span style="color: #800000">Page.BottomAppBar</span><span style="color: #0000ff">></span></pre><pre style="border-top-style: none; font-size: 8pt; font-family: 'Courier New', courier, monospace; width: 100%; border-bottom-style: none; color: black; overflow: visible; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; border-left-style: none; line-height: 12pt; padding-right: 0px; background-color: #f4f4f4"><span id="lnum9" style="color: #606060"> 9:</span> ...</pre>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!
Please enjoy some of these other recent posts...