Question

我使用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>

将Pivot.HeaderTemplate设置为Shawn在下面建议更简单，但会导致标题项之间的背景颜色出现间隙。

<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>

Answer 1

如果您只是想修改标题，只需修改标题

即可

<controls:Pivot>
    <controls:Pivot.HeaderTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding}" FontSize="{StaticResource PhoneFontSizeExtraExtraLarge}"
                       Margin="24,17,0,-7" Foreground="White" />
        </DataTemplate>
    </controls:Pivot.HeaderTemplate>
    <controls:PivotItem Title="item one"/>
</controls:Pivot>

根据您的最新更新，我看到您要做的事情。将以下内容添加到页面的资源

            <Style TargetType="controlsPrimitives:PivotHeadersControl">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="controlsPrimitives:PivotHeadersControl">
                            <Grid>
                                <Grid.Background>
                                    <LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">
                                        <GradientStop Color="#FFD7E9F1"/>
                                        <GradientStop Color="#FF1BA1E2" Offset="1"/>
                                    </LinearGradientBrush>
                                </Grid.Background>
                                <Canvas x:Name="Canvas">
                                    <ItemsPresenter/>
                                </Canvas>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

您需要以下命名空间

xmlns:controlsPrimitives="clr-namespace:Microsoft.Phone.Controls.Primitives;assembly=Microsoft.Phone.Controls"

我的博客上有更多信息www.VisuallyLocated.com

使用模板时页面内容在PivotItem标头上流动

1 个答案: