Search code examples
winui-3winui

AppBarButton Icon is not vertically centered within its parent

I have an AppBarButton with its Icon property set to Back so it displays a back arrow, however, the Icon is not vertically centered, it's always at the bottom of the button.

I tried setting the VerticalContentAlignment to Center or any other value but it doesn't change anything, I also tried to use FontIcon but it's also at the bottom. The only result of my searches I saw online about this (the FontIcon that isn't correctly centered) was that setting the LabelPosition property to Collapsed fixes the issue (along setting VerticalAligment property of the FontIcon to Center), but I found out it doesn't even do anything.

To my surprise, nobody (from what I searched on this website and anywhere else) asked that so I'm left with no choice but ask this question.

For information, the AppBarButton is located in the TitleBar that is represented with a StackPanel (of course I set ExtendsContentIntoTitleBar of the window to true) which is in a grid representing the whole window content, and here are screenshots of that issue:

Icon aligned at the bottom Button with selection at the bottom

And here is my code too:

    <Grid x:Name="Root" Background="{ThemeResource AcrylicBackgroundFillColorBaseBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <!--Title bar stack panel-->
        <StackPanel Grid.Row="0" Orientation="Horizontal" Height="32">
            <!--tried to set the LabelPosition property to collapsed but it didn't change anything. I previously tried to use FontIcon inside of the AppBarButton instead of the Icon property but same issue-->
            <AppBarButton Icon="Back" Height="32" IsEnabled="{x:Bind ContentFrame.CanGoBack}" VerticalContentAlignment="Center" LabelPosition="Collapsed"/>
            <!--Window icon-->
            <Image Source="Assets/Square150x150Logo.scale-200.png" Width="24" Height="24" VerticalAlignment="Center" Margin="5,0,0,0"/>
            <!--title-->
            <TextBlock Foreground="{ThemeResource TextFillColorPrimaryBrush}" Text="WinUi app" Margin="4,0,0,0" VerticalAlignment="Center"/>
        </StackPanel>

        <!--Window content-->
        <Frame Grid.Row="1" Margin="0,36,0,0" x:Name="ContentFrame" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Transparent"></Frame>
    </Grid>

If something is unclear, make sure to tell me.

Thanks for your help!

Solution

  • You might need to override these resources:

    <Page.Resources>
    <x:Double x:Key="AppBarThemeCompactHeight">32</x:Double>
    <Thickness x:Key="AppBarButtonContentViewboxCollapsedMargin">0,8,0,8</Thickness>
</Page.Resources>

    You can learn about this in the generic.xaml file.