如何在Pivot

时间:2017-03-28 05:04:05

标签: c# uwp uwp-xaml

我查看了Apply PivotItemHeader style to PivotItem in UWP,但我无法将这些建议应用到我的代码中。

我正在尝试根据设备是桌面还是移动来更改数据透视表中的PivotHeaderItem的样式。我的资源字典中有2个显式样式。

<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是:

    <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"/>

在数据透视代码的不同部分,但我只收到错误。

如果我从资源字典中删除其中一个样式并将其他样式更改为隐式(删除x:Key),则样式应用正确并且我没有收到任何错误。

简而言之,我认为我的问题是我不知道如何x:命名一个PivotHeaderItem。

1 个答案:

答案 0 :(得分:3)

<强>更新

使用枢轴内的样式

<Style x:Key="headerItemStyle" TargetType="PivotHeaderItem">
....
</Style >
<Pivot x:Name="pivot">
            <Pivot.Resources>
                <Style TargetType="PivotHeaderItem" BasedOn="{StaticResource headerItemStyle}" />
            </Pivot.Resources>
...
</Pivot>

以下是如何在PivotHeader的控件模板中执行此操作

在下面的示例中,在桌面视图中,Pivot Header的背景将为黄色,而在移动设备中则为绿色

 <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>