2014-11-01 5 views
2

У меня есть существующий шаблон заголовка Pivot, который я использую, но он не дает мне эффекта, который мне нужен. Мне нужен текущий PivotItem, чтобы иметь синий передний план и белый фон, в то время как все остальные элементы поворота имеют стандартный отключенный передний и задний фон. В настоящее время ниже, я считаю, что все, кроме синего, на выбранном PivotItem, но я не могу понять, как правильно применить передний план только к выбранному элементу?Как Стиль PivotItem Header

enter image description here

<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="{StaticResource PhoneDisabledColor}"/> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="Selected"> 
            <Storyboard> 
             <ColorAnimation Duration="0" Storyboard.TargetName="myback" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="{StaticResource PhoneBackgroundColor}"/> 
            </Storyboard> 
           </VisualState> 
          </VisualStateGroup> 
         </VisualStateManager.VisualStateGroups>        
         <Border x:Name="myback" Background="{TemplateBinding Background}"> 
          <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,0,0,-7" Style="{StaticResource PivotTitleStyle}"/> 
         <Primitives:PivotHeadersControl x:Name="HeadersListElement" Grid.Row="1" ItemContainerStyle="{StaticResource PivotHeaderItemStyle1}" FontSize="70"/> 
         <ItemsPresenter x:Name="PivotItemPresenter" Margin="{TemplateBinding Padding}" Grid.Row="2"/> 
        </Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 

ответ

0

Изменение <ContentPresenter> к <TextBlock>

Подобно

<Style x:Key="PivotHeaderItemStyle1" TargetType="Primitives:PivotHeaderItem"> 
    <Setter Property="Background" Value="Transparent"/> 
    <Setter Property="Padding" Value="10,0,10,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="border_highlight" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="Transparent"/> 
            <ColorAnimation Duration="0" Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" To="Green"/> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="Selected"> 
           <Storyboard> 
            <ColorAnimation Duration="0:0:1" Storyboard.TargetName="border_highlight" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="PaleGreen"/> 
            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="contentPresenter"/> 
            <ColorAnimation Duration="0" Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" To="Blue"/> 
           </Storyboard> 
          </VisualState> 
         </VisualStateGroup> 
        </VisualStateManager.VisualStateGroups> 
        <Border x:Name="border_highlight" Background="{TemplateBinding Background}" > 
         <!--<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Opacity="{StaticResource PhonePivotUnselectedItemOpacity}"/>--> 
         <TextBlock x:Name="contentPresenter" Foreground="{TemplateBinding Foreground}" Text="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Opacity="{StaticResource PhonePivotUnselectedItemOpacity}"></TextBlock> 
        </Border> 
       </Grid> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

Затем вы можете анимировать передний план. Вот скриншот приведенного выше кода. С выбранным цветом = синий и невыбранным цветом = зеленый. Однако вам нужно добавить обратно в свою фоновую анимацию.


enter image description here

+0

Спасибо, что работало великолепно. В другой заметке, когда вы возились с этими элементами PivotHeader, я потерял оригинальный стиль форматирования текстового блока. Как я могу получить это обратно вместо более толстого текста в моем скриншоте? – Matthew

+0

Невзирая на вашу реализацию, я добавил «Style =» {StaticResource PhoneTextExtraLargeStyle} «FontSize =« 70 »в новом TextBlock, и я считаю, что это сработало. – Matthew

+0

@Matthew np, всегда готов помочь кому-то сделать программу WP за общим макетом, который используется большинством программ. Что касается шрифта, вы можете установить его в '', установите его как' 'в PivotHeaderItemStyle1, или вы даже можете установить его в' ', Он получит пропуск вниз, где бы вы ни определили его в иерархии. :) –

0

@Teysz, я думаю, что с Windows 10 UWP лучше начать от стиля по умолчанию для PivotItemHeader и сделать копию, что в разделе ..Resources вашего файла XAML. Стиль по умолчанию не может быть вставлен в Visual Studio 2015, так что вы должны получить его самостоятельно из: %ProgramFiles(x86)%\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.10240.0\Generic\generic.xaml Я нашел это в http://blog.hompus.nl/2015/09/04/responsive-pivot-headers-in-universal-windows-platform-apps/

Смежные вопросы