UWP Create border for Pivot Header

Question

I am using pivot to create a menu with 3 options. The code is below.

<Pivot x:Name="menuPivot" Margin="0"  SelectedIndex="0" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Row="1" Grid.ColumnSpan="2" SelectionChanged="ListView_SelectionChanged">

        <PivotItem Header="Day" VerticalAlignment="Center" HorizontalAlignment="Center" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Margin="0,0,10,0" />
        <PivotItem Header="Week" VerticalAlignment="Center" HorizontalAlignment="Center" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Margin="0,0,10,0" />
        <PivotItem Header="Month" VerticalAlignment="Center" HorizontalAlignment="Center" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Margin="-1,0,0,0" Background="#FFFB0000" BorderBrush="{StaticResource currentThemeColor}" />
    </Pivot>

I need to achieve this look for the menu:

So far, I have changed the Pivots default style for Header with code below:

<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="Transparent" />
    <Setter Property="Foreground" Value="Gray" />
    <!-- original value {ThemeResource SystemControlForegroundBaseMediumBrush} -->
    <Setter Property="Padding" Value="{ThemeResource PivotHeaderItemMargin}" />
    <Setter Property="Height" Value="48" />
    <Setter Property="VerticalContentAlignment" Value="Center" />
    <Setter Property="HorizontalContentAlignment" Value="Center" />
    <Setter Property="IsTabStop" Value="False" />
    <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" TargetType="ContentPresenter" BasedOn="{StaticResource BaseContentPresenterStyle}">
                            <Setter Property="FontFamily" Value="{ThemeResource PivotHeaderItemFontFamily}" />
                            <Setter Property="FontWeight" Value="{ThemeResource PivotHeaderItemThemeFontWeight}" />
                            <Setter Property="FontSize" Value="{ThemeResource PivotHeaderItemFontSize}" />

                        </Style>
                    </Grid.Resources>
                    <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 SystemControlDisabledBaseMediumLowBrush}" />
                                    </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">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource currentThemeColor}" />
                                        <!-- original value {ThemeResource SystemControlHighlightAltBaseHighBrush} -->
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid" Storyboard.TargetProperty="Background">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" />
                                    </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>
                    <ContentPresenter x:Name="ContentPresenter" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" Margin="{TemplateBinding Padding}" FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}" FontWeight="{TemplateBinding FontWeight}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                        <ContentPresenter.RenderTransform>
                            <TranslateTransform x:Name="ContentPresenterTranslateTransform" />
                        </ContentPresenter.RenderTransform>
                    </ContentPresenter>

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

I get this look:

I can't figure out how to add borders like the ones on the first picture, and how to change the border color of the selected header?

Also, if you think that this can be done in an easier way using some other control than Pivot, that would be helpful as well.

Answer 1

You can add four Border in the PivotHeaderItem template like this:

<Style TargetType="PivotHeaderItem">
    <!--...-->
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="PivotHeaderItem">
                <Grid x:Name="Grid" Background="{TemplateBinding Background}" Width="100">
                    <!--...-->
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="SelectionStates">
                            <!--...-->
                            <VisualState x:Name="Selected">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                       Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Blue" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid"
                                       Storyboard.TargetProperty="Background">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RightLine"
                                       Storyboard.TargetProperty="Width">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="2" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SelectedLine"
                                       Storyboard.TargetProperty="Background">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Blue" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <!--...-->
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <ContentPresenter x:Name="ContentPresenter" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"
                                      Margin="{TemplateBinding Padding}" FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}"
                                      FontWeight="{TemplateBinding FontWeight}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                        <ContentPresenter.RenderTransform>
                            <TranslateTransform x:Name="ContentPresenterTranslateTransform" />
                        </ContentPresenter.RenderTransform>
                    </ContentPresenter>
                    <Border x:Name="TopLine" Height="3" Background="Blue" VerticalAlignment="Top" HorizontalAlignment="Stretch" />
                    <Border x:Name="BottomLine" Height="2" Background="LightGray" VerticalAlignment="Bottom" HorizontalAlignment="Stretch" />
                    <Border x:Name="RightLine" Width="1" Background="LightGray" VerticalAlignment="Center"
                            HorizontalAlignment="Right" Height="{TemplateBinding FontSize}" />
                    <Border x:Name="SelectedLine" Height="2" VerticalAlignment="Bottom" HorizontalAlignment="Stretch"
                            Background="LightGray" Margin="15,0,0,0" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

I commented part of code in the style for clear showing what I've modified, you can see that I gave a width to Grid for testing here, you can remove it.

I also modified the Selected Visual State, in order to change the Header's foreground, "Separator"'s width and my SelectedLine's background. Here is the rendering image of my style:

Answer 2

You could roll out your own control with a 3 (or 5 if you put separators in their own columns) column grid of RadioButtons at the top to show the headers. Looking at the default template it seems like it's pretty black box and you might be better off with your own. You could also just remove the headers from the default one and have a 3 column grid above the restyled Pivot.