首页 > 解决方案 > 如何更好地处理 CommandBar 中的长项目名称

问题描述

有没有比默认更好的方法来处理CommandBar具有长文本的项目。字符长度因语言而异,因此有时可能无法看到项目文本是什么,因为CommandBar扩展时会发生变化。

XAML(法语)

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <CommandBar Grid.Row="0">
        <CommandBar.Content>
            <Button 
                Style="{StaticResource NavigationBackButtonNormalStyle}" 
                Name="BackButton" 
                VerticalAlignment="Top" 
                Click="Back_Click"/>
        </CommandBar.Content>

        <AppBarButton Icon="Mail" Label="Information sur le produit"/>
        <AppBarButton Icon="Mail" Label="Avis sur les produits"/>
        <AppBarButton Icon="Mail" Label="Informations de contact"/>
    </CommandBar>
    <Frame Name="MyFrame" Grid.Row="1"/>
</Grid>

XAML(英文)

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <CommandBar Grid.Row="0">
        <CommandBar.Content>
            <Button 
                Style="{StaticResource NavigationBackButtonNormalStyle}" 
                Name="BackButton" 
                VerticalAlignment="Top" 
                Click="Back_Click"/>
        </CommandBar.Content>

        <AppBarButton Icon="Mail" Label="Product information"/>
        <AppBarButton Icon="Mail" Label="Product reviews"/>
        <AppBarButton Icon="Mail" Label="Contact information"/>
    </CommandBar>
    <Frame Name="MyFrame" Grid.Row="1"/>
</Grid>

英语(折叠)

在此处输入图像描述

英语(扩展)

在此处输入图像描述

法语(折叠)

在此处输入图像描述

法语(扩展)

在此处输入图像描述

标签: windowsxamluwpuwp-xaml

解决方案


有没有比默认更好的方法来处理具有长文本的 CommandBar 项目。

为 制作太长的内容并不是更好的做法CommandBar,如果您确实想制作较长的内容,可以将 设置DefaultLabelPosition为正确。

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <CommandBar Grid.Row="0" DefaultLabelPosition="Right">
        <CommandBar.Content>
            <Button 
            Style="{StaticResource NavigationBackButtonNormalStyle}" 
            Name="BackButton" 
            VerticalAlignment="Top" 
            Click="Back_Click"/>
        </CommandBar.Content>

        <AppBarButton Icon="Mail" Label="Information sur le produit" />
        <AppBarButton Icon="Mail" Label="Avis sur les produits"/>
        <AppBarButton Icon="Mail" Label="Informations de contact"/>
    </CommandBar>
    <Frame Name="MyFrame" Grid.Row="1"/>
</Grid>

推荐阅读