uwp pivot控件能否在右侧显示其标题选项卡?

uwp pivot控件能否在右侧显示其标题选项卡?,uwp,uwp-xaml,Uwp,Uwp Xaml,在UWP应用程序中使用NavigationView控件时,我们可以将导航窗格(选项卡)放置在右侧或顶部。对于透视控件,标题选项卡似乎只能显示在顶部。是否有办法在左侧或右侧显示其标题项目,并使轴项目垂直滚动 这是我想要的控件的视觉效果: uwp pivot控件能否在右侧显示其标题选项卡 当然,您可以编辑默认的Pivot样式,并找到StaticHeader,然后将水平对齐设置为右侧。我在下面发布了完整的样式,您可以直接使用它 <Style TargetType="Pivot">

在UWP应用程序中使用NavigationView控件时,我们可以将导航窗格(选项卡)放置在右侧或顶部。对于透视控件,标题选项卡似乎只能显示在顶部。是否有办法在左侧或右侧显示其标题项目,并使轴项目垂直滚动

这是我想要的控件的视觉效果:

uwp pivot控件能否在右侧显示其标题选项卡

当然,您可以编辑默认的
Pivot
样式,并找到
StaticHeader
,然后将
水平对齐设置为
右侧
。我在下面发布了完整的样式,您可以直接使用它

<Style TargetType="Pivot">
    <Setter Property="Margin" Value="0" />
    <Setter Property="Padding" Value="0" />
    <Setter Property="Background" Value="{ThemeResource PivotBackground}" />
    <Setter Property="IsTabStop" Value="False" />
    <Setter Property="ItemsPanel">
        <Setter.Value>
            <ItemsPanelTemplate>
                <Grid />
            </ItemsPanelTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Pivot">
                <Grid
                    x:Name="RootElement"
                    HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                    VerticalAlignment="{TemplateBinding VerticalAlignment}"
                    Background="{TemplateBinding Background}"
                    >
                    <Grid.Resources>
                                <Style x:Key="BaseContentControlStyle" TargetType="ContentControl">
                                    <Setter Property="FontFamily" Value="XamlAutoFontFamily" />
                                    <Setter Property="FontWeight" Value="SemiBold" />
                                    <Setter Property="Template">
                                        <Setter.Value>
                                            <ControlTemplate TargetType="ContentControl">
                                                <ContentPresenter
                                                    Margin="{TemplateBinding Padding}"
                                                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                                    Content="{TemplateBinding Content}"
                                                    ContentTemplate="{TemplateBinding ContentTemplate}"
                                                    ContentTransitions="{TemplateBinding ContentTransitions}"
                                                    OpticalMarginAlignment="TrimSideBearings"
                                                    />
                                            </ControlTemplate>
                                        </Setter.Value>
                                    </Setter>
                                </Style>
                                <Style
                                    x:Key="TitleContentControlStyle"
                                    BasedOn="{StaticResource BaseContentControlStyle}"
                                    TargetType="ContentControl"
                                    >
                                    <Setter Property="FontFamily" Value="{ThemeResource PivotTitleFontFamily}" />
                                    <Setter Property="FontWeight" Value="{ThemeResource PivotTitleThemeFontWeight}" />
                                    <Setter Property="FontSize" Value="{ThemeResource PivotTitleFontSize}" />
                                </Style>
                            </Grid.Resources>

                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>
                    <ContentControl
                        x:Name="TitleContentControl"
                        Margin="{StaticResource PivotPortraitThemePadding}"
                        Content="{TemplateBinding Title}"
                        ContentTemplate="{TemplateBinding TitleTemplate}"
                        IsTabStop="False"
                        Style="{StaticResource TitleContentControlStyle}"
                        Visibility="Collapsed"
                        />
                    <Grid Grid.Row="1">
                        <Grid.Resources>
                            <ControlTemplate x:Key="NextTemplate" TargetType="Button">
                                <Border
                                    x:Name="Root"
                                    Background="{ThemeResource PivotNextButtonBackground}"
                                    BorderBrush="{ThemeResource PivotNextButtonBorderBrush}"
                                    BorderThickness="{ThemeResource PivotNavButtonBorderThemeThickness}"
                                    >
                                    <VisualStateManager.VisualStateGroups>
                                        <VisualStateGroup x:Name="CommonStates">
                                            <VisualState x:Name="Normal" />
                                            <VisualState x:Name="PointerOver">
                                                <Storyboard>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root" Storyboard.TargetProperty="Background">
                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotNextButtonBackgroundPointerOver}" />
                                                    </ObjectAnimationUsingKeyFrames>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root" Storyboard.TargetProperty="BorderBrush">
                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotNextButtonBorderBrushPointerOver}" />
                                                    </ObjectAnimationUsingKeyFrames>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Arrow" Storyboard.TargetProperty="Foreground">
                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotNextButtonForegroundPointerOver}" />
                                                    </ObjectAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </VisualState>
                                            <VisualState x:Name="Pressed">
                                                <Storyboard>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root" Storyboard.TargetProperty="Background">
                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotNextButtonBackgroundPressed}" />
                                                    </ObjectAnimationUsingKeyFrames>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root" Storyboard.TargetProperty="BorderBrush">
                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotNextButtonBorderBrushPressed}" />
                                                    </ObjectAnimationUsingKeyFrames>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Arrow" Storyboard.TargetProperty="Foreground">
                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotNextButtonForegroundPressed}" />
                                                    </ObjectAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </VisualState>
                                        </VisualStateGroup>
                                    </VisualStateManager.VisualStateGroups>
                                    <FontIcon
                                        x:Name="Arrow"
                                        HorizontalAlignment="Center"
                                        VerticalAlignment="Center"
                                        FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                        FontSize="12"
                                        Foreground="{ThemeResource PivotNextButtonForeground}"
                                        Glyph="&#xE0E3;"
                                        MirroredWhenRightToLeft="True"
                                        UseLayoutRounding="False"
                                        />
                                </Border>
                            </ControlTemplate>
                            <ControlTemplate x:Key="PreviousTemplate" TargetType="Button">
                                <Border
                                    x:Name="Root"
                                    Background="{ThemeResource PivotPreviousButtonBackground}"
                                    BorderBrush="{ThemeResource PivotPreviousButtonBorderBrush}"
                                    BorderThickness="{ThemeResource PivotNavButtonBorderThemeThickness}"
                                    >
                                    <VisualStateManager.VisualStateGroups>
                                        <VisualStateGroup x:Name="CommonStates">
                                            <VisualState x:Name="Normal" />
                                            <VisualState x:Name="PointerOver">
                                                <Storyboard>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root" Storyboard.TargetProperty="Background">
                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotPreviousButtonBackgroundPointerOver}" />
                                                    </ObjectAnimationUsingKeyFrames>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root" Storyboard.TargetProperty="BorderBrush">
                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotPreviousButtonBorderBrushPointerOver}" />
                                                    </ObjectAnimationUsingKeyFrames>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Arrow" Storyboard.TargetProperty="Foreground">
                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotPreviousButtonForegroundPointerOver}" />
                                                    </ObjectAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </VisualState>
                                            <VisualState x:Name="Pressed">
                                                <Storyboard>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root" Storyboard.TargetProperty="Background">
                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotPreviousButtonBackgroundPressed}" />
                                                    </ObjectAnimationUsingKeyFrames>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root" Storyboard.TargetProperty="BorderBrush">
                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotPreviousButtonBorderBrushPressed}" />
                                                    </ObjectAnimationUsingKeyFrames>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Arrow" Storyboard.TargetProperty="Foreground">
                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotPreviousButtonForegroundPressed}" />
                                                    </ObjectAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </VisualState>
                                        </VisualStateGroup>
                                    </VisualStateManager.VisualStateGroups>
                                    <FontIcon
                                        x:Name="Arrow"
                                        HorizontalAlignment="Center"
                                        VerticalAlignment="Center"
                                        FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                        FontSize="12"
                                        Foreground="{ThemeResource PivotPreviousButtonForeground}"
                                        Glyph="&#xE0E2;"
                                        MirroredWhenRightToLeft="True"
                                        UseLayoutRounding="False"
                                        />
                                </Border>
                            </ControlTemplate>
                        </Grid.Resources>
                        <ScrollViewer
                            x:Name="ScrollViewer"
                            Margin="{TemplateBinding Padding}"
                            VerticalContentAlignment="Stretch"
                            BringIntoViewOnFocusChange="False"
                            HorizontalScrollBarVisibility="Hidden"
                            HorizontalSnapPointsAlignment="Center"
                            HorizontalSnapPointsType="MandatorySingle"
                            Template="{StaticResource ScrollViewerScrollBarlessTemplate}"
                            VerticalScrollBarVisibility="Disabled"
                            VerticalScrollMode="Disabled"
                            VerticalSnapPointsType="None"
                            ZoomMode="Disabled"
                            >
                            <PivotPanel x:Name="Panel" VerticalAlignment="Stretch">
                                <Grid x:Name="PivotLayoutElement">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="Auto" />
                                        <RowDefinition Height="*" />
                                    </Grid.RowDefinitions>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto" />
                                        <ColumnDefinition Width="*" />
                                        <ColumnDefinition Width="Auto" />
                                    </Grid.ColumnDefinitions>
                                    <Grid.RenderTransform>
                                        <CompositeTransform x:Name="PivotLayoutElementTranslateTransform" />
                                    </Grid.RenderTransform>
                                    <ContentPresenter
                                        x:Name="LeftHeaderPresenter"
                                        HorizontalAlignment="Stretch"
                                        VerticalAlignment="Stretch"
                                        Content="{TemplateBinding LeftHeader}"
                                        ContentTemplate="{TemplateBinding LeftHeaderTemplate}"
                                        />
                                    <ContentControl
                                        x:Name="HeaderClipper"
                                        Grid.Column="1"
                                        HorizontalContentAlignment="Stretch"
                                        UseSystemFocusVisuals="{StaticResource UseSystemFocusVisuals}"
                                        >
                                        <ContentControl.Clip>
                                            <RectangleGeometry x:Name="HeaderClipperGeometry" />
                                        </ContentControl.Clip>
                                        <Grid Background="{ThemeResource PivotHeaderBackground}">
                                            <Grid.RenderTransform>
                                                <CompositeTransform x:Name="HeaderOffsetTranslateTransform" />
                                            </Grid.RenderTransform>
                                            <PivotHeaderPanel
                                                x:Name="StaticHeader"
                                                HorizontalAlignment="Right"
                                                Visibility="Collapsed"
                                                >
                                                <PivotHeaderPanel.RenderTransform>
                                                    <CompositeTransform x:Name="StaticHeaderTranslateTransform" />
                                                </PivotHeaderPanel.RenderTransform>
                                            </PivotHeaderPanel>
                                            <PivotHeaderPanel x:Name="Header">
                                                <PivotHeaderPanel.RenderTransform>
                                                    <CompositeTransform x:Name="HeaderTranslateTransform" />
                                                </PivotHeaderPanel.RenderTransform>
                                            </PivotHeaderPanel>
                                            <Rectangle
                                                x:Name="FocusFollower"
                                                HorizontalAlignment="Stretch"
                                                VerticalAlignment="Stretch"
                                                Control.IsTemplateFocusTarget="True"
                                                Fill="Transparent"
                                                IsHitTestVisible="False"
                                                />
                                        </Grid>
                                    </ContentControl>
                                    <Button
                                        x:Name="PreviousButton"
                                        Grid.Column="1"
                                        Width="20"
                                        Height="36"
                                        Margin="{ThemeResource PivotNavButtonMargin}"
                                        HorizontalAlignment="Left"
                                        VerticalAlignment="Top"
                                        Background="Transparent"
                                        IsEnabled="False"
                                        IsTabStop="False"
                                        Opacity="0"
                                        Template="{StaticResource PreviousTemplate}"
                                        UseSystemFocusVisuals="False"
                                        />
                                    <Button
                                        x:Name="NextButton"
                                        Grid.Column="1"
                                        Width="20"
                                        Height="36"
                                        Margin="{ThemeResource PivotNavButtonMargin}"
                                        HorizontalAlignment="Right"
                                        VerticalAlignment="Top"
                                        Background="Transparent"
                                        IsEnabled="False"
                                        IsTabStop="False"
                                        Opacity="0"
                                        Template="{StaticResource NextTemplate}"
                                        UseSystemFocusVisuals="False"
                                        />
                                    <ContentPresenter
                                        x:Name="RightHeaderPresenter"
                                        Grid.Column="2"
                                        HorizontalAlignment="Stretch"
                                        VerticalAlignment="Stretch"
                                        Content="{TemplateBinding RightHeader}"
                                        ContentTemplate="{TemplateBinding RightHeaderTemplate}"
                                        />
                                    <ItemsPresenter
                                        x:Name="PivotItemPresenter"
                                        Grid.Row="1"
                                        Grid.ColumnSpan="3"
                                        >
                                        <ItemsPresenter.RenderTransform>
                                            <TransformGroup>
                                                <TranslateTransform x:Name="ItemsPresenterTranslateTransform" />
                                                <CompositeTransform x:Name="ItemsPresenterCompositeTransform" />
                                            </TransformGroup>
                                        </ItemsPresenter.RenderTransform>
                                    </ItemsPresenter>
                                </Grid>
                            </PivotPanel>
                        </ScrollViewer>

                    </Grid>

                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="Orientation">
                            <VisualState x:Name="Portrait">

                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TitleContentControl" Storyboard.TargetProperty="Margin">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotPortraitThemePadding}" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Landscape">

                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TitleContentControl" Storyboard.TargetProperty="Margin">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotLandscapeThemePadding}" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>

                        </VisualStateGroup>
                        <VisualStateGroup x:Name="NavigationButtonsVisibility">
                            <VisualState x:Name="NavigationButtonsHidden" />
                            <VisualState x:Name="NavigationButtonsVisible">

                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="NextButton" Storyboard.TargetProperty="Opacity">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="1" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="NextButton" Storyboard.TargetProperty="IsEnabled">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="True" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PreviousButton" Storyboard.TargetProperty="Opacity">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="1" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PreviousButton" Storyboard.TargetProperty="IsEnabled">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="True" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="PreviousButtonVisible">

                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PreviousButton" Storyboard.TargetProperty="Opacity">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="1" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PreviousButton" Storyboard.TargetProperty="IsEnabled">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="True" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="NextButtonVisible">

                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="NextButton" Storyboard.TargetProperty="Opacity">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="1" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="NextButton" Storyboard.TargetProperty="IsEnabled">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="True" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>

                        </VisualStateGroup>
                        <VisualStateGroup x:Name="HeaderStates">
                            <VisualState x:Name="HeaderDynamic" />
                            <VisualState x:Name="HeaderStatic">

                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Header" Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="StaticHeader" Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>

                        </VisualStateGroup>

                    </VisualStateManager.VisualStateGroups>
                </Grid>

            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>