如何使 Windows 10 枢轴/选项卡标题全屏显示

Question

如何使枢轴/选项卡标题具有相同的宽度并拉伸枢轴标题的整个宽度而不延伸到屏幕之外（特别是对于移动设备）？我还没有找到如何做到这一点的示例。

这是我想要达到的目标：

Answer 1

如何使枢轴/选项卡标题使每个单独的选项卡具有相同的宽度并拉伸整个宽度

这可能无法通过仅设置枢轴的style 来实现。但这可以通过ViewTreeHelper 类轻松实现。我们可以尝试通过pivot header的actualwidth和header item总数来计算每个header item的宽度。并手动设置宽度，然后标题项将拉伸整个宽度。

代码示例如下：

 <Pivot  x:Name="CustomPivot">     
       <Pivot.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="Gray" />
                <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseMediumBrush}" />
                <Setter Property="Padding" Value="{ThemeResource PivotHeaderItemMargin}" />
                <Setter Property="Height" Value="Auto" />
                <Setter Property="VerticalContentAlignment" Value="Center" />
                <Setter Property="IsTabStop" Value="False" />
                <Setter Property="RequestedTheme" Value="Dark" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="PivotHeaderItem">
                            <Grid x:Name="Grid" Background="{TemplateBinding Background}">
                                <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}"
                                    FontFamily="{TemplateBinding FontFamily}"
                                    FontSize="{TemplateBinding FontSize}"
                                    FontWeight="{TemplateBinding FontWeight}"
                                    Content="{TemplateBinding Content}"
                                    ContentTemplate="{TemplateBinding ContentTemplate}">
                                    <ContentPresenter.RenderTransform>
                                        <TranslateTransform x:Name="ContentPresenterTranslateTransform" />
                                    </ContentPresenter.RenderTransform>
                                </ContentPresenter>
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="SelectionStates">
                                        <VisualStateGroup.Transitions>
                                            <VisualTransition
                                                From="Unselected"
                                                GeneratedDuration="0:0:0.33"
                                                To="UnselectedLocked" />
                                            <VisualTransition
                                                From="UnselectedLocked"
                                                GeneratedDuration="0:0:0.33"
                                                To="Unselected" />
                                        </VisualStateGroup.Transitions>
                                        <VisualState x:Name="Disabled">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Unselected" />
                                        <VisualState x:Name="UnselectedLocked">
                                            <Storyboard>
                                                <DoubleAnimation
                                                    Duration="0"
                                                    Storyboard.TargetName="ContentPresenterTranslateTransform"
                                                    Storyboard.TargetProperty="X"
                                                    To="{ThemeResource PivotHeaderItemLockedTranslation}" />
                                                <DoubleAnimation
                                                    Duration="0"
                                                    Storyboard.TargetName="ContentPresenter"
                                                    Storyboard.TargetProperty="(UIElement.Opacity)"
                                                    To="0" />
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Selected">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid" Storyboard.TargetProperty="Background">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="#FF42424C" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="UnselectedPointerOver">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseMediumHighBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid" Storyboard.TargetProperty="Background">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="SelectedPointerOver">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseMediumHighBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid" Storyboard.TargetProperty="Background">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="UnselectedPressed">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseMediumHighBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid" Storyboard.TargetProperty="Background">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="SelectedPressed">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseMediumHighBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid" Storyboard.TargetProperty="Background">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Pivot.Resources>   
     <PivotItem>
         <PivotItem.Header>
             <local:TabHeader Glyph="&#xE719;" Label="item 1" />
         </PivotItem.Header>
         <TextBlock Text="Content content content" />
     </PivotItem>
     <PivotItem>
         <PivotItem.Header>
             <local:TabHeader Glyph="&#xE721;" Label="item 2" />
         </PivotItem.Header>
         <TextBlock Text="Content content content" />
     </PivotItem>
     <PivotItem>
         <PivotItem.Header>
             <local:TabHeader Glyph="&#xE723;" Label="item 3" />
         </PivotItem.Header>
         <TextBlock Text="Content content content" />
     </PivotItem>
 </Pivot>

后面的代码：

 private static IEnumerable<T> FindVisualChildren<T>(DependencyObject depObj) where T : DependencyObject
 {
     if (depObj != null)
     {
         for (int i = 0; i < VisualTreeHelper.GetChildrenCount(depObj); i++)
         {
             DependencyObject child = VisualTreeHelper.GetChild(depObj, i);
             if (child != null && child is T)
             {
                 yield return (T)child;
             }

             foreach (T childOfChild in FindVisualChildren<T>(child))
             {
                 yield return childOfChild;
             }
         }
     }
 }

 private void Page_Loaded(object sender, RoutedEventArgs e)
 {
     IEnumerable<PivotHeaderPanel> headerpanel = FindVisualChildren<PivotHeaderPanel>(CustomPivot);
     double totalwidth = headerpanel.ElementAt<PivotHeaderPanel>(0).ActualWidth;
     IEnumerable<PivotHeaderItem> items = FindVisualChildren<PivotHeaderItem>(CustomPivot);
     int headitemcount = items.Count();
     for (int i = 0; i < headitemcount; i++)
     {
         items.ElementAt<PivotHeaderItem>(i).Width = totalwidth / headitemcount;
     }
 }

自定义用户控件TabHeader的代码请参考official sample。

结果：