Question

我的Windows 10 UWP应用中的图标和文字随机消失了。

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

这是控件的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版本1607（Windows SDK版本10.0.14393.0）开始，它引入了 LabelPosition 概念，我们可以通过它来指定按钮标签的位置和可见性。

但 LabelPosition 由CommandBar.DefaultLabelPosition属性指定。默认情况下，图标下方会显示应用栏按钮的标签。我们可以将此属性设置为在图标右侧显示标签，或隐藏标签。虽然AppBarButton有AppBarButton.LabelPosition property，但其值只能是Default and Collapsed，而Default也表示应用栏按钮标签的展示位置和展示位置由CommandBar.DefaultLabelPosition属性的值。

在您的代码中，您将AppBarButton放入StackPanel而不是CommandBar。在这种情况下，由于没有DefaultLabelPosition，AppBarButton似乎随机显示标签。因此，有时您可以看到标签，有时不会，有时标签会显示在图标的右侧。（如果您移除了Width="100"中的AppBarButton，则您不仅可以看到图标，还可以看到标签。）

我们已在内部报告此问题，一旦有任何进展，我会更新我的回答。要解决此问题，您可以使用CommandBar代替StackPanel。如果您确实仍想使用StackPanel，则可以修改AppBarButton的默认模板。

我们可以通过打开＆＃34; View＆＃34;在Visual Studio中找到＆＃34;文档大纲＆＃34; 的默认样式和模板→＆＃34;其他Windows＆＃34; →＆＃34;文档大纲＆＃34; 。

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

在默认样式中，我们只需要在＆＃34; Root＆＃34;下注释 LabelOnRightStyle 。模板中的Grid以及 LabelOnRight 和 LabelCollapsed 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>

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

1 个答案: