AppBar 中的图标和文字随机消失

Question

我的 Windows 10 UWP 应用程序中的图标和文本随机消失时遇到问题。

图片正在启动。
图片是点击应用栏按钮后导航到另一个页面，然后再次打开应用栏。

这是控件的 XAML：

<Grid DataContext="{Binding AppBarViewModel, Source={StaticResource ViewModelLocator}}">
    <StackPanel x:Name="LeftPanel" Orientation="Horizontal" Grid.Column="0" HorizontalAlignment="Left">
        <AppBarButton Width="100" x:Name="WelcomeButton" Label="{Binding ConverterParameter=Page_WelcomeTitleLabel, Converter={StaticResource trans}}"  Command="{Binding WelcomeCommand}" Visibility="{Binding IsWelcomeButtomVisible, ConverterParameter=false, Converter={StaticResource BooleanToVisibilityConverter}}" >
            <AppBarButton.Icon>
                <BitmapIcon UriSource="ms-appx:///Assets/Icons/Home.png" />
            </AppBarButton.Icon>
        </AppBarButton>
        <AppBarButton Width="100" x:Name="ReportButton" Label="{Binding ConverterParameter=Page_ReportTitleLabel, Converter={StaticResource trans}}"   Command="{Binding ReportCommand}" Visibility="{Binding IsReportButtonVisible, ConverterParameter=False, Converter={StaticResource BooleanToVisibilityConverter}}">
            <AppBarButton.Icon>
                <BitmapIcon UriSource="ms-appx:///Assets/Icons/Report.png" />
            </AppBarButton.Icon>
        </AppBarButton>
        <AppBarButton Width="100" x:Name="IndividualPerformanceButton" Label="{Binding ConverterParameter=Page_IndividualPerformanceTitleLabel, Converter={StaticResource trans}}" Command="{Binding IndividualPerformanceCommand}" Visibility="{Binding IsIndividualButtonVisible, ConverterParameter=False, Converter={StaticResource BooleanToVisibilityConverter}}" >
            <AppBarButton.Icon>
                <BitmapIcon UriSource="ms-appx:///Assets/Icons/Individual overview.png" />
            </AppBarButton.Icon>
        </AppBarButton>
        <AppBarButton Width="100" x:Name="TeamOverviewButton" Label="{Binding ConverterParameter=Page_TeamOverviewTitleLabel, Converter={StaticResource trans}}" Command="{Binding TeamOverviewCommand}" Visibility="{Binding IsTeamOverviewButtonVisible, ConverterParameter=False, Converter={StaticResource BooleanToVisibilityConverter}}">
            <AppBarButton.Icon>
                <BitmapIcon UriSource="ms-appx:///Assets/Icons/Team overview.png" />
            </AppBarButton.Icon>
        </AppBarButton>
        <AppBarButton Width="100" x:Name="TimeOverviewButton" Label="{Binding ConverterParameter=Page_TimeOverviewTitleLabel, Converter={StaticResource trans}}" Command="{Binding TimeOverviewCommand}" Visibility="{Binding IsTimeOverviewButtonVisible, ConverterParameter=False, Converter={StaticResource BooleanToVisibilityConverter}}">
            <AppBarButton.Icon>
                <BitmapIcon UriSource="ms-appx:///Assets/Icons/Time overview.png" />
            </AppBarButton.Icon>
        </AppBarButton>
        <AppBarButton Width="100" x:Name="CoachingTipsButton" Label="{Binding ConverterParameter=Page_CoachingTipsTitleLabel, Converter={StaticResource trans}}" Command="{Binding CoachingTipsCommand}" Visibility="{Binding IsCoachingTipsButtonVisble, ConverterParameter=False, Converter={StaticResource BooleanToVisibilityConverter}}">
            <AppBarButton.Icon>
                <BitmapIcon Visibility="Visible"  UriSource="ms-appx:///Assets/Icons/Coaching tips.png" />
            </AppBarButton.Icon>
        </AppBarButton>
        <AppBarButton  x:Name="SettingsButton"  Label="{Binding ConverterParameter=Page_SettingsTitleLabel, Converter={StaticResource trans}}" Command="{Binding SettingsCommand}" Icon="Setting"/>
    </StackPanel>
</Grid>

如何调试文本和图标随机消失的原因？

有没有人以前经历过这样的事情？

Answer 1

感谢您的反馈。我可以在 Windows 10，版本 1607 中看到类似的行为。

一般来说，AppBarButton有两种尺寸；正常和紧凑。默认情况下，它显示有文本标签和完整填充。但是从Windows 10, version 1607 (Windows SDK version 10.0.14393.0)开始，引入了LabelPosition概念，通过这个我们可以指定placement和visibility按钮的标签。

但是 LabelPosition 由 CommandBar.DefaultLabelPosition property. By default, an app bar button's label is displayed below the icon. We can set this property to show labels to the right of the icon, or to hide labels. Although AppBarButton has a AppBarButton.LabelPosition property, but its value can only be Default and Collapsed 指定，而 Default 也意味着应用栏按钮标签的位置和可见性由值决定CommandBar.DefaultLabelPosition 属性.

在您的代码中，您将 AppBarButton 放入 StackPanel 而不是 CommandBar。在这种情况下，由于没有 DefaultLabelPosition，AppBarButtons 似乎随机显示标签。所以有时你可以看到标签，有时看不到，有时标签显示在图标的右侧。（如果您在 AppBarButton 中删除 Width="100"，您应该能够看到图标而不仅仅是标签。）

我们已经在内部报告了这个问题，一旦有任何进展，我会更新我的回答。作为解决方法，您可以使用 CommandBar 而不是 StackPanel。如果您仍然想使用 StackPanel，您可以编辑 AppBarButton.

的默认模板

打开"View"可以在Visual Studio中找到"Document Outline"的默认样式和模板→"Other Windows" → "Document Outline".

然后在"Document Outline"select一个AppBarButton然后右键，然后select"Edit Template"→"Edit a Copy..."。这将弹出一个 "Create Style Resource" 对话框。由于我们需要将新样式应用于所有 AppBarButton，因此我们可以 select "Apply to all"。默认情况下，它会在 Page.Resources.

下生成默认样式

在默认样式中，我们只需要注释掉"Root"Grid下的LabelOnRightStyle以及LabelOnRight[=61] =] 和 LabelCollapsed VisualState 如下所示：

AppBar 中的图标和文字随机消失

Icons and text in AppBar disappear at random

xaml

appbar

uwp

uwp-xaml