XAML AppBarButton Bottom Border disapears by changing the AppBarButton height under 40

Question

You know why the border bottom disapears by changing the height under 40 ?

Where in the Style can i change the values of the border?

Answer 1

Hi,

Welcome to Microsoft Q&A!

When you use AppBarButton, it use the default style whose key is AppBarButtonRevealStyle. As follows:

<Style TargetType="AppBarButton" x:Key="AppBarButtonRevealStyle">  
…  
                           <Viewbox x:Name="ContentViewbox"  
                                Height="{ThemeResource AppBarButtonContentHeight}"  
                                Margin="{ThemeResource AppBarButtonContentViewboxCollapsedMargin}"  
                                HorizontalAlignment="Stretch"  
                                AutomationProperties.AccessibilityView="Raw" >  
                                <ContentPresenter x:Name="Content"  
                                    Content="{TemplateBinding Icon}"  
                                    Foreground="{TemplateBinding Foreground}"/>  
                            </Viewbox>  
                            <TextBlock x:Name="TextLabel"  
                                Grid.Row="1"  
                                Text="{TemplateBinding Label}"  
                                Foreground="{TemplateBinding Foreground}"  
                                FontSize="12"  
                                FontFamily="{TemplateBinding FontFamily}"  
                                TextAlignment="Center"  
                                TextWrapping="Wrap"  
                                Margin="{ThemeResource AppBarButtonTextLabelMargin}"  
                                AutomationProperties.AccessibilityView="Raw" />  
 ……  
  
        
</Style>  

As you can see, the AppBarButton consists of Viewbox and TextBlock, the viewBox contains an icon, the icon has a fixed size, its height is AppBarButtonContentHeight whose value is 16, its margin is AppBarButtonContentViewboxCollapsedMargin whose value is “0,12,0,4”. Therefore, if you want to see the entired icon, you cannot set its height to be less than 28(viewbox.Height+margin.Top). Besides, the container of AppbarButton is Commandbar, the MinHeight of Commandbar is AppBarThemeCompactHeight whose value is 40, so you need to set AppBarButton.Height to be greater than 40, otherwise, the border bottom will disappear.

---

If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.