1. 首页
  2. 问答
  3. 如何样式数据透视表头

如何样式数据透视表头

2014-11-01 45 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

相关问题

 相关问题