1

PivotItem コントロールが現在選択されているコントロールではない場合、XAML でヘッダーの色の状態を設定する方法はありますか。

これは、ピボット アイテム コントロールに使用しているヘッダー コードです。

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

以下の例では、すべてのヘッダーの色を PhoneAccentBrush にしたいのですが、無効な状態になると灰色にしたいです (ただし、PhoneAccentBrush の淡色バージョンになります)。どうやってするか ？このハックを C# コードで実行できることは確かですが、XAML 自体で実行したいと考えています。助けてください。

ここに画像の説明を入力

4

1 に答える 1

3

残念ながら、これを実現するには多くのスタイリングが必要です。まず、ピボットのスタイルを作成する必要があります。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。このコントロールは、タイプ の TemplatedItemsControl ですPivotHeaderItem。この 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>

ContentPresenter の代わりに TextBlock を持つようにデフォルトのスタイルを変更しました。これにより、未選択状態のストーリーボードから前景を設定できます。

ピボットのスタイルが PivotStyle1 に設定されていること、および PivotHeadersControl の ItemContainerStyle が PivotHeaderItemStyle1 に設定されていることを確認してください。また、サイズを希望どおりに戻すには、少し変更する必要があります。

于 2012-07-31T21:27:34.680 に答える