How to display icons in Appbar’s secondary menu

By default the secondary menu from an AppBar does not display a icon. However, it’s pretty trivial to change.

      <AppBarButton Label="A" Icon="Accept" >
           <AppBarButton Label="B" Icon="Accept" Style="{StaticResource AppBarButtonStyle1}" />

Then in the AppBarButtonStyle1 change the overflow, here is very quick hack to prove the point;

 <VisualState x:Name="Overflow"
     <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ContentRoot">
        <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
     <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="OverflowTextLabel">
        <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>

and that gives you


Obviously that is ugly but it is the base of how to provide the icons

2 thoughts on “How to display icons in Appbar’s secondary menu

  1. Julien July 9, 2016 / 3:41 pm

    how did you implement the visual state within the style? can you show the AppButtonStyle1?

    • pauliom July 10, 2016 / 8:59 pm

      In Blend (or Designer) edit the template of the button

Leave a Reply to Julien Cancel reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s