PivotItem控件windows phone 7设置禁用标题的颜色

时间:2012-07-31 18:11:56

标签: silverlight windows-phone-7.1 windows-phone pivotitem

当PivotItem控件不是当前选定的控件时,有没有办法在XAML中设置标题颜色的状态。

这是我用于枢轴项目控件的标题代码

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

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

enter image description here

1 个答案:

答案 0 :(得分:3)

不幸的是,要实现这一目标,需要进行大量的样式设计。首先,您需要为Pivot创建样式。最好使用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属性以根据状态更改标题的外观。

<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。这允许您从Unselected状态故事板中设置前景。

确保将Pivot的样式设置为PivotStyle1,并将PivotHeadersControl的ItemContainerStyle设置为PivotHeaderItemStyle1。你还需要稍微修改一下,以便按照你想要的方式恢复尺寸。