Как стилизовать выделенный заголовок PivotItem

Question

Я пытаюсь реализовать решение, в соответствии с которым текущий выбранный фон заголовка PivotItem является PhoneAccentBrush, но все остальные заголовки представляют собой цвет по умолчанию, например PhoneDisabledBrush. Таким образом, когда пользователь переместится влево или вправо, появится PivotItem, и его цвет фона изменится на активный 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 Исключения в следующем обновлении. 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> 

Answer 1

K, похоже, вы добираетесь туда. Действия должны избегать кода позади ....

Мы собираемся добавить еще одну анимацию раскадровки для фона. И самый простой способ, которым я знаю, как это сделать, - это просто добавить границу.

Добавить границу вокруг < ContentControl х: Name = «ContentPresenter» /> так это выглядит, как этот

<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