如何自定义数据透视表头？

Question

我是 Windows phone 8.1 应用程序开发的新手，我想知道如何使用字体、前景色、大小等属性自定义数据透视表头。我找不到这些属性中的任何一个。所以，希望有人能帮助我。

Answer 1

创建一个资源字典（如果你没有的话）添加-新项目-资源字典

将它应用到您的 App.XAML

<Application.Resources>

    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>

            <!-- 
                Styles that define common aspects of the platform look and feel
                Required by Visual Studio project and item templates
             -->
            <ResourceDictionary Source="Assets/Style/CustomStyle.xaml"/>
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

将此模板添加到您的资源词典

<Style x:Key="CustomPivotStyle" TargetType="Pivot">
    <Setter Property="Margin" Value="0,0,0,0"/>
    <Setter Property="Padding" Value="0"/>
    <Setter Property="Foreground" Value="{ThemeResource PhoneForegroundBrush}"/>
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="BorderBrush" Value="#FF1F1F1F"/>
    <Setter Property="ItemsPanel">
        <Setter.Value>
            <ItemsPanelTemplate>
                <Grid/>
            </ItemsPanelTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Pivot">
                <Grid x:Name="RootElement" 
                        Background="{TemplateBinding Background}" 
                        HorizontalAlignment="{TemplateBinding HorizontalAlignment}" 
                        VerticalAlignment="{TemplateBinding VerticalAlignment}">

                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="Orientation">
                            <VisualState x:Name="Portrait">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" Storyboard.TargetName="TitleContentControl">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotPortraitThemePadding}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <ContentControl x:Name="TitleContentControl" ContentTemplate="{TemplateBinding TitleTemplate}" Content="{TemplateBinding Title}" Style="{StaticResource PivotTitleContentControlStyle}"/>
                    <ScrollViewer x:Name="ScrollViewer" HorizontalSnapPointsAlignment="Center" HorizontalSnapPointsType="MandatorySingle" HorizontalScrollBarVisibility="Hidden" Margin="{TemplateBinding Padding}" Grid.Row="1" Template="{StaticResource ScrollViewerScrollBarlessTemplate}" VerticalSnapPointsType="None" VerticalScrollBarVisibility="Disabled" VerticalScrollMode="Disabled" VerticalContentAlignment="Center" ZoomMode="Disabled">
                        <PivotPanel x:Name="Panel" VerticalAlignment="Stretch">
                            <PivotHeaderPanel x:Name="Header" 
                                    Background="{TemplateBinding BorderBrush}">
                                <PivotHeaderPanel.RenderTransform>
                                    <CompositeTransform x:Name="HeaderTranslateTransform" TranslateX="0"/>
                                </PivotHeaderPanel.RenderTransform>
                            </PivotHeaderPanel>
                            <ItemsPresenter x:Name="PivotItemPresenter">
                                <ItemsPresenter.RenderTransform>
                                    <TranslateTransform x:Name="ItemsPresenterTranslateTransform" X="0"/>
                                </ItemsPresenter.RenderTransform>
                            </ItemsPresenter>
                        </PivotPanel>
                    </ScrollViewer>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style TargetType="TextBlock"
       x:Key="CustomPivotHeader">
    <Setter Property="FontSize" Value="20"/>
    <Setter Property="FontWeight" Value="Bold"/>
    <Setter Property="FontFamily" Value="Segoe UI"/>
    <Setter Property="Margin" Value="10,10,0,0"/>
    <Setter Property="VerticalAlignment" Value="Bottom"/>
</Style>

将它应用到你的枢轴上

    <Pivot x:Name="pivot"
           Margin="0,0,0,0"
           Style="{StaticResource CustomPivotStyle}">
        <Pivot.HeaderTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding}" Style="{StaticResource CustomPivotHeader}"/>
            </DataTemplate>
        </Pivot.HeaderTemplate>
    </Pivot>

Answer 2

我正在为我的 windows phone 应用程序使用以下代码，Brain Lightener。它应该工作 :)

   <phone:Pivot Foreground="#4b240a" FontFamily="Comic Sans MS">
                <phone:Pivot.Title>
                    <TextBlock Text="Brain Lightener" FontFamily="Comic Sans MS" FontWeight="Bold"></TextBlock>
                </phone:Pivot.Title>
                <!--Pivot item one-->
                <phone:PivotItem>
                    <phone:PivotItem.Header>
                        <TextBlock Text="Test" FontFamily="Comic Sans MS"></TextBlock>
                    </phone:PivotItem.Header>
    </phone:PivotItem>
    </phone:Pivot>

您不必 change/code 装饰您的数据透视页 ;)

如何自定义数据透视表头？

How to customize Pivot headers?

c#

windows-phone-8

windows-phone-8.1