ändern Pivot PivotHeaderItem Fontsize mit Visual Windows-10

Question

Ich habe ein Pivot mit folgendem Stil

<Page.Resources> 

    <Style TargetType="PivotHeaderItem" x:Name="PivotHeaderItem800"> 
     <Setter Property="Foreground" Value="Gray"/> 
     <Setter Property="FontFamily" Value="ms-appx:///Assets/Fonts/garfield the cat.ttf#garfield the cat"/> 
     <Setter Property="FontSize" Value="40" /> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="PivotHeaderItem"> 
        <Grid x:Name="Grid" Background="{TemplateBinding Background}"> 
         <VisualStateManager.VisualStateGroups> 
          <VisualStateGroup x:Name="SelectionStates"> 
           <VisualStateGroup.Transitions> 
            <VisualTransition From="Unselected" To="UnselectedLocked" GeneratedDuration="0:0:0.33" /> 
            <VisualTransition From="UnselectedLocked" To="Unselected" GeneratedDuration="0:0:0.33" /> 
           </VisualStateGroup.Transitions> 
           <VisualState x:Name="Disabled"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}" /> 
             </ObjectAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="Unselected" /> 

           <VisualState x:Name="UnselectedLocked"> 
            <Storyboard> 
             <DoubleAnimation Storyboard.TargetName="ContentPresenterTranslateTransform" Storyboard.TargetProperty="X" Duration="0" To="{ThemeResource PivotHeaderItemLockedTranslation}" /> 
             <DoubleAnimation Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="(UIElement.Opacity)" Duration="0" To="0" /> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="Selected"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="White" /> 
              <!-- original value {ThemeResource SystemControlHighlightAltBaseHighBrush} --> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid" Storyboard.TargetProperty="Background"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" /> 
             </ObjectAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="UnselectedPointerOver"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground"> 
              <!--<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseMediumHighBrush}" />--> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="Green" /> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid" Storyboard.TargetProperty="Background"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" /> 
             </ObjectAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="SelectedPointerOver"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground"> 
              <!--<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseMediumHighBrush}" />--> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="White" /> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid" Storyboard.TargetProperty="Background"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" /> 
             </ObjectAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="UnselectedPressed"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseMediumHighBrush}" /> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid" Storyboard.TargetProperty="Background"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" /> 
             </ObjectAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="SelectedPressed"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseMediumHighBrush}" /> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid" Storyboard.TargetProperty="Background"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" /> 
             </ObjectAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
          </VisualStateGroup> 
         </VisualStateManager.VisualStateGroups> 
         <ContentPresenter x:Name="ContentPresenter" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" Margin="{TemplateBinding Padding}" FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}" FontWeight="{TemplateBinding FontWeight}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"> 
          <ContentPresenter.RenderTransform> 
           <TranslateTransform x:Name="ContentPresenterTranslateTransform" /> 
          </ContentPresenter.RenderTransform> 
         </ContentPresenter> 
        </Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 
</Page.Resources> 

Mit VisualStateManager ich die FontSize-24 reduzieren will, wenn die AdaptiveTrigger MinWindowWidth="500" wahr ist. Wie erstelle ich den neuen Stil in Page.Resource richtig? Ich möchte so etwas wie

<Style TargetType="PivotHeaderItem" x:Name="PivotHeaderItem500" BasedOn="{StaticResource PivotHeaderItem800}"> 
     <Setter Property="FontSize" Value="24" /> 
    </Style> 

Visual Studio The key is already defined in this scope.

In meinem VisualStateManager klagt derzeit habe ich folgendes. Sobald der neue Stil erstellt wurde, möchte ich ihn unter VisualStateMin500 anwenden.

<VisualStateManager.VisualStateGroups> 
     <VisualStateGroup x:Name="VisualStateGroup"> 
      <VisualState x:Name="VisualStateMin800"> 
       <VisualState.StateTriggers> 
        <AdaptiveTrigger MinWindowWidth="800"/> 
       </VisualState.StateTriggers> 
      </VisualState> 
      <VisualState x:Name="VisualState500"> 
       <VisualState.Setters> 
        <Setter Target="textBlockTitle.(FrameworkElement.Margin)"> 
         <Setter.Value> 
          <Thickness>20,36,20,24</Thickness> 
         </Setter.Value> 
        </Setter> 
        <Setter Target="textBlockTitle.(TextBlock.FontSize)" Value="48"/> 
        <Setter Target="rootPivot.(FrameworkElement.Width)" Value="500"/> 
        <Setter Target="listView0.(FrameworkElement.Margin)"> 
         <Setter.Value> 
          <Thickness>18</Thickness> 
         </Setter.Value> 
        </Setter> 

        <Setter Target="listView1.(FrameworkElement.Margin)"> 
         <Setter.Value> 
          <Thickness>18</Thickness> 
         </Setter.Value> 
        </Setter> 
        <Setter Target="listView2.(FrameworkElement.Margin)"> 
         <Setter.Value> 
          <Thickness>18</Thickness> 
         </Setter.Value> 
        </Setter> 
        <Setter Target="listView3.(FrameworkElement.Margin)"> 
         <Setter.Value> 
          <Thickness>18</Thickness> 
         </Setter.Value> 
        </Setter> 
        <Setter Target="listView4.(FrameworkElement.Margin)"> 
         <Setter.Value> 
          <Thickness>18</Thickness> 
         </Setter.Value> 
        </Setter> 
       </VisualState.Setters> 
       <VisualState.StateTriggers> 
        <AdaptiveTrigger MinWindowWidth="500"/> 
       </VisualState.StateTriggers> 
      </VisualState> 
     </VisualStateGroup> 
    </VisualStateManager.VisualStateGroups> 

