如何更改 Pivot 中 PivotHeaderItem(s) 的样式 [英] How do you change the Style of the PivotHeaderItem(s) within a Pivot
本文介绍了如何更改 Pivot 中 PivotHeaderItem(s) 的样式的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我查看了 将 PivotItemHeader 样式应用于 UWP 中的 PivotItem但我一直无法将这些建议应用到我的代码中.
I have looked at Apply PivotItemHeader style to PivotItem in UWP but I haven't been able to apply the suggestions to my code.
我正在尝试根据设备是桌面设备还是移动设备来更改 Pivot 中 PivotHeaderItem(s) 的样式.我的资源字典中有 2 个显式样式.
I'm trying to change the Style of the PivotHeaderItem(s) within a Pivot based on whether or not the device is Desktop or Mobile. I have 2 explicit styles in my Resource Dictionary.
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Test">
<Style x:Key="PivotHeaderItemStyle1" TargetType="PivotHeaderItem">
<Style x:Key="PivotHeaderItemStyle2" TargetType="PivotHeaderItem">
</ResourceDictionary>
我的 MainPage.xaml 是:
My MainPage.xaml is:
<Page
x:Class="Test.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Test"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.Resources>
<ResourceDictionary Source="Dictionary1.xaml"/>
</Page.Resources>
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="DeviceStates">
<VisualState x:Name="Desktop">
<VisualState.StateTriggers>
<local:DeviceStateTrigger DeviceFamily="Windows.Desktop"/>
</VisualState.StateTriggers>
<VisualState.Setters>
I don't know what to put here ---> <Setter Target="PivotHeaderItem1.Style" Value="{StaticResource PivotHeaderItemStyle1}"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Mobile">
<VisualState.StateTriggers>
<local:DeviceStateTrigger DeviceFamily="Windows.Mobile"/>
</VisualState.StateTriggers>
<VisualState.Setters>
I don't know what to put here ---> <Setter Target="PivotHeaderItem1.Style" Value="{StaticResource PivotHeaderItemStyle2}"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Pivot x:Name="rootPivot">
<PivotItem x:Name="Pivot1" Header="Pivot 1"/>
<PivotItem x:Name="Pivot2" Header="Pivot 2"/>
<PivotItem x:Name="Pivot3" Header="Pivot 3"/>
</Pivot>
</Grid>
</Page>
我试着把代码:
<PivotHeaderItem x:Name="PivotHeaderItem1"/>
在 Pivot 代码的不同部分，但我只收到错误.
within different parts of the Pivot code, but I only receive errors.
如果我从我的资源字典中删除一种样式并将另一种样式更改为隐式(删除 x:Key)，则该样式将正确应用并且我没有收到任何错误.
If I remove one of the styles from my Resource Dictionary and change the other style to implicit (remove the x:Key) the style is applied correctly and I receive no errors.
简而言之，我认为我的问题是我不知道如何 x:name 一个 PivotHeaderItem.
In short, I think my problem is that I don't know how to x:name a PivotHeaderItem.
推荐答案
UPDATE
使用pivot内的样式
To use the style inside pivot
<Style x:Key="headerItemStyle" TargetType="PivotHeaderItem">
....
</Style >
<Pivot x:Name="pivot">
<Pivot.Resources>
<Style TargetType="PivotHeaderItem" BasedOn="{StaticResource headerItemStyle}" />
</Pivot.Resources>
...
</Pivot>
这是您如何在 PivotHeader 的控件模板中执行此操作
Here is How you do it inside PivotHeader's control template
在下面的示例中，在桌面视图中，Pivot Header 的背景将为黄色，而在移动设备中则为绿色
In the below example In desktop view Pivot Header's background will be yellow where as in mobile it will be in 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="{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}">
<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="{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>
<VisualStateGroup x:Name="WindowStates">
<VisualState x:Name="WideState">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="800" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="ContentPresenter.Background" Value="LightYellow" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="NarrowState">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="ContentPresenter.Background" Value="LightGreen" />
</VisualState.Setters>
</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>
这篇关于如何更改 Pivot 中 PivotHeaderItem(s) 的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
