Переопределение Pivot заголовков передних кистей в приложении UWP (Win 10 RTM SDK)

Question

Я пытаюсь переопределить кисти заголовка заголовка Pivot, но независимо от того, что я делаю, приложение UWP просто игнорирует его.

Для того, чтобы быть ясным, этот вопрос касается элемента управления PWOT UWP, а не Win (Phone) 8.1 one. Я использовал метод переопределения кисти темы в приложении 8.1, и он отлично работал. Но я, похоже, не могу сделать то же самое для UWP Pivot.

Я искал соответствующие кисти в Generic.xaml (и в панели свойств под кистью -> System Brush ресурсы), которые PivotHeaderForegroundSelectedBrush и PivotHeaderForegroundUnselectedBrush в UWP приложения, и добавили их к моему словарю ресурсов в app.xaml , но, в отличие от других кистей системы, Pivot-то по какой-то причине не переопределяются.

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

Я знаю, что другие способы, чтобы изменить цвет заголовка переднего плана, но может включать в себя преобразователь или дополнительный код позади, который я предпочел бы не использовать, чтобы быть честными, если я могу сделать это в чистом виде. Я попытался изменить стиль Pivot по умолчанию, но я не вижу нигде, где я могу добавить/изменить свойство Foreground для элементов заголовка в стандартном Pivot-стиле.

Заранее благодарен! :)

Answer 1

Интересно, что Foreground свойство PivotItemStyle контролирует основной цвет содержания внутри PivotItem, а не заголовка его. И нет способа изменить цвет заголовка в стиле.

Вы могли бы быть в состоянии найти соответствующие цветовые ресурсы и изменить их, чтобы достичь того, чего вы хотите, но здесь более гибкий и чистый способ XAML -

управления Pivot на самом деле имеет HeaderTemplate, которая позволяет полностью настроить ваш PivotItemзаголовки. См. Следующий пример кода, все заголовки должны иметь цвет Teal.

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

---

Update

Так вот лучший способ.

Я использовал новый Живой Визуальный инструмент Дерево в Visual Studio, чтобы помочь найти фактический элемент заголовка. Это управление под названием PivotHeaderItem. Итак, получается, что в этом элементе определяется весь стиль.

Затем я должен был пойти в msdn и схватил весь стиль этого элемента управления (Blend не сработал).

Как вы можете видеть в стиле управления имеет значение по умолчанию Foreground из {ThemeResource SystemControlForegroundBaseMediumBrush} и в пределах визуальных состояний, это Foreground получает изменено на {ThemeResource SystemControlHighlightAltBaseHighBrush}, когда состояние идет в Selected. Я изменил их на Red и Green, чтобы сделать их более очевидными.

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

С этим вы должны теперь иметь возможность полностью настраивать сводные заголовки! :)