UWP ListView с элементами переменного размера

Question

Я работаю над UWP с ListView и пытаюсь реализовать некоторые базовые функции c.

У меня есть горизонтальный 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, установленным на 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 });
}

И вы можете видеть, что каждый элемент имеет более широкую ширину

Answer 2

Это вряд ли возможно с ListView. Может быть ItemRepeater для вас. Или вы можете использовать StackPanel (с горизонтальной ориентацией) внутри ScrollViewer.