AppBar 显示一半内容

Posted 2023-04-12

【中文标题】AppBar 显示一半内容

【英文标题】：AppBar shows half of content

【发布时间】：2016-05-16 15:43:59

【问题描述】：

我将 AppBar 用于我的应用程序和 AppBarButtons。

但是 ABB 只显示一半的标题文本，打开 AB 后就剩下了。 我想完全隐藏文本并仅在打开 AB 的情况下显示它。

Problem image

<Page.Resources>
    <Style TargetType="AppBarButton" x:Name="appBar">
        <Setter Property="VerticalAlignment" Value="Top"/>
        <Setter Property="HorizontalAlignment" Value="Right"/>
    </Style>
</Page.Resources>

<Page.BottomAppBar>
    <AppBar IsSticky="True" ClosedDisplayMode="Compact" Background="LightGray" >

        <StackPanel Orientation="Horizontal" VerticalAlignment="Top" FlowDirection="RightToLeft" >
            <AppBarButton x:Name="mapaStackPanel" Label="Mapa" Icon="Map" Click="MapaStackPanelClick" Style="StaticResource appBar" Visibility="Collapsed" />
            <AppBarButton x:Name="mojePolohaStackPanel"  Label="Moje poloha" Icon="Map" Click="MojePolohaClick" Style="StaticResource appBar"/>
            <AppBarButton x:Name="najdiNejblizsiStackPanel"  Label="Najdi Nejbližší" Icon="Map" Click="NajdiNejblizsiClick" Style="StaticResource appBar"/>
            <AppBarButton x:Name="navigujStackPanel" Label="Naviguj" Icon="Directions" Click="navigujStackPanel_Click" Visibility="Collapsed" Style="StaticResource appBar"/>
        </StackPanel>
    </AppBar>
</Page.BottomAppBar>

谢谢， VT

【参考方案1】：

使用CommandBar 而不是AppBar，因为它旨在为AppBarButton 和相关命令元素提供布局。

<Page.BottomAppBar>
    <CommandBar IsSticky="True" ClosedDisplayMode="Compact" Background="LightGray" >
        <AppBarButton x:Name="mapaStackPanel" Label="Mapa" Icon="Map" Click="MapaStackPanelClick" Style="StaticResource appBar" Visibility="Collapsed" />
        <AppBarButton x:Name="mojePolohaStackPanel"  Label="Moje poloha" Icon="Map" Click="MojePolohaClick" Style="StaticResource appBar"/>
        <AppBarButton x:Name="najdiNejblizsiStackPanel"  Label="Najdi Nejbližší" Icon="Map" Click="NajdiNejblizsiClick" Style="StaticResource appBar"/>
        <AppBarButton x:Name="navigujStackPanel" Label="Naviguj" Icon="Directions" Click="navigujStackPanel_Click" Visibility="Collapsed" Style="StaticResource appBar"/>
    </CommandBar>
</Page.BottomAppBar>

【讨论】：

正是我的意思！ :)