如何在UWP中的SemanticZoom.ZoomedInView中使用ItemsControl？

Question

我目前使用了包含SemanticZoom.ZoomedInView的{​​{1}}，但我想使用ListView代替ItemsConrol出于各种原因，主要原因是ListView根据内部数据，来自可变高度的行，与具有固定行高的ItemsControl不同。

但由于ListView仅采用ItemsControl类型元素，因此我无法使用SemanticZoom.ZoomedInView。那么我的其他选择是什么呢？

Answer 1

  

但我必须先了解行的大小吗？如果我需要文本内容并且每行的大小等于内容，会导致什么。

不，你没必要。我假设您为每个ListViewItem添加文字内容，如下所示：

<ListView x:Name="listView" />
<Button VerticalAlignment="Bottom" Margin="0,5" Content="Add Text Item to ListView" Click="Button_Click" />

代码背后的代码：

private static string RandomString(int Size)
{
    string input = "abcdefghijklmnopqrstuvwxyz0123456789";
    var chars = Enumerable.Range(0, Size)
                           .Select(x => input[new Random().Next(0, input.Length)]);
    return new string(chars.ToArray());
}

private void Button_Click(object sender, RoutedEventArgs e)
{
    listView.Items.Add(RandomString(new Random().Next(1, 1000)));
}

然后它会生成一个默认TextBlock来包含Text：

问题是TextBlock的属性设置为默认值或计算值：

这会使所有项目具有相同的大小，但原因与ListView控件无关，如果您添加如下文本内容：

private void Button_Click(object sender, RoutedEventArgs e)
{
    TextBlock tb = new TextBlock();
    tb.Text = RandomString(new Random().Next(1, 500));
    tb.TextWrapping = TextWrapping.Wrap;
    listView.Items.Add(tb);
}

然后你可以找到差异：

<强>更新

您可以像这样使用DataTemplate：

<ListView x:Name="listView" ItemsSource="{x:Bind Collection}">
    <ListView.ItemTemplate>
        <DataTemplate>
            <TextBlock TextWrapping="Wrap" Text="{Binding ItemText}" />
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

代码背后的代码：

private ObservableCollection<Model> Collection = new ObservableCollection<Model>();

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    for (int i = 0; i < 50; i++)
    {
        Collection.Add(new Model { ItemText = RandomString(new Random().Next(100, 500)) });
    }
}

public class Model
{
    public string ItemText { get; set; }
}

新渲染图片：