1

現在選択されている PivotItem ヘッダーの背景が PhoneAccentBrush であるソリューションを実装しようとしていますが、他のすべてのピボット ヘッダーは PhoneDisabledBrush などの既定の色です。このように、ユーザーが左右にスワイプすると、Pivo​​tItem が表示され、その背景色がアクティブな PhoneAccentBrush に変わり、他のすべてのピボット ヘッダーはデフォルトの背景色のままになります。どうすればこれを行うことができますか？

現在、選択/選択されていないピボットアイテムの背景を除いて、私が望むものを実装しています

<phone:PhoneApplicationPage.Resources>
    <Style x:Key="PivotStyle1" TargetType="phone:Pivot">
        <Setter Property="Margin" Value="0"/>
        <Setter Property="Padding" Value="0"/>
        <!--<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>-->
        <Setter Property="Foreground" Value="white"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <Grid/>
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="phone:Pivot">
                    <Grid HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <Grid Background="{StaticResource PhoneAccentBrush}" CacheMode="BitmapCache" Grid.RowSpan="2" />
                        <Grid Background="{TemplateBinding Background}" CacheMode="BitmapCache" Grid.Row="2" />
                        <ContentPresenter ContentTemplate="{TemplateBinding TitleTemplate}" Content="{TemplateBinding Title}" Margin="24,17,0,-7"/>
                        <Primitives:PivotHeadersControl x:Name="HeadersListElement" Grid.Row="1"/>
                        <ItemsPresenter x:Name="PivotItemPresenter" Margin="{TemplateBinding Padding}" Grid.Row="2"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

</phone:PhoneApplicationPage.Resources>

...

<!--Pivot Control-->
<phone:Pivot x:Name="Pivot" Style="{StaticResource PivotStyle1}">
    ...
</phone:Pivot>

どのように見える..

ここに画像の説明を入力

*アップデート

次の更新での StackTrace Exception..InvalidOperationException: Cannot resolve TargetProperty (Border.Background).(SolidColorBrush.Color) on specified object.

<Style x:Key="PivotHeaderItemStyle1" TargetType="Primitives:PivotHeaderItem">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Padding" Value="21,0,1,0"/>
        <Setter Property="Margin" Value="0"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Primitives:PivotHeaderItem">
                    <Grid>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="SelectionStates">
                                <VisualState x:Name="Unselected">
                                    <Storyboard>
                                        <ColorAnimation Duration="0" Storyboard.TargetName="myback" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="DarkGrey"/>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Selected">
                                    <Storyboard>
                                        <ColorAnimation Duration="0" Storyboard.TargetName="myback" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="Red"/>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Border x:Name="myback">
                            <ContentControl x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Opacity="{StaticResource PhonePivotUnselectedItemOpacity}"/>
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="PivotStyle1" TargetType="phone: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="phone:Pivot">
                    <Grid HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <Grid Background="{TemplateBinding Background}" Grid.RowSpan="3"/>
                        <ContentControl x:Name="TitleElement" ContentTemplate="{TemplateBinding TitleTemplate}" Content="{TemplateBinding Title}" HorizontalAlignment="Left" Margin="24,17,0,-7" Style="{StaticResource PivotTitleStyle}"/>
                        <Primitives:PivotHeadersControl x:Name="HeadersListElement" Grid.Row="1" ItemContainerStyle="{StaticResource PivotHeaderItemStyle1}"/>
                        <ItemsPresenter x:Name="PivotItemPresenter" Margin="{TemplateBinding Padding}" Grid.Row="2"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
4

1 に答える 1

1

Kさん、着きましたね。アクションはコードビハインドを避ける必要があります....

背景用に別のストーリーボード アニメーションを追加するだけです。これを行う方法を知っている最も簡単な方法は、境界線を追加することです。

< ContentControl x:Name="contentPresenter" /> の周りに Border を追加して、次のようにします

<Border x:Name="myback" Background="{TemplateBinding Background}">
    <ContentControl x:Name="contentPresenter"/>
</Border>

次に、選択した状態に基づいて色を付けましょう。他のストーリーボード アニメーションも追加します。

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup x:Name="SelectionStates">
        <VisualState x:Name="Unselected">
            <Storyboard>
               <ColorAnimation Duration="0" Storyboard.TargetName="myback" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="DarkGrey"/>
            </Storyboard>
        </VisualState>
        <VisualState x:Name="Selected">
            <Storyboard>
                <ColorAnimation Duration="0" Storyboard.TargetName="myback" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="Red"/>
           </Storyboard>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

うまくいくことを教えてください:D

于 2014-08-25T04:31:48.057 に答える