Windows Phone 8.1 - Pivot标头

时间:2014-11-17 13:41:02

标签: xaml microsoft-metro winrt-xaml windows-phone-8.1

我正在使用枢轴控制,我想更改标题的forground颜色!

但不知怎的,我无法用很简单的猜测来做到这一点!

 <Pivot x:Name="pivot1">
                <PivotItem x:Name="pivot1item1" Header="Profile" Style="{StaticResource PuzzlePivotItemHeader}">
                    <Controls:Profile />
                </PivotItem>
                <PivotItem x:Name="pivot1item2" Header="Filters" Style="{StaticResource PuzzlePivotItemHeader}">
                    <Controls:Filters />
                </PivotItem>
        </Pivot>

和风格是:

<Style x:Key="PuzzlePivotItemHeader" TargetType="PivotItem">
        <Setter Property="Foreground" Value="White"/>
    </Style>

我只想将标题字体大小改变并将颜色变为白色!!

怎么可能?

2 个答案:

答案 0 :(得分:15)

以下是如何更改应用中所有枢轴控件的轴项目标题的前景色和字体大小我不知道如何根据轴控制执行此操作事实证明这是一个错误;请参阅this thread):

App.xaml 中覆盖这些资源:

<Application.Resources>
    <SolidColorBrush x:Key="PivotHeaderForegroundSelectedBrush" Color="Red" />
    <SolidColorBrush x:Key="PivotHeaderForegroundUnselectedBrush" Color="Cyan" />
    <x:Double x:Key="PivotHeaderItemFontSize">40</x:Double>
</Application.Resources>

Screenshot


如果您不关心为所选和未选择的枢轴项目使用不同的颜色,您可以在每个轴上设置标题样式,而不是:

<Pivot>
    <Pivot.HeaderTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding}" Foreground="Cyan" FontSize="40" />
        </DataTemplate>
    </Pivot.HeaderTemplate>

    <PivotItem Header="one" />
    <PivotItem Header="two" />
    <PivotItem Header="three" />
    <PivotItem Header="four" />
    <PivotItem Header="five" />
    <PivotItem Header="six" />
</Pivot>

enter image description here

答案 1 :(得分:0)

如果您只想更改所有标题的背景颜色,可以在Window Phone 8.1中执行此操作。

首先,使用Expression Blend生成Pivot控件的默认样式。

<Thickness x:Key="PivotPortraitThemePadding">19,38,0,0</Thickness>
<Thickness x:Key="PivotLandscapeThemePadding">19,25,0,0</Thickness>
<Style x:Key="CustomPivotStyle" TargetType="Pivot">
    <Setter Property="Margin" Value="0"/>
    <Setter Property="Padding" Value="0"/>
    <Setter Property="Foreground" Value="{ThemeResource PhoneForegroundBrush}"/>
    <Setter Property="Background" Value="Transparent"/>
    <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>
                            <VisualState x:Name="Landscape">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" Storyboard.TargetName="TitleContentControl">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotLandscapeThemePadding}"/>
                                    </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="Stretch" 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>

在下面的这一行中,我对默​​认样式所做的唯一更改是将Background="{TemplateBinding BorderBrush}"添加到PivotHeaderPanel,后者是托管所有标题的面板。

<PivotHeaderPanel x:Name="Header" Background="{TemplateBinding BorderBrush}">

我在这里使用TemplateBinding的原因是因为这样做可以让我灵活地通过指定Pivot的BorderBush来更改标题背景。由于BorderBrush未在控件中的任何位置使用,因此如果我们更改它将不会有任何副作用。

所以,你需要在你的Pivot中做的就是这个。

<Pivot x:Uid="Pivot" Title="MY APPLICATION" x:Name="pivot" CommonNavigationTransitionInfo.IsStaggerElement="True" Style="{StaticResource CustomPivotStyle}" BorderBrush="{StaticResource PhoneAccentBrush}">