XAML: Show/Hide UI Element When Resizing The Window-CodePudding

I would like to do this stuff in XAML. => https://docs.microsoft.com/en-us/windows/apps/design/layout/images/rsp-design/rspd-revealhide.gif

I tried to as by myself but I'm kinda stuck.

Thanks for help!

CodePudding user response：

This is something close to the gif you provided.

<StackPanel>
    <StackPanel.Resources>
        <Style TargetType="AppBarElementContainer">
            <Setter Property="Margin" Value="10,0,10,0" />
            <Setter Property="VerticalAlignment" Value="Center" />
        </Style>
        <Style TargetType="Border">
            <Setter Property="Background" Value="DimGray" />
            <Setter Property="Width" Value="50" />
            <Setter Property="Height" Value="50" />
        </Style>
        <Style TargetType="TextBlock">
            <Setter Property="HorizontalAlignment" Value="Center" />
            <Setter Property="VerticalAlignment" Value="Center" />
            <Setter Property="Margin" Value="10" />
            <Setter Property="FontSize" Value="30" />
        </Style>
    </StackPanel.Resources>
    <CommandBar
        Margin="10"
        HorizontalAlignment="Left"
        Background="Gray"
        OverflowButtonVisibility="Visible">
        <AppBarElementContainer>
            <Border>
                <TextBlock Text="A" />
            </Border>
        </AppBarElementContainer>
        <AppBarElementContainer>
            <Border>
                <TextBlock Text="B" />
            </Border>
        </AppBarElementContainer>
        <AppBarElementContainer>
            <Border>
                <TextBlock Text="C" />
            </Border>
        </AppBarElementContainer>
        <AppBarElementContainer>
            <Border>
                <TextBlock Text="D" />
            </Border>
        </AppBarElementContainer>
        <AppBarElementContainer>
            <Border>
                <TextBlock Text="E" />
            </Border>
        </AppBarElementContainer>
        <AppBarElementContainer>
            <Border>
                <TextBlock Text="F" />
            </Border>
        </AppBarElementContainer>
        <AppBarElementContainer>
            <Border>
                <TextBlock Text="G" />
            </Border>
        </AppBarElementContainer>
    </CommandBar>
</StackPanel>

You might want to adjust the CommandBar's Height.

App.xaml

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
            <!--  Other merged dictionaries here  -->
        </ResourceDictionary.MergedDictionaries>
        <!--  Other app resources here  -->
        <x:Double x:Key="AppBarThemeCompactHeight">100</x:Double>
    </ResourceDictionary>
</Application.Resources>