PivotItem控件Windows Phone 7设置禁用标题的颜色 [英] PivotItem control windows phone 7 set color of disabled header

问题描述

当PivotItem控件不是当前选定的控件时，是否可以在XAML中设置标题颜色的状态.

Is there a way to set the state of the header color in XAML when the PivotItem control is not the current selected one.

这是我用于数据透视表控件的标头代码

This is the header code i am using for the pivot item control

<controls:PivotItem.Header>
  <TextBlock Text="first" Foreground="{StaticResource PhoneAccentBrush}"/>
</controls:PivotItem.Header>

在下面的示例中，我希望所有标题的颜色都是PhoneAccentBrush，但是当它处于禁用状态时，我希望它是灰色的(但它变成了PhoneAccentBrush的暗色版本).怎么做 ?我知道我可以用C#代码进行此破解，但是我希望在XAML本身中完成.请帮忙.

In the below example, I want all the header's color to be PhoneAccentBrush but when it goes in the disabled state, I want to it to be grey (but it becomes a dimmed version of PhoneAccentBrush). How to do that ? I know for sure I can do this hack in C# code, but I want this done in the XAML itself. Please help.

推荐答案

不幸的是，要实现此目标，需要进行很多样式设置.首先，您需要为数据透视表创建样式.最好使用Expression Blend做到这一点.

Unfortunately there is a lot of styling that needs to happen to get this accomplished. First you need to create a style for the Pivot. It is best to do this with Expression Blend.

<Style x:Key="PivotStyle1" TargetType="controls: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="controls:Pivot">
                <Grid HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <Grid Background="{TemplateBinding Background}" CacheMode="BitmapCache" Grid.RowSpan="3"/>
                    <ContentPresenter ContentTemplate="{TemplateBinding TitleTemplate}" Content="{TemplateBinding Title}" Margin="24,17,0,-7"/>
                    <controlsPrimitives:PivotHeadersControl x:Name="HeadersListElement" Grid.Row="1"/>
                    <ItemsPresenter x:Name="PivotItemPresenter" Margin="{TemplateBinding Padding}" Grid.Row="2"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

以样式形式通知其中有一个PivotHeadersControl.此控件是类型为PivotHeaderItem的TemplatedItemsControl.这个PivotHeaderItem是我们需要设置样式的.您可以设置ItemContainerStyle属性，以根据标题的状态更改标题的外观.

Notice in the style that there is a PivotHeadersControl in it. This control is a TemplatedItemsControl of type PivotHeaderItem. This PivotHeaderItem is what we need to style. You can set the ItemContainerStyle property to alter how the headers will look depending on their state.

<Style x:Key="PivotHeaderItemStyle1" TargetType="controlsPrimitives:PivotHeaderItem">
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="Padding" Value="21,0,1,0"/>
    <Setter Property="CacheMode" Value="BitmapCache"/>
    <Setter Property="Margin" Value="0"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="controlsPrimitives:PivotHeaderItem">
                <Grid>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="SelectionStates">
                            <VisualState x:Name="Unselected">
                                <Storyboard>
                                    <ColorAnimation Duration="0" Storyboard.TargetName="contentPresenter" 
                                Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" To="Gray"/>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Selected">
                                <Storyboard>
                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="contentPresenter"/>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <TextBlock x:Name="contentPresenter" 
                Text="{TemplateBinding Content}"
                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                Foreground="{StaticResource PhoneAccentBrush}"
                Margin="{TemplateBinding Padding}" Opacity=".4"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

我修改了默认样式，使其具有TextBlock而不是ContentPresenter.这使您可以从未选中"状态情节提要板中设置前景.

I've modified the default style to have a TextBlock instead of a ContentPresenter. This allows you to set the foreground from the Unselected state storyboard.

确保将数据透视样式"设置为"PivotStyle1"，并将"PivotHeadersControl"的ItemContainerStyle设置为"PivotHeaderItemStyle1".您还需要对其进行一些修改，以恢复所需的大小.

Make sure that you set the Style of the Pivot to be PivotStyle1 and that the ItemContainerStyle of the PivotHeadersControl is set to PivotHeaderItemStyle1. You'll also need to modify it a little to get the sizing back the way you want it.

这篇关于PivotItem控件Windows Phone 7设置禁用标题的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！