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

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

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

Я искал соответствующие кисти в generic.xaml(и в панели "Свойства" под Brushes → System Brush Resources), которые представляют собой 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-стиле.

Спасибо заранее!:)

ОТВЕТЫ

Ответ 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>

Обновление

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

Я использовал новый инструмент Live Visual Tree в 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>

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

Ответ 2

Вы также можете установить для каждого заголовка сводного элемента свой уникальный цвет

<Pivot>
    <PivotItem>
        <PivotItem.Header>
            <PivotItemHeader Content="Header 1" Foreground="Magenta"/>
        </PivotItem.Header>
        <Grid>
            <!-- pivot item content here -->
        </Grid>
    </PivotItem>
    <PivotItem>
        <PivotItem.Header>
            <PivotItemHeader Content="Header 2" Foreground="Cyan"/>
        </PivotItem.Header>
        <Grid>
            <!-- pivot item content here -->
        </Grid>
    </PivotItem>
</Pivot>