Mein Pivot XAML ist wie folgt

<RelativePanel> 
     <control:ProgressRingWithText RelativePanel.AlignHorizontalCenterWithPanel="True" RelativePanel.AlignVerticalCenterWithPanel="True"/> 
     <TextBlock x:Name="textBlockTitle" Text="Leaderboards" Style="{StaticResource HeaderTextBlockStyle}" RelativePanel.AlignHorizontalCenterWithPanel="True" Margin="24,48,24,28" FontSize="64"/> 

     <Pivot x:Name="rootPivot" RelativePanel.Below="textBlockTitle" RelativePanel.AlignHorizontalCenterWithPanel="True" Width="800" Style="{StaticResource PivotStyle1}"> 
      <Interactivity:Interaction.Behaviors> 
       <Core:EventTriggerBehavior EventName="SelectionChanged"> 
        <Core:InvokeCommandAction Command="{Binding SelectionChangedCommand}" 
              InputConverter="{StaticResource SelectionChangedEventArgsConverter}" 
              InputConverterParameter="{Binding ElementName=rootPivot, Path=SelectedIndex}"/> 
       </Core:EventTriggerBehavior> 
      </Interactivity:Interaction.Behaviors> 
      <PivotItem x:Name="pivotItem0" Header="{Binding LevelVeryEasyName}" > 
       <ListView x:Name="listView0" ItemsSource="{Binding ScoreList}" IsItemClickEnabled="False" Margin="24"> 
        <ListView.ItemContainerStyle> 
         <Style TargetType="ListViewItem"> 
          <Setter Property="HorizontalContentAlignment" Value="Stretch" /> 
         </Style> 
        </ListView.ItemContainerStyle> 
        <ListView.ItemTemplate> 
         <DataTemplate> 
          <control:PivotListViewItemTemplate /> 
         </DataTemplate> 
        </ListView.ItemTemplate> 
       </ListView> 
      </PivotItem> 

      <PivotItem x:Name="pivotItem1" Header="{Binding LevelEasyName}"> 
       <ListView x:Name="listView1" ItemsSource="{Binding ScoreList}" IsItemClickEnabled="False" Margin="24"> 
        <ListView.ItemContainerStyle> 
         <Style TargetType="ListViewItem"> 
          <Setter Property="HorizontalContentAlignment" Value="Stretch" /> 
         </Style> 
        </ListView.ItemContainerStyle> 
        <ListView.ItemTemplate> 
         <DataTemplate> 
          <control:PivotListViewItemTemplate /> 
         </DataTemplate> 
        </ListView.ItemTemplate> 
       </ListView> 
      </PivotItem> 
      <PivotItem x:Name="pivotItem2" Header="{Binding LevelMediumName}"> 
       <ListView x:Name="listView2" ItemsSource="{Binding ScoreList}" IsItemClickEnabled="False" Margin="24"> 
        <ListView.ItemContainerStyle> 
         <Style TargetType="ListViewItem"> 
          <Setter Property="HorizontalContentAlignment" Value="Stretch" /> 
         </Style> 
        </ListView.ItemContainerStyle> 
        <ListView.ItemTemplate> 
         <DataTemplate> 
          <control:PivotListViewItemTemplate /> 
         </DataTemplate> 
        </ListView.ItemTemplate> 
       </ListView> 
      </PivotItem> 
      <PivotItem x:Name="pivotItem3" Header="{Binding LevelHardName}"> 
       <ListView x:Name="listView3" ItemsSource="{Binding ScoreList}" IsItemClickEnabled="False" Margin="24"> 
        <ListView.ItemContainerStyle> 
         <Style TargetType="ListViewItem"> 
          <Setter Property="HorizontalContentAlignment" Value="Stretch" /> 
         </Style> 
        </ListView.ItemContainerStyle> 
        <ListView.ItemTemplate> 
         <DataTemplate> 
          <control:PivotListViewItemTemplate /> 
         </DataTemplate> 
        </ListView.ItemTemplate> 
       </ListView> 
      </PivotItem> 
      <PivotItem x:Name="pivotItem4" Header="{Binding LevelInsaneName}"> 
       <ListView x:Name="listView4" ItemsSource="{Binding ScoreList}" IsItemClickEnabled="False" Margin="24"> 
        <ListView.ItemContainerStyle> 
         <Style TargetType="ListViewItem"> 
          <Setter Property="HorizontalContentAlignment" Value="Stretch" /> 
         </Style> 
        </ListView.ItemContainerStyle> 
        <ListView.ItemTemplate> 
         <DataTemplate> 
          <control:PivotListViewItemTemplate /> 
         </DataTemplate> 
        </ListView.ItemTemplate> 
       </ListView> 
      </PivotItem> 
     </Pivot> 
    </RelativePanel> 

Answer 1

Statt direkt in Kopfzeile der Bindung. Ändern Sie es nach unten.

<PivotItem.Header> 
    <TextBlock Text="{Binding LevelVeryEasyName}" x:Name="PivotItem0"/> 
</PivotItem.Header> 

Auf diese Weise erhalten Sie vollen Zugriff auf Pivot-Header.

Jetzt wird Ihre Setter sein

<Setter Target="PivotItem0.(TextBlock.FontSize)" Value="24"/> 

Prüfen Sie, ob es funktioniert. Lass mich das Ergebnis wissen.