Question

我目前正在为Windows UWP应用程序实现SemanticZoom。如您所知，项目将被分组到不同的部分（例如，A组，B组等）

组名称将是标题。

我更改了SemanticZoom Group Header的默认样式。太糟糕了，我仍然无法弄清楚如何改变标题的高度。

截图：

标题的高度太高，不符合我的口味

自定义SemanticZoom样式的代码

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

SemanticZoom的XAML代码

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

期待您的帮助。

Answer 1

我使用的是listview而不是gridview，你必须做三次调整 1）改变最小高度和高度 2）改变网格的高度，如下所示 3）更改文本块字体大小也突出显示

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

和，

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

根据您当前设定的要求更改高度到30看起来也很好调整文本块的字体大小

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

<强>输出

Answer 2

您应为自定义模板设置几个属性： MinHeight 和填充。

可以从C：\ Program Files（x86）\ Windows Kits \ 10 \ DesignTime \ CommonConfiguration \ Neutral \ UAP \ 10.0.10240.0 \ Generic

找到默认的GridViewHeaderItem模板

从那里你可以找到你应该改变的事情：

这是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>

UWP - SemanticZoom标题高度

2 个答案: