UWP

Question

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

群组名称将是 header。

我已经更改了 SemanticZoom 组的默认样式 Header。太糟糕了，我仍然不知道如何更改 header 的高度。

截图：

header 的高度对我来说太高了

自定义语义缩放样式的代码

  <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 语义缩放代码

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

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>

输出

Answer 2

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

可以从 C:\Program Files (x86)\Windows Kits\DesignTime\CommonConfiguration\Neutral\UAP.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 - 语义缩放 Header 高度

UWP - SemanticZoom Header Height

xaml

semantic-zoom