none
How to style a Pivot's HeaderClipper RRS feed

  • Question

  • Hi,

    I'm using a Pivot in my app and for esthetic reasons I thought it would look nice to center the Pivot's header on my page. I found a lot of references on the internet stating to change the Pivot's HeaderClipper ContentControl's HorizontalcontentAlignment property. But I cannot find or understand how to change it through styling my Pivot.

    I found some examples that required me to paste in around 150 lines of code, which to my understanding, is way to much definition for such a simple change.

    Anyone can help me out getting this to work?

    Monday, May 20, 2019 2:40 PM

Answers

  • Hi,

    Well, it's easy to change the Pivot's HeaderClipper ContentControl's HorizontalcontentAlignment property. But it does need a lot code. I'm not sure if the way you find is the same with this one. You need to get the style of the Pivot in your xaml. Find the Document Outline windows in your Visual Studio, then select the Pivot control. Right click on it and move your mouse to Edit Template, then choose Edit a Copy in the sub menu. It will create a Pivot style automatically. Then you could search the HeaderClipper control, just change the HorizontalcontentAlignment from Stretch to Center.

    Like this.

     <Style x:Key="PivotStyle1" TargetType="Pivot">
                 ......many style code here
                                                <ContentPresenter x:Name="LeftHeaderPresenter" ContentTemplate="{TemplateBinding LeftHeaderTemplate}" Content="{TemplateBinding LeftHeader}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
                                                <ContentControl x:Name="HeaderClipper" Grid.Column="1" HorizontalContentAlignment="Center" 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" 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" Fill="Transparent" HorizontalAlignment="Stretch" IsHitTestVisible="False" Control.IsTemplateFocusTarget="True" VerticalAlignment="Stretch"/>
                                                    </Grid>
                                                </ContentControl>
                           ...style code here
                    </Setter.Value>
                </Setter>
            </Style>

    Best regards,

    Roy


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    • Marked as answer by ZanByte Tuesday, May 21, 2019 2:14 PM
    Tuesday, May 21, 2019 2:47 AM
    Moderator