c# - 具有可变大小项目的 UWP ListView

Question

我正在使用 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>

Answer 1

您需要将 ItemsPanel 更改为 ItemsStackPanel，并将 Orientation 设置为 Horizo​​ntal。这是一个快速示例:

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 });
}

并且您可以看到每个项目都有更宽的宽度