UWP - SemanticZoom Header Height

Question

I am currently implementing SemanticZoom for a Windows UWP app. As you may know, items will be grouped into different section (e.g. Group A, Group B, etc.)

The Group name will be the header.

I have changed the default style for SemanticZoom Group Header. Too bad I still can't figure out how to change the height of the header.

Screenshot:

The height of the header is too high for my taste

The Code for the custom SemanticZoom Style

  <Style TargetType="GridViewHeaderItem">
            <Setter Property="FontFamily" Value="Segoe UI" />
            <Setter Property="Background" Value="#ff00fe"/>
            <Setter Property="HorizontalContentAlignment" Value="Left" />
            <Setter Property="VerticalContentAlignment" Value="Top" />
            <Setter Property="Height" Value="10"/>
            <Setter Property="UseSystemFocusVisuals" Value="True" />
            <Setter Property="Margin" Value="0 10 10 0"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="GridViewHeaderItem">
                        <StackPanel Background="{TemplateBinding Background}"
              BorderBrush="{TemplateBinding BorderBrush}"
              BorderThickness="{TemplateBinding BorderThickness}">
                            <ContentPresenter x:Name="ContentPresenter"
                      Margin="{TemplateBinding Padding}"
                      Content="{TemplateBinding Content}"
                      ContentTemplate="{TemplateBinding ContentTemplate}"
                      ContentTransitions="{TemplateBinding ContentTransitions}"
                      HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                      VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </StackPanel>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

XAML Code for the SemanticZoom

            <SemanticZoom >
            <SemanticZoom.ZoomedOutView>
                <GridView>
                    ...
                </GridView>
            </SemanticZoom.ZoomedOutView>
            <SemanticZoom.ZoomedInView>
                <GridView>
                    <GridView.ItemTemplate>
                        ....
                    </GridView.ItemTemplate>
                    <GridView.GroupStyle>
                        <GroupStyle>
                            <GroupStyle.HeaderTemplate>
                                <DataTemplate>
                                    <StackPanel Orientation="Vertical">
                                        <TextBlock Text='{Binding Key}' Foreground="Black" FontSize="38" />
                                    </StackPanel>
                                </DataTemplate>
                            </GroupStyle.HeaderTemplate>
                        </GroupStyle>
                    </GridView.GroupStyle>
                </GridView>
            </SemanticZoom.ZoomedInView>
        </SemanticZoom>

Looking forward to your help.

Answer 1

There's couple properties you should set for your custom template: MinHeight and Padding.

The default GridViewHeaderItem template can be found from C:\Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.10240.0\Generic

From there you can find the things you should change:

Here's the full default style for GridViewHeaderItem.

<!-- Default style for Windows.UI.Xaml.Controls.GridViewHeaderItem -->
<Style TargetType="GridViewHeaderItem">
    <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
    <Setter Property="FontSize" Value="{ThemeResource GridViewHeaderItemThemeFontSize}" />
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="Margin" Value="0,0,0,4"/>
    <Setter Property="Padding" Value="12,8,12,0"/>
    <Setter Property="HorizontalContentAlignment" Value="Left" />
    <Setter Property="VerticalContentAlignment" Value="Top" />
    <Setter Property="MinHeight" Value="{ThemeResource GridViewHeaderItemMinHeight}"/>
    <Setter Property="UseSystemFocusVisuals" Value="True" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="GridViewHeaderItem">
                <StackPanel Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}">
                    <ContentPresenter x:Name="ContentPresenter"
                                      Margin="{TemplateBinding Padding}"
                                      Content="{TemplateBinding Content}"
                                      ContentTemplate="{TemplateBinding ContentTemplate}"
                                      ContentTransitions="{TemplateBinding ContentTransitions}"
                                      HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                      VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    <Rectangle Stroke="{ThemeResource SystemControlForegroundBaseLowBrush}"
                               StrokeThickness="0.5"
                               Height="1"
                               VerticalAlignment="Bottom"
                               HorizontalAlignment="Stretch"
                               Margin="12,8,12,0"/>
                </StackPanel>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Answer 2

I am using listview instead of gridview, you have to do three adjustment 1) change minheight and height 2) change the height of grid as highlighted below 3) change the textblock font size also highlighted

<Style x:Key="MyHeaderStyle" TargetType="ListViewItem">
    <Setter Property="FontFamily" Value="Segoe UI" />            
    <Setter Property="HorizontalContentAlignment" Value="Left" />
    <Setter Property="VerticalContentAlignment" Value="Top" />
    <Setter Property="Height" Value="30" />
    <Setter Property="MinHeight" Value="30" />
    <Setter Property="UseSystemFocusVisuals" Value="True" />
    <Setter Property="Margin" Value="0,10,10,0"/>            
</Style>

and,

<SemanticZoom.ZoomedInView>
    <ListView ItemsSource="{Binding Source={StaticResource Collection}}" ItemContainerStyle="{StaticResource MyHeaderStyle}">
        <ListView.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">

Change the height according to your requirement currently i set to 30 looking fine also adjust font size of textblock

<!-- Adjust grid height -->
                     <Grid Name="AdjustmeGrid" Height="30" Margin="0,0,10,0" Width="370">
                         <Grid.ColumnDefinitions>
                             <ColumnDefinition Width="0.2*" />
                             <ColumnDefinition Width="0.8*" />
                         </Grid.ColumnDefinitions>
<!-- Adjust textblock fontsize -->                                          
                         <TextBlock Name="AdjustmeTextblock" Grid.Column="1" Text="{Binding Title}" VerticalAlignment="Center" Foreground="Black" FontSize="28" />
                     </Grid>
                 </StackPanel>                            
             </DataTemplate>
         </ListView.ItemTemplate>
         <ListView.GroupStyle>
             <GroupStyle>
                <GroupStyle.HeaderTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Vertical">
                            <TextBlock Text='{Binding Key}' Foreground="Black" FontSize="38" />
                        </StackPanel>
                    </DataTemplate>
                </GroupStyle.HeaderTemplate>
            </GroupStyle>
        </ListView.GroupStyle>
    </ListView>
</SemanticZoom.ZoomedInView>

Output