XAML：调整窗口大小时显示/隐藏UI元素

xxslljrj 于 2022-12-07 发布在其他

关注(0)|答案(1)|浏览(173)

我想用XAML来做这些事情。=〉https://learn.microsoft.com/en-us/windows/apps/design/layout/images/rsp-design/rspd-revealhide.gif
我试着一个人去，但我有点卡住了。
感谢您的帮助！

xaml

来源：https://stackoverflow.com/questions/73717655/xaml-show-hide-ui-element-when-resizing-the-window

1条答案

按热度按时间

3duebb1j1#

这与您提供的gif非常接近。

<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>

您可能需要调整CommandBar的Height。

应用程序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>

赞(0）回复(0）举报 2022-12-07

我来回答

XAML：调整窗口大小时显示/隐藏UI元素

1条答案

相关问题

热门标签

最新问答