UWP Pivot:聚焦枢轴项目没有蓝色下划线

时间:2017-08-24 09:31:51

标签: xaml uwp uwp-xaml

有没有人知道为什么焦点枢轴项目的蓝色下划线不可见? xaml(在一个新创建的具有.NET核心2.0,VS 2017 15.3.2的空UWP应用程序中)很简单:

<Pivot>
    <PivotItem Header="Testt 1">Test 1</PivotItem>
    <PivotItem Header="Testt 2">Test 2</PivotItem>
    <PivotItem Header="Testt 3">Test 3</PivotItem>
</Pivot>

和MS说“默认情况下,对数据库标题的键盘焦点用下划线表示。” (https://docs.microsoft.com/en-us/windows/uwp/controls-and-patterns/tabs-pivot

启动后很少次,它出现在第一个枢轴项目上,但在点击另一个枢轴项目后消失了。

2 个答案:

答案 0 :(得分:3)

PivotHeaderItem的样式中,有一个Rectangle名为FocusPipe,它是您在键盘导航期间看到的焦点视觉效果。默认情况下,只有在Focused状态时才会显示。

如果您想让它可见,只需在VisibilityVisibleSelected州中将其SelectedPressed设置为SelectedPointerOver

<Application.Resources>
    <Style TargetType="PivotHeaderItem">
        <Setter Property="FontSize"
                Value="{ThemeResource PivotHeaderItemFontSize}" />
        <Setter Property="FontFamily"
                Value="{ThemeResource PivotHeaderItemFontFamily}" />
        <Setter Property="FontWeight"
                Value="{ThemeResource PivotHeaderItemThemeFontWeight}" />
        <Setter Property="CharacterSpacing"
                Value="{ThemeResource PivotHeaderItemCharacterSpacing}" />
        <Setter Property="Background"
                Value="{ThemeResource PivotHeaderItemBackgroundUnselected}" />
        <Setter Property="Foreground"
                Value="{ThemeResource PivotHeaderItemForegroundUnselected}" />
        <Setter Property="Padding"
                Value="{ThemeResource PivotHeaderItemMargin}" />
        <Setter Property="Height"
                Value="48" />
        <Setter Property="VerticalContentAlignment"
                Value="Center" />
        <Setter Property="IsTabStop"
                Value="False" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="PivotHeaderItem">
                    <Grid x:Name="Grid"
                          Background="{TemplateBinding Background}"
                          Padding="{TemplateBinding Padding}">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="SelectionStates">
                                <VisualStateGroup.Transitions>
                                    <VisualTransition From="Unselected"
                                                      To="UnselectedLocked"
                                                      GeneratedDuration="0:0:0.33" />
                                    <VisualTransition From="UnselectedLocked"
                                                      To="Unselected"
                                                      GeneratedDuration="0:0:0.33" />
                                </VisualStateGroup.Transitions>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                                       Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{ThemeResource PivotHeaderItemForegroundDisabled}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid"
                                                                       Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{ThemeResource PivotHeaderItemBackgroundDisabled}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Unselected" />
                                <VisualState x:Name="UnselectedLocked">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="ContentPresenterTranslateTransform"
                                                         Storyboard.TargetProperty="X"
                                                         Duration="0"
                                                         To="{ThemeResource PivotHeaderItemLockedTranslation}" />
                                        <DoubleAnimation Storyboard.TargetName="ContentPresenter"
                                                         Storyboard.TargetProperty="(UIElement.Opacity)"
                                                         Duration="0"
                                                         To="0" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Selected">
                                    <VisualState.Setters>
                                        <Setter Target="FocusPipe.Visibility"
                                                Value="Visible" />
                                    </VisualState.Setters>
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                                       Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{ThemeResource PivotHeaderItemForegroundSelected}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid"
                                                                       Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{ThemeResource PivotHeaderItemBackgroundSelected}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="UnselectedPointerOver">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                                       Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{ThemeResource PivotHeaderItemForegroundUnselectedPointerOver}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid"
                                                                       Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{ThemeResource PivotHeaderItemBackgroundUnselectedPointerOver}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="SelectedPointerOver">
                                    <VisualState.Setters>
                                        <Setter Target="FocusPipe.Visibility"
                                                Value="Visible" />
                                    </VisualState.Setters>
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                                       Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{ThemeResource PivotHeaderItemForegroundSelectedPointerOver}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid"
                                                                       Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{ThemeResource PivotHeaderItemBackgroundSelectedPointerOver}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="UnselectedPressed">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                                       Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{ThemeResource PivotHeaderItemForegroundUnselectedPressed}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid"
                                                                       Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{ThemeResource PivotHeaderItemBackgroundUnselectedPressed}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="SelectedPressed">
                                    <VisualState.Setters>
                                        <Setter Target="FocusPipe.Visibility"
                                                Value="Visible" />
                                    </VisualState.Setters>
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                                       Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{ThemeResource PivotHeaderItemForegroundSelectedPressed}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid"
                                                                       Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{ThemeResource PivotHeaderItemBackgroundSelectedPressed}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="FocusStates">
                                <VisualState x:Name="Focused">
                                    <VisualState.Setters>
                                        <Setter Target="FocusPipe.Visibility"
                                                Value="Visible" />
                                    </VisualState.Setters>
                                </VisualState>
                                <VisualState x:Name="Unfocused" />
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Grid.RenderTransform>
                            <TranslateTransform x:Name="ContentPresenterTranslateTransform" />
                        </Grid.RenderTransform>
                        <ContentPresenter x:Name="ContentPresenter"
                                          Content="{TemplateBinding Content}"
                                          ContentTemplate="{TemplateBinding ContentTemplate}"
                                          FontSize="{TemplateBinding FontSize}"
                                          FontFamily="{TemplateBinding FontFamily}"
                                          FontWeight="{TemplateBinding FontWeight}"
                                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                          OpticalMarginAlignment="TrimSideBearings" />
                        <Rectangle x:Name="FocusPipe"
                                   Fill="{ThemeResource PivotHeaderItemFocusPipeFill}"
                                   Height="2"
                                   VerticalAlignment="Bottom"
                                   HorizontalAlignment="Stretch"
                                   Visibility="Collapsed" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Application.Resources>

答案 1 :(得分:0)

一个简单的答案是:

<SolidColorBrush x:Key="PivotHeaderItemSelectedPipeFill" Color="Yellow"/>

黄色下划线。