How to make Windows 10 pivot/tab headers full width of screen

Question

How can I make the pivot/tabs header have each individual tab be the same width and stretch the full width of the pivot header and not extend off the screen (particularly for mo

Answer 1

How can I make the pivot/tabs header have each individual tab be the same width and stretch the full width

This might not be able to implemented by just setting the style of pivot. But this can be easily implemented by ViewTreeHelper class. We can try to calculate the width of each header item by actualwidth of the pivot header and the total header items count. And set the width manually, then the header items will stretch the full width.

Code example like follows:

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

Code behind:

 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;
     }
 }

For code of the custom user control TabHeader please reference the official sample.

And the result: