AppBar의 아이콘과 텍스트가 임의로 사라짐

Question

내 Windows 10 UWP 앱에서 아이콘과 텍스트가 무작위로 사라지는 문제가 있습니다. 시작에

1. 사진입니다.

2. 사진은 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은 임의로 레이블을 표시합니다. 때로는 레이블을 볼 수 있고 때로는 레이블을 볼 수없는 경우가 있으며 때로는 레이블이 아이콘 오른쪽에 표시됩니다. 을 AppBarButton에서 삭제하면 라벨뿐만 아니라 아이콘도 볼 수있게됩니다.

이 문제는 내부적으로보고되었으며 진행 상황이 확인되면 답변을 업데이트 해 드리겠습니다. 이 문제를 해결하려면 StackPanel 대신 CommandBar을 사용할 수 있습니다. StackPanel을 계속 사용하려면 기본 템플릿 AppBarButton을 편집 할 수 있습니다.

우리는 "보기"→ "다른 윈도우"→ "문서 개요"를 열어 Visual Studio에서"문서 개요"와 기본 스타일과 템플릿을 찾을 수 있습니다.

그런 다음 "문서 개요"에 → "사본을 편집 ..."을 다음 "템플릿 편집"을 선택 한 AppBarButton 마우스 오른쪽 클릭을 선택합니다."스타일 리소스 만들기" 대화 상자가 나타납니다. AppBarButton에 새 스타일을 적용해야하므로 "모두 적용"을 선택할 수 있습니다. 기본적으로 Page.Resources 아래에 기본 스타일이 생성됩니다. 기본 스타일에서

는, 우리는 "루트"Grid뿐만 아니라 로 LabelOnRight에서 LabelOnRightStyle을 주석 필요 는 다음과 같이 템플릿에VisualState을 LabelCollapsed : 나는 '당신을 생각

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