Überschreiben Pivot Header Vordergrund Pinsel in UWP App (Win 10 RTM SDK)

Question

Ich versuche, die Pivot-Header Vordergrund Thema Pinsel zu überschreiben, aber egal was ich tun, die UWP-App ignoriert es einfach.

Nur um klar zu sein, ist diese Frage über die UWP Pivot-Steuerelement, nicht die Win (Phone) 8.1 ein. Ich habe das Thema Override-Methode in einer 8.1-App verwendet und es funktionierte perfekt. Aber ich kann anscheinend nicht dasselbe für ein UWP Pivot machen.

ich für die jeweiligen Bürsten in generic.xaml sah (und im Bereich Eigenschaften unter Brushes -> System-Bürste Ressourcen), die PivotHeaderForegroundSelectedBrush und PivotHeaderForegroundUnselectedBrush in einer UWP App ist, und fügte sie in app.xaml meine Ressource Wörterbuch , aber im Gegensatz zu den anderen Systempinseln werden die Pivot-Elemente aus irgendeinem Grund nicht überschrieben.

<SolidColorBrush x:Key="SystemControlForegroundAccentBrush" Color="Gray"/> 
<SolidColorBrush x:Key="SystemControlBackgroundAccentBrush" Color="Gray"/> 
<SolidColorBrush x:Key="SystemColorControlAccentBrush" Color="Gray"/> 
<SolidColorBrush x:Key="PivotHeaderForegroundSelectedBrush" Color="Green" /> 
<SolidColorBrush x:Key="PivotHeaderForegroundUnselectedBrush" Color="Red"/> 

Ich kenne andere Möglichkeiten, um die Header-Vordergrundfarbe zu ändern, aber das könnte hinter Konverter oder zusätzlichen Code beinhaltet, die ich lieber nicht ehrlich zu sein verwenden, wenn ich es in einer sauberen Art und Weise tun. Ich habe versucht, den Standard-Pivot-Stil zu bearbeiten, aber ich sehe nirgendwo, wo ich eine Foreground-Eigenschaft für die Header-Elemente im Standard-Pivot-Stil hinzufügen/bearbeiten kann.

Vielen Dank im Voraus! :)

Answer 1

Interessanterweise ist die Foreground Eigenschaft des PivotItemStyle steuert die Vordergrundfarbe des Inhalt im PivotItem, nicht die Kopf davon. Und es gibt keine Möglichkeit, die Farbe des Header innerhalb des Stils zu ändern.

Sie könnten in der Lage, die entsprechenden Farbressourcen zu finden und zu modifizieren, um sie zu erreichen, was Sie wollen, aber hier ist ein flexibler und reine XAML Weg -

Die Pivot Kontrolle hat tatsächlich eine HeaderTemplate, die Sie vollständig ermöglicht anpassen Ihre PivotItemHeader. Siehe das folgende Codebeispiel, alle Header sollten die Teal Farbe haben.

<Grid> 
    <Pivot Title="Pivot"> 
     <Pivot.HeaderTemplate> 
      <DataTemplate> 
       <Grid> 
        <TextBlock Text="{Binding}" Foreground="Teal" /> 
       </Grid> 
      </DataTemplate> 
     </Pivot.HeaderTemplate> 

     <PivotItem Header="My first header"> 
      <Grid/> 
     </PivotItem> 
    </Pivot> 
</Grid> 

---

aktualisieren

So, hier ist ein besserer Weg.

habe ich das neue Live-Baumstruktur Werkzeug in Visual Studio das tatsächliche Kopfelement lokalisieren zu helfen. Es ist ein Steuerelement namens PivotHeaderItem. Es stellt sich heraus, dass das gesamte Styling in diesem Steuerelement definiert ist.

Ich musste dann zu msdn gehen und griff den vollen Stil dieses Steuerelements (Blend hat nicht funktioniert).

Wie Sie im Stil sehen können, hat die Steuerung eine Standard Foreground von {ThemeResource SystemControlForegroundBaseMediumBrush} und innerhalb der visuellen Staaten, dies Foreground-{ThemeResource SystemControlHighlightAltBaseHighBrush} geändert wird, wenn der Zustand-Selected geht. Ich habe sie in Red und Green geändert, um sie offensichtlicher zu machen.

<Style TargetType="PivotHeaderItem"> 
    <Setter Property="FontSize" Value="{ThemeResource PivotHeaderItemFontSize}" /> 
    <Setter Property="FontFamily" Value="{ThemeResource PivotHeaderItemFontFamily}" /> 
    <Setter Property="FontWeight" Value="{ThemeResource PivotHeaderItemThemeFontWeight}" /> 
    <Setter Property="CharacterSpacing" Value="{ThemeResource PivotHeaderItemCharacterSpacing}" /> 
    <Setter Property="Background" Value="Transparent" /> 
    <Setter Property="Foreground" Value="Red" /> <!-- original value {ThemeResource SystemControlForegroundBaseMediumBrush} --> 
    <Setter Property="Padding" Value="{ThemeResource PivotHeaderItemMargin}" /> 
    <Setter Property="Height" Value="48" /> 
    <Setter Property="VerticalContentAlignment" Value="Center" /> 
    <Setter Property="IsTabStop" Value="False" /> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="PivotHeaderItem"> 
       <Grid x:Name="Grid" Background="{TemplateBinding Background}"> 
        <Grid.Resources> 
         <Style x:Key="BaseContentPresenterStyle" TargetType="ContentPresenter"> 
          <Setter Property="FontFamily" Value="Segoe UI" /> 
          <Setter Property="FontWeight" Value="SemiBold" /> 
          <Setter Property="FontSize" Value="15" /> 
          <Setter Property="TextWrapping" Value="Wrap" /> 
          <Setter Property="LineStackingStrategy" Value="MaxHeight" /> 
          <Setter Property="TextLineBounds" Value="Full" /> 
          <Setter Property="OpticalMarginAlignment" Value="TrimSideBearings" /> 
         </Style> 
         <Style x:Key="BodyContentPresenterStyle" TargetType="ContentPresenter" BasedOn="{StaticResource BaseContentPresenterStyle}"> 
          <Setter Property="FontFamily" Value="{ThemeResource PivotHeaderItemFontFamily}" /> 
          <Setter Property="FontWeight" Value="{ThemeResource PivotHeaderItemThemeFontWeight}" /> 
          <Setter Property="FontSize" Value="{ThemeResource PivotHeaderItemFontSize}" /> 
         </Style> 
        </Grid.Resources> 
        <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="Green" /> <!-- 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}" /> 
            </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}" /> 
            </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> 

Mit diesem sollten Sie jetzt in der Lage sein, Ihre Pivot-Header vollständig anzupassen! :)