The following forum(s) are migrating to a new home on Microsoft Q&A (Preview): Developing Universal Windows apps!

Ask new questions on Microsoft Q&A (Preview).
Interact with existing posts until December 13, 2019, after which content will be closed to all new and existing posts.

Learn More

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

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



    Wednesday, July 15, 2015 9:31 AM

Answers

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



    Thursday, July 16, 2015 4:44 AM
    Owner

All replies

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



    Thursday, July 16, 2015 4:44 AM
    Owner
  • As far as I know that the pivot header is a fixed height and can’t be changed. 
    Thursday, July 16, 2015 12:26 PM
  • 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

    Thursday, July 16, 2015 6:12 PM
  • @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.
    Friday, July 17, 2015 4:06 AM
  • 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.






    Friday, July 17, 2015 9:46 AM
    Owner
  • Thanks Amy for your help! :)
    Saturday, July 25, 2015 7:10 PM
  • 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


    Saturday, September 5, 2015 6:48 AM