AppBar 显示一半的内容 [英] AppBar shows half of content

问题描述

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

I use AppBar for my application and AppBarButtons.

但是打开 AB 后 ABB 只显示了一半的标题文本和其余部分.我想完全隐藏文本，只在打开 AB 的情况下显示.

But ABB shows only half of title text and rest after opening AB. I want to hide the text completely and show it only in case of opening AB.

问题图片

<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

推荐答案

使用 CommandBar 而不是 AppBar，因为它旨在为 AppBarButton<提供布局/code> 和相关的命令元素.

Use a CommandBar instead of the AppBar, due it is designed to provide a layout for AppBarButton and related command elements.

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

这篇关于AppBar 显示一半的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！