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

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

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

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

最佳答案

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

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

但是标签位置 由 CommandBar.DefaultLabelPosition 指定属性(property)。默认情况下，应用栏按钮的标签显示在图标下方。我们可以设置此属性以在图标右侧显示标签，或隐藏标签。虽然 AppBarButton有一个 AppBarButton.LabelPosition property ，但它的值只能是 Default and Collapsed 而 Default也意味着应用栏按钮标签的位置和可见性由 CommandBar.DefaultLabelPosition 的值决定属性(property)。

在您的代码中，您输入了 AppBarButton s 成 StackPanel不是 CommandBar .在这种情况下，因为没有 DefaultLabelPosition , AppBarButton s 似乎随机显示标签。所以有时您可以看到标签，有时看不到，有时标签显示在图标的右侧。 (如果您删除 Width="100" 中的 AppBarButton ，您应该不仅可以看到标签，还可以看到图标。)

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

我们可以通过 找到默认的样式和模板。《文档大纲》在 Visual Studio 中打开 “查看”→“其他窗口”→“文档大纲” .

然后在 《文档大纲》选择一个 AppBarButton 并右键单击，然后选择 “编辑模板”→“编辑副本...” .这将弹出一个 “创建样式资源”对话。因为我们需要将新样式应用于所有 AppBarButton s，我们可以选择 “适用于所有人” .默认情况下，它会在 Page.Resources 下生成默认样式.

默认样式下，我们只需要注释掉 LabelOnRightStyle 在“根”下 Grid以及 LabelOnRight 和 标签收起 VisualState在模板中，如下所示:

<Style TargetType="AppBarButton">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="AppBarButton">
                <Grid x:Name="Root"
                      MinWidth="{TemplateBinding MinWidth}"
                      MaxWidth="{TemplateBinding MaxWidth}"
                      Background="{TemplateBinding Background}"
                      BorderBrush="{TemplateBinding BorderBrush}"
                      BorderThickness="{TemplateBinding BorderThickness}">
                    <!--<Grid.Resources>
                        <Style x:Name="LabelOnRightStyle" TargetType="AppBarButton">
                            <Setter Property="Width" Value="NaN" />
                        </Style>
                    </Grid.Resources>-->
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="ApplicationViewStates">
                            <VisualState x:Name="FullSize" />
                            <VisualState x:Name="Compact">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel" Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <!--<VisualState x:Name="LabelOnRight">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="Margin">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="12,14,0,14" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentRoot" Storyboard.TargetProperty="MinHeight">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarThemeCompactHeight}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel" Storyboard.TargetProperty="(Grid.Row)">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="0" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel" Storyboard.TargetProperty="(Grid.Column)">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="1" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel" Storyboard.TargetProperty="TextAlignment">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Left" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel" Storyboard.TargetProperty="Margin">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="8,15,12,17" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>-->
                            <!--<VisualState x:Name="LabelCollapsed">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentRoot" Storyboard.TargetProperty="MinHeight">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarThemeCompactHeight}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel" Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>-->
                            <VisualState x:Name="Overflow">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentRoot" Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverflowTextLabel" Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="OverflowWithToggleButtons">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentRoot" Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverflowTextLabel" Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverflowTextLabel" Storyboard.TargetProperty="Margin">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="38,0,12,0" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal">
                                <Storyboard>
                                    <PointerUpThemeAnimation Storyboard.TargetName="OverflowTextLabel" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="PointerOver">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root" Storyboard.TargetProperty="Background">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarButtonBackgroundPointerOver}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root" Storyboard.TargetProperty="BorderBrush">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarButtonBorderBrushPointerOver}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarButtonForegroundPointerOver}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel" Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarButtonForegroundPointerOver}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverflowTextLabel" Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarButtonForegroundPointerOver}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <PointerUpThemeAnimation Storyboard.TargetName="OverflowTextLabel" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root" Storyboard.TargetProperty="Background">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarButtonBackgroundPressed}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root" Storyboard.TargetProperty="BorderBrush">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarButtonBorderBrushPressed}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarButtonForegroundPressed}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel" Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarButtonForegroundPressed}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverflowTextLabel" Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarButtonForegroundPressed}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <PointerDownThemeAnimation Storyboard.TargetName="OverflowTextLabel" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root" Storyboard.TargetProperty="Background">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarButtonBackgroundDisabled}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root" Storyboard.TargetProperty="BorderBrush">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarButtonBorderBrushDisabled}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarButtonForegroundDisabled}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel" Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarButtonForegroundDisabled}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverflowTextLabel" Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarButtonForegroundDisabled}" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="InputModeStates">
                            <VisualState x:Name="InputModeDefault" />
                            <VisualState x:Name="TouchInputMode">
                                <VisualState.Setters>
                                    <Setter Target="OverflowTextLabel.Padding" Value="0,11,0,13" />
                                </VisualState.Setters>
                            </VisualState>
                            <VisualState x:Name="GameControllerInputMode">
                                <VisualState.Setters>
                                    <Setter Target="OverflowTextLabel.Padding" Value="0,11,0,13" />
                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Grid x:Name="ContentRoot" MinHeight="{ThemeResource AppBarThemeMinHeight}">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <ContentPresenter x:Name="Content"
                                          Height="20"
                                          Margin="0,14,0,4"
                                          HorizontalAlignment="Stretch"
                                          AutomationProperties.AccessibilityView="Raw"
                                          Content="{TemplateBinding Icon}"
                                          Foreground="{TemplateBinding Foreground}" />
                        <TextBlock x:Name="TextLabel"
                                   Grid.Row="1"
                                   Margin="2,0,2,6"
                                   FontFamily="{TemplateBinding FontFamily}"
                                   FontSize="12"
                                   Foreground="{TemplateBinding Foreground}"
                                   Text="{TemplateBinding Label}"
                                   TextAlignment="Center"
                                   TextWrapping="Wrap" />
                    </Grid>
                    <TextBlock x:Name="OverflowTextLabel"
                               Margin="12,0,12,0"
                               Padding="0,5,0,7"
                               HorizontalAlignment="Stretch"
                               VerticalAlignment="Center"
                               FontFamily="{TemplateBinding FontFamily}"
                               FontSize="15"
                               Foreground="{TemplateBinding Foreground}"
                               Text="{TemplateBinding Label}"
                               TextAlignment="Left"
                               TextTrimming="Clip"
                               TextWrapping="NoWrap"
                               Visibility="Collapsed" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

关于xaml - AppBar中的图标和文字随机消失，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40737759/

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

上一篇：clojurescript - lein figwheel vs lein cljsbuild auto

下一篇：clojure - 解析宏中的符号