Icons and text in AppBar disappear at random

Question

I have problem with icons and text disappearing at random in my Windows 10 UWP app.

1. picture is on start up.

2. picture is after clicking the appbar button and thereby navigating to another page and then opening the app bar again.

This is the XAML for the control:

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

How can I debug why the text and icons are disappearing at random?

Has anyone experienced anything like this before?

Answer 1

Thanks for your feedback. I can see similar behavior with Windows 10, version 1607.

Generally speaking, AppBarButton has two sizes; normal and compact. By default, it's shown with a text label and full padding. However starting in Windows 10, version 1607 (Windows SDK version 10.0.14393.0), it introduces LabelPosition concept, with this we can specify the placement and visibility of the button's label.

But the LabelPosition is specified by the 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 while Default also means the placement and visibility of the app bar button's label is determined by the value of the CommandBar.DefaultLabelPosition property.

In your code, you are putting your AppBarButtons into a StackPanel not a CommandBar. In this scenario, as there is no DefaultLabelPosition, AppBarButtons seems to show labels randomly. So sometimes you can see the lable, sometimes not and sometimes the label is displayed at the right of the icon. (If you remove Width="100" in your AppBarButton, you shuold be able to see the icon not only the label.)

We've reported this issue internally and I will update my answer once there is any progress. As a workaround, you can use CommandBar instead of StackPanel. If you do want to still use the StackPanel, you can edit the default template of AppBarButton.

We can find the default style and template with "Document Outline" in Visual Studio by opening "View" → "Other Windows" → "Document Outline".

Then in "Document Outline" select one AppBarButton and right click, then select "Edit Template" → "Edit a Copy...". This will popup a "Create Style Resource" dialog. As we need to apply the new style to all the AppBarButtons, we can select "Apply to all". And by default it will generate the default style under Page.Resources.

In the default style, we only need to comment out LabelOnRightStyle under "Root" Grid as well as LabelOnRight and LabelCollapsed VisualState in the template like following:

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