具有可变大小项目的 UWP ListView答案

【问题标题】：UWP ListView with variable sized items具有可变大小项目的 UWP ListView
【发布时间】：2020-07-07 02:43:10
【问题描述】：

我正在使用 ListView 开发 UWP，并且正在努力实现一些基本功能。

我有一个水平 ListView，其中包含需要可变宽度的项目。并且宽度需要是动态的，因为我想根据它的内容展开或缩回它。准确地说，每个项目在 StackPanel 内都有多个矩形，我希望能够添加更多矩形，并且我希望项目的宽度呈指数增长。

现在，这些项目似乎具有相同且锁定的大小。如果我增加一个项目的内容，其他项目的宽度也会增加。

我是 UWP 新手，不知道如何实现这样的功能。

    <ListView Name="Grid"
              Grid.Row="0"
              HorizontalAlignment="Stretch" 
              BorderThickness="0"
              ItemsSource="{x:Bind Items, Mode=TwoWay}"
              ItemTemplateSelector="{StaticResource TemplateSelector}"
              ScrollViewer.HorizontalScrollMode="Enabled"
              ScrollViewer.VerticalScrollMode="Disabled"
              ScrollViewer.HorizontalScrollBarVisibility="Hidden"
              IsItemClickEnabled="True"
              CanDragItems = "False"
              CanDrag = "False"
              CanReorderItems = "False"
              AllowDrop = "False"
              ItemClick="Grid_ItemClick"
              SelectionChanged="Grid_SelectionChanged"
              SelectionMode="Single">

        <ListView.ItemsPanel>
            <ItemsPanelTemplate>
                <ItemsWrapGrid VerticalAlignment="Stretch"  HorizontalAlignment="Left"/>
            </ItemsPanelTemplate>
        </ListView.ItemsPanel>
        <ListView.ItemContainerStyle>
            <Style TargetType="ListViewItem">
                <Setter Property="Padding" Value="0"/>
                <Setter Property="Margin" Value="0"/>
                <Setter Property="BorderThickness" Value="0"/>
                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                <Setter Property="HorizontalAlignment" Value="Stretch" />
            </Style>
        </ListView.ItemContainerStyle>

【问题讨论】：

到目前为止您尝试过什么？您的项目模板是什么样的？你是如何添加额外的部分的？

标签： c# listview uwp

【解决方案1】：

您需要将 ItemsPanel 更改为 ItemsStackPanel，并将 Orientation 设置为 Horizontal。这是一个简单的示例：

XAML

<ListView Height="100"
          extensions:ListViewExtensions.AlternateColor="Red"
          ItemsSource="{x:Bind Items}"
          ScrollViewer.HorizontalScrollBarVisibility="Auto"
          ScrollViewer.HorizontalScrollMode="Auto"
          ScrollViewer.VerticalScrollBarVisibility="Disabled"
          ScrollViewer.VerticalScrollMode="Disabled">
    <ListView.ItemTemplate>
        <DataTemplate>
            <Grid Width="{Binding Width}">
            </Grid>
        </DataTemplate>
    </ListView.ItemTemplate>
    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <ItemsStackPanel Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
</ListView>

代码

Items = new ObservableCollection<Item>();
for (int i = 0; i < 20; i++)
{
    Items.Add(new Item { Index = i, Width = i * 10 });
}

你可以看到每个项目都有一个更宽的宽度

【讨论】：

注意：extensions:ListViewExtensions 来自 Windows 社区工具包
你是救生员！正如你所说，我刚刚添加了“ItemsStackPanel”并且它有效。我几乎放弃了，正要尝试没有 ListView 的其他东西。

【解决方案2】：

ListView 几乎不可能做到这一点。也许ItemRepeater 是你的控制权。或者您可以在 ScrollViewer 中使用 StackPanel（水平方向）。

【讨论】：