如何设置 PivotItem 标题的样式答案

【问题标题】：How to Style PivotItem Header如何设置 PivotItem 标题的样式
【发布时间】：2014-11-01 20:18:35
【问题描述】：

我有一个正在使用的现有 Pivot 标题模板，但它没有给我所需的效果。我需要当前选择的 PivotItem 具有蓝色前景和白色背景，而所有其他数据透视项都具有标准的禁用前景和背景外观。目前在下面，我相信除了所选 PivotItem 上的蓝色前景之外的所有内容，但我无法弄清楚如何仅将前景正确应用于所选项目？

<Style x:Key="PivotHeaderItemStyle1" TargetType="Primitives:PivotHeaderItem">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Padding" Value="21,0,1,0"/>
        <Setter Property="Margin" Value="0"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Primitives:PivotHeaderItem">
                    <Grid>                          
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="SelectionStates">
                                <VisualState x:Name="Unselected">
                                    <Storyboard>
                                        <ColorAnimation Duration="0" Storyboard.TargetName="myback" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="{StaticResource PhoneDisabledColor}"/>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Selected">
                                    <Storyboard>
                                        <ColorAnimation Duration="0" Storyboard.TargetName="myback" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="{StaticResource PhoneBackgroundColor}"/>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>                            
                        <Border x:Name="myback" Background="{TemplateBinding Background}">
                            <ContentControl x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Opacity="{StaticResource PhonePivotUnselectedItemOpacity}"/>
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="PivotStyle1" TargetType="phone:Pivot">
        <Setter Property="Margin" Value="0"/>
        <Setter Property="Padding" Value="0"/>
        <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <Grid/>
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="phone:Pivot">
                    <Grid HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <Grid Background="{TemplateBinding Background}" Grid.RowSpan="3"/>
                        <ContentControl x:Name="TitleElement" ContentTemplate="{TemplateBinding TitleTemplate}" Content="{TemplateBinding Title}" HorizontalAlignment="Left" Margin="24,0,0,-7" Style="{StaticResource PivotTitleStyle}"/>
                        <Primitives:PivotHeadersControl x:Name="HeadersListElement" Grid.Row="1" ItemContainerStyle="{StaticResource PivotHeaderItemStyle1}" FontSize="70"/>
                        <ItemsPresenter x:Name="PivotItemPresenter" Margin="{TemplateBinding Padding}" Grid.Row="2"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

【问题讨论】：

标签： xaml windows-phone-8

【解决方案1】：

将<ContentPresenter> 更改为<TextBlock>

像这样

<Style x:Key="PivotHeaderItemStyle1" TargetType="Primitives:PivotHeaderItem">
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="Padding" Value="10,0,10,0"/>
    <Setter Property="Margin" Value="0"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Primitives:PivotHeaderItem">
                <Grid>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="SelectionStates">
                            <VisualState x:Name="Unselected">
                                <Storyboard>
                                    <ColorAnimation Duration="0" Storyboard.TargetName="border_highlight" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="Transparent"/>
                                    <ColorAnimation  Duration="0" Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" To="Green"/>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Selected">
                                <Storyboard>
                                    <ColorAnimation  Duration="0:0:1" Storyboard.TargetName="border_highlight" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="PaleGreen"/>
                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="contentPresenter"/>
                                    <ColorAnimation  Duration="0" Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" To="Blue"/>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Border x:Name="border_highlight" Background="{TemplateBinding Background}" >
                        <!--<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Opacity="{StaticResource PhonePivotUnselectedItemOpacity}"/>-->
                        <TextBlock x:Name="contentPresenter" Foreground="{TemplateBinding Foreground}" Text="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Opacity="{StaticResource PhonePivotUnselectedItemOpacity}"></TextBlock>
                    </Border>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

然后您可以为前景设置动画。这是上面代码的截图。选择颜色 = 蓝色，未选择颜色 = 绿色。不过，您需要重新添加背景动画。

【讨论】：

谢谢，效果很好。另一方面，在处理这些 PivotHeader 项目时，我丢失了原始的 pivotheader 文本块格式样式。我怎样才能恢复它而不是屏幕截图中看起来更厚的文本？
不管你的实现，我在新的 TextBlock 中添加了 Style="{StaticResource PhoneTextExtraLargeStyle}" FontSize="70"，我相信它有效。，供其他人将来参考。
@Matthew np，总是愿意帮助制作 WP 程序的人超越大多数程序使用的通用布局。至于字体，您可以在<TextBlock> 中设置它，在PivotHeaderItemStyle1 中将其设置为<Setter Property="FontSize" Value="40"/>，或者您甚至可以在<Primitives:PivotHeadersControl> 中设置它，它将在您在层次结构中定义的任何位置传递。 :)
我尝试在 Windows 10 中将其与 UWP 一起使用，但它不想在 PivotHeaderItem 之前使用 Primitive: 标签构建，所以我删除了该标签，现在当我尝试调试它时它会中断.有什么建议吗？

【解决方案2】：

@Teysz，我认为对于 Windows 10 UWP，您最好从 PivotItemHeader 的默认样式开始，并在 XAML 文件的 ..Resources 部分中复制该样式。 Visual Studio 2015 无法插入默认样式，因此您必须自己从以下位置获取： %ProgramFiles(x86)%\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.10240.0\Generic\generic.xaml 我在http://blog.hompus.nl/2015/09/04/responsive-pivot-headers-in-universal-windows-platform-apps/ 找到了这个

【讨论】：

太好了，@jos-huybrighs。今天晚些时候我会试试的！谢谢。