Home > Enterprise >  Change PivotHeaderItem Style in UWP?
Change PivotHeaderItem Style in UWP?

Time:10-16

I want to change the PivotHeaderItem Style of Pivot. So, I googled and found some code from some blog. But I didn't understand, how the modified PivotHeaderItem style is assigned to the Pivot. They just put the PivotHeaderItem style in Page.Resources.

<Page.Resources>
    <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="{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" Margin="10,0" Background="{TemplateBinding Background}">
                        <Grid.Resources>
                            <Style x:Key="BaseContentPresenterStyle" TargetType="ContentPresenter">
                                <Setter Property="FontFamily" Value="XamlAutoFontFamily" />
                                <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" BasedOn="{StaticResource BaseContentPresenterStyle}" TargetType="ContentPresenter">
                                <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" GeneratedDuration="0:0:0.33" To="UnselectedLocked" />
                                    <VisualTransition From="UnselectedLocked" GeneratedDuration="0:0:0.33" To="Unselected" />
                                </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 Duration="0"
                                                         Storyboard.TargetName="ContentPresenterTranslateTransform"
                                                         Storyboard.TargetProperty="X"
                                                         To="{ThemeResource PivotHeaderItemLockedTranslation}" />
                                        <DoubleAnimation Duration="0"
                                                         Storyboard.TargetName="ContentPresenter"
                                                         Storyboard.TargetProperty="(UIElement.Opacity)"
                                                         To="0" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Selected">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="White" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border" Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Red" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border" Storyboard.TargetProperty="BorderBrush">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Red" />
                                        </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>
                        <Border x:Name="Border"
                                BorderBrush="Gray"
                                BorderThickness="2"
                                CornerRadius="20">
                            <ContentPresenter x:Name="ContentPresenter"
                                              Margin="{TemplateBinding Padding}"
                                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                              Content="{TemplateBinding Content}"
                                              ContentTemplate="{TemplateBinding ContentTemplate}"
                                              FontFamily="{TemplateBinding FontFamily}"
                                              FontSize="{TemplateBinding FontSize}"
                                              FontWeight="{TemplateBinding FontWeight}">
                                <ContentPresenter.RenderTransform>
                                    <TranslateTransform x:Name="ContentPresenterTranslateTransform" />
                                </ContentPresenter.RenderTransform>
                            </ContentPresenter>
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Page.Resources>
<Grid>
    <Pivot x:Name="rootPivot" Title="PIVOT TITLE">
        <PivotItem Header="Pivot Item 1">
            <!--  Pivot content goes here  -->
            <TextBlock Text="Content of pivot item 1." />
        </PivotItem>
        <PivotItem Header="Pivot Item 2">
            <!--  Pivot content goes here  -->
            <TextBlock Text="Content of pivot item 2." />
        </PivotItem>
        <PivotItem Header="Pivot Item 3">
            <!--  Pivot content goes here  -->
            <TextBlock Text="Content of pivot item 3." />
        </PivotItem>
    </Pivot>
</Grid>

Any one explain, How the styles inside the <Page.Resources> is assigned to Pivot Element inside the grid automatically.

CodePudding user response:

There are two ways to apply a style that is placed in the resource to a control.

  1. Implicitly. You just need to specify only a TargetType for the Style.

  2. Explicitly. You need to specifying a TargetType and an x:Key attribute for the Style. After that, you also need to set the target control's Style property with a {StaticResource} markup extension. In the {StaticResource} markup extension, you could refer to the Style with the x:Key attribute you defined.

If a style contains the x:Key attribute, you can only apply it to a control by setting the Style property of the control to the keyed style. In contrast, when the xaml is compiled, a style without an x:Key attribute is automatically applied to every control of its target type unless that control has an explicit style setting.

Update:

To make the style only work for one Pivot control, you could put the style in the Pivot.Resources. Like the following code:

      <Pivot x:Name="rootPivot" Title="PIVOT TITLE" >
            <Pivot.Resources>
                <Style TargetType="PivotHeaderItem">
                    ......
                    ......
            </Pivot.Resources>

            <PivotItem Header="Pivot Item 1" >

                <!--  Pivot content goes here  -->
                <TextBlock Text="Content of pivot item 1." />
            </PivotItem>
            <PivotItem Header="Pivot Item 2">
                <!--  Pivot content goes here  -->
                <TextBlock Text="Content of pivot item 2." />
            </PivotItem>
            <PivotItem Header="Pivot Item 3">
                <!--  Pivot content goes here  -->
                <TextBlock Text="Content of pivot item 3." />
            </PivotItem>
        </Pivot>
  • Related