[UWP][XAML]How to increase pivot header height in UWP?

Question

I currently creating apps in UWP (Universal Windows Platform). I was using pivot control and it seems I couldn't change the pivot item header height! It stays at 68 pixels. I have no idea which element should I modify to change it.

See this image for better explanation : i.stack.imgur.com/Xtp0M.jpg

Any help would be appreciated! Thanks!

Answer 1

Hi Sangadji,

Welcome to the Developing Universal Windows apps forum!
Please read the sticky posts, especially the Guide to posting: subject line tags and Known Issues for Windows 10 SDK and Tools

If you want to to change the height of the PivotItem header, you need to modify the default style of the Pivot, please right click the Pivot control-->"Edit Template"-->"Edit a Copy...", then it will show you the default style of the Pivot control:

After that please navigate to the following style and modify it with the Height value which you want:

 <PivotHeaderPanel x:Name="StaticHeader" Height="200" Visibility="Collapsed"/>
        <PivotHeaderPanel x:Name="Header">
               <PivotHeaderPanel.RenderTransform>
                    <TransformGroup>
                         <CompositeTransform x:Name="HeaderTranslateTransform"/>
                         <CompositeTransform x:Name="HeaderOffsetTranslateTransform"/>
                     </TransformGroup>
         </PivotHeaderPanel.RenderTransform>
</PivotHeaderPanel>

Best Regards,
Amy Peng

---

We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
Click HERE to participate the survey.

Answer 2

As far as I know that the pivot header is a fixed height and can’t be changed. 

Answer 3

Hi Sangadji,

try below the sample code:

<Pivot>
            <Pivot.Title>
                <Grid>
                    <TextBlock Text="MY HEADER" FontSize="18"/>
                </Grid>
            </Pivot.Title>
            <Pivot.HeaderTemplate>
                <DataTemplate>
                    <Grid>
                        <TextBlock Text="{Binding}" FontSize="12"/>
                    </Grid>
                </DataTemplate>
            </Pivot.HeaderTemplate>
            <PivotItem Header="one"/>
            <PivotItem Header="two"/>
        </Pivot>

Thanks,

---

Pallam Madhukar Windows Phone Developer

Answer 4

@Pallam, if you set FontSize to be larger than 48, for example 60, you will see that part of words displayed. The header of the Pivot control has a fix height, as far as I can tell it can't be changed.

Answer 5

Hi Sangadji,

If you just want to change the Height of the PivotItem header, my first reply should work for you. But if you want to change the size of the control inside the HeaderTemplate, as @Victory said, the header of the PivotItem header has a fixed height, you can not set it to a very large value. Because setting the PivotItem header to any value is not good from a design perspective.
But if you are using the Data Binding for the PivotItemHeader, we can do it in the Code Behind by using the VisualTreeHelper to change the Height of the PivotHeaderItem, in this way we can let the content height size wich is inside the PivotItem header to any value which you wanted as following:
In the MainPage.xaml:

 <Pivot Name="MyPivot" Title="Pivot" Style="{StaticResource PivotStyle1}" Margin="0,0,0,69">
            <Pivot.HeaderTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding text}" FontSize="60"></TextBlock>
                </DataTemplate>
            </Pivot.HeaderTemplate>
            <PivotItem>
                <Grid/>
            </PivotItem>
 </Pivot>

In the MainPage.xaml.cs:

private void Page_Loaded(object sender, RoutedEventArgs e)
        {
            foreach (PivotHeaderItem test in FindVisualChildren<PivotHeaderItem>(MyPivot))
            {
                test.Height = 200;
            }
            
        }

//Find all children
        public 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;
                    }
                }
            }
        }

    

Best Regards,
Amy Peng

---

We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
Click HERE to participate the survey.

Answer 6

Thanks Amy for your help! :)

Answer 7

I ran into the same problem but didn't want to use the code behind option.

Using the new Live Tree Debugger in Visual Studio I found that the height comes from the PivotHeaderItem default style.

If you add a copy of that style at an appropriate scope you can set the height using Xaml and you won't need any code.

I blogged about this with a sample project.

---

http://blog.hompus.nl