1. 首頁
  2. 問答
  3. 如何樣式數據透視表頭

如何樣式數據透視表頭

2014-11-01 44 views
2

我有一個現有的透視頭模板我正在使用，但它沒有給我我需要的效果。我需要當前選定的PivotItem具有藍色的前景和白色背景，而所有其他透視項目都具有標準禁用的前景和背景外觀。目前下面我有什麼我相信是除了選定的PivotItem上的藍色前景的一切，但我不知道如何正確地將前景應用於選定的項目？如何樣式數據透視表頭

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>

來源

2014-11-01 Matthew

回答

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

來源

2014-11-01 20:50:20

+0

謝謝你的工作很好。在另一個說明中，當弄亂這些PivotHeader項目時，我丟失了原始的轉義文本塊格式樣式。我怎樣才能讓它回來，而不是在我的屏幕截圖中看起來更厚的文本？ – Matthew 2014-11-01 21:08:10

+0

與您的實現無關我在新的TextBlock中添加了'Style =「{StaticResource PhoneTextExtraLargeStyle}」FontSize =「70」'，我相信它的工作原理，以供其他人蔘考。 – Matthew 2014-11-01 21:11:38

+0

@Matthew np，總是願意幫助製作WP程序的人超出大多數程序使用的通用佈局。至於字體，你可以在''中設置它，在PivotHeaderItemStyle1中將它設置爲'，或者你甚至可以在''，它將在您定義它在層次結構中的任何地方傳遞。 :) – 2014-11-02 02:49:27

相關問題

 相關問題