我使用 Blend 来修改我的数据透视项目标题的模板。结果看起来不错,但我不明白由此产生的加价。
当我将数据绑定到我的数据透视项时,就会出现问题,因为它看起来漂浮在标题上。我可以通过设置边距来解决这个问题,但是我不想为每个枢轴项目都这样做,我想了解样式标记并希望在那里修复它。
<Style x:Key="PivotStyle1" TargetType="controls:Pivot">
<Setter Property="Margin" Value="0"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Background" Value="White"/>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<Grid/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="controls:Pivot">
<Grid HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid CacheMode="BitmapCache" Grid.RowSpan="2" >
<Grid.Background>
<LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">
<GradientStop Color="#FFD7E9F1"/>
<GradientStop Color="#FF1BA1E2" Offset="1"/>
</LinearGradientBrush>
</Grid.Background>
</Grid>
<Grid Background="{TemplateBinding Background}" CacheMode="BitmapCache" Grid.Row="2" />
<ContentPresenter ContentTemplate="{TemplateBinding TitleTemplate}"
Content="{TemplateBinding Title}" Margin="24,17,0,-7"/>
<controlsPrimitives:PivotHeadersControl x:Name="HeadersListElement" Grid.Row="1" Foreground="White" />
<ItemsPresenter x:Name="PivotItemPresenter" Margin="0,2,0,8" Grid.RowSpan="3"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
按照 Shawn 的建议设置 Pivot.HeaderTemplate 要简单得多,但会导致标题项目之间的背景颜色出现间隙。
<controls:Pivot>
<controls:Pivot.HeaderTemplate>
<DataTemplate>
<StackPanel>
<StackPanel.Background>
<LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">
<GradientStop Color="#FFD7E9F1"/>
<GradientStop Color="#FF1BA1E2" Offset="1"/>
</LinearGradientBrush>
</StackPanel.Background>
<TextBlock Text="{Binding}" FontSize="{StaticResource PhoneFontSizeExtraExtraLarge}" Foreground="White" />
</StackPanel>
</DataTemplate>
</controls:Pivot.HeaderTemplate>