透视表头样式答案

【问题标题】：Pivot Header style透视表头样式
【发布时间】：2016-07-19 22:38:35
【问题描述】：

C# UWP Windows 10 项目

我需要将 Pivot 标题样式设置为类似

我曾尝试使用stackoverflow 中的这个示例，但没有成功。

您能说一下我如何在标题文本后面设置矩形（如图片上的）并更改所选未选中项目的背景颜色吗？

【问题讨论】：

标签： c# xaml visual-studio-2015 uwp win-universal-app

【解决方案1】：

正如您提到的答案，我们可以使用PivotHeaderItem styles and templates 来实现这一点。

首先，我们可以将MSDN中的样式复制到Page.Resources中。

然后在Grid 中添加Border 并设置其属性如下：

<Grid x:Name="Grid" Background="{TemplateBinding Background}">
    ...
    <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>

这将添加一个像您的图像一样带有角的边框。

在此之后，我们可以编辑“已选择”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>

以下是我使用的完整 XAML 示例：

<Page x:Class="PivotUWP.MainPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:local="using:PivotUWP"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      mc:Ignorable="d">
    <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 Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <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>
</Page>

它看起来像：

【讨论】：

我可以为每个数据透视项目只使用一个项目（例如 ListView），只显示差异值吗？
Pivot 是一个ItemsControl，因此它可以包含任何类型的项目的集合。您添加到 Pivot 中的任何不是显式 PivotItem 的项目都隐式包装在 PivotItem 中。有关详细信息，请参阅Pivot class 中的备注。