Question

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

这是我想要实现的目标：

Here's what I'm trying to achieve.

Answer 1

如何使pivot / tabs标题具有相同的宽度并拉伸整个宽度

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

代码示例如下：

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

结果：

如何使Windows 10 pivot / tab标题全屏显示

1 个答案: