0

我目前正在为 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>

期待您的帮助。

4

2 回答 2

0

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

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

输出

结果图像

于 2018-02-15T07:05:18.803 回答
0

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

可以从 C:\Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.10240.0\Generic 找到默认的 GridViewHeaderItem 模板

从那里你可以找到你应该改变的东西：

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>
于 2018-02-15T07:09:00.010 回答