Question

我想在选定的Pivot标题项下面添加下划线。这是样式和模板的XAML：

https://msdn.microsoft.com/en-us/library/windows/apps/mt299144.aspx

对于选择该项目的情况，我无法弄清楚我需要更改此样式的内容。

Answer 1

如果要更改数据透视表标题项的样式，则应更新PivotHeaderItem样式，而不是Pivot您链接的样式。您可以使用VisualState Selected来更改所选项目。为标题项容器添加底部BorderThickness，选择项目时的网格可能符合您的要求，例如，

<Style TargetType="PivotHeaderItem">
   ...
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="PivotHeaderItem">
            <!-- Here set the Grid Border Brush to white -->
                <Grid
                    x:Name="Grid"
                    HorizontalAlignment="Stretch"
                    Background="#2196F3"
                    BorderBrush="White">
                    <Grid.Resources>
                        <Style x:Key="BaseContentPresenterStyle" TargetType="ContentPresenter">
                            <Setter Property="FontFamily" Value="Segoe UI" />
                            <Setter Property="FontWeight" Value="SemiBold" />
                            <Setter Property="FontSize" Value="15" />
                            <Setter Property="TextWrapping" Value="Wrap" />
                            <Setter Property="LineStackingStrategy" Value="MaxHeight" />
                            <Setter Property="TextLineBounds" Value="Full" />
                            <Setter Property="OpticalMarginAlignment" Value="TrimSideBearings" />
                        </Style>
                        <Style
                            x:Key="BodyContentPresenterStyle"
                            BasedOn="{StaticResource BaseContentPresenterStyle}"
                            TargetType="ContentPresenter">
                            <Setter Property="FontFamily" Value="{ThemeResource PivotHeaderItemFontFamily}" />
                            <Setter Property="FontWeight" Value="{ThemeResource PivotHeaderItemThemeFontWeight}" />
                            <Setter Property="FontSize" Value="{ThemeResource PivotHeaderItemFontSize}" />
                        </Style>
                    </Grid.Resources>

                    <ContentPresenter
                        x:Name="ContentPresenter"
                        Margin="{TemplateBinding Padding}"
                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                        Content="{TemplateBinding Content}"
                        ContentTemplate="{TemplateBinding ContentTemplate}"
                        FontFamily="{TemplateBinding FontFamily}"
                        FontSize="{TemplateBinding FontSize}"
                        FontWeight="{TemplateBinding FontWeight}">
                        <ContentPresenter.RenderTransform>
                            <TranslateTransform x:Name="ContentPresenterTranslateTransform" />
                        </ContentPresenter.RenderTransform>
                    </ContentPresenter>
                    <VisualStateManager.VisualStateGroups>
                       ...

                            <VisualState x:Name="Selected">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="White" />
                                        <!--
                                            original value {ThemeResource
                                            SystemControlHighlightAltBaseHighBrush}
                                        -->
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid" Storyboard.TargetProperty="Background">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="#2196F3" />
                                        <!--  | #C7CECA |  -->
                                    </ObjectAnimationUsingKeyFrames>

                                    <!-- Here set the Grid bottom Border thickness -->
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid" Storyboard.TargetProperty="BorderThickness">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="0,0,0,1" /> 
                                    </ObjectAnimationUsingKeyFrames> 
                                </Storyboard>
                            </VisualState>
                           ...
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

更改Pivot Header SelectedItem样式

1 个答案: