如何使列表视图项自动共享相同的高度和缩放比例

Question

我在MainWindow内的Grid中有一个ListView，它在ItemTemplate内部定义了DateTemplate，其中包括一个TextBlock，每个TextBlock都有不同的文本长度，有些很长，有些短。

应用程序需要适合不同的屏幕分辨率，即每个TextBlock的FontSize需要相应地自动缩放。

所以我用ViewBox包裹TextBlock，但问题是，短文本会比长文本获得更大的FontSize，我希望所有TextBlock都可以共享相同的FontSize并且可以自动缩放以适应不同的屏幕尺寸和分辨率，知道吗？

我的列表视图如下：

<ListView x:Name="specs" Margin="10 15 10 15" VerticalAlignment="Center" 
ScrollViewer.HorizontalScrollBarVisibility="Disabled" Background="Transparent" BorderThickness="0">
    <ListView.ItemTemplate>
        <DataTemplate>
            <Viewbox>
               <TextBlock Text="{Binding}" TextWrapping="Wrap" FontFamily="Kaiti Regular"/>
            </Viewbox>
         </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Answer 1

您可以使用共享大小组强制所有文本块的宽度与最宽的宽度相同，这反过来又会强制视图框以相同的方式缩放。

这里的关键内容是Grid.IsSharedSizeScope="True"在 ListView 上，并将 ViewBox 的内容放在带有 SharedSizeGroup="SomeArbitraryString" 的网格列中。在共享大小范围的给定父级下，特定命名的共享大小组中的所有网格列的宽度将与最宽的网格列相同(网格行和高度相同(。

<ListView 
    x:Name="specs" 
    Margin="10 15 10 15" 
    ScrollViewer.HorizontalScrollBarVisibility="Disabled" 
    ItemsSource="{Binding Words}"
    Grid.IsSharedSizeScope="True"
    >
    <ListView.ItemTemplate>
        <DataTemplate>
            <Viewbox>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" SharedSizeGroup="Text" />
                    </Grid.ColumnDefinitions>
                    <TextBlock 
                        Grid.Column="0"
                        Text="{Binding}" 
                        TextWrapping="Wrap" 
                        FontFamily="Kaiti Regular"
                        />
                </Grid>
            </Viewbox>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

我不相信这会解决整个问题，但它会让你更进一步。一般来说，它是 ItemsControls 中数据模板布局的一个非常有用的工具。