UWP ListView with variable sized items

user_1309934 0
Viewed 277

I'm working on UWP with ListView and I'm struggling to implement some basic features.

I have a horizontal ListView with items which need to have variable width. And the width needs to be dynamical, because I want to expand it or retract it based on it's content. To be precise, each item has a number of rectangles inside a StackPanel, I want to be able to add more rectangles, and I would expect the width of the item to increase exponentially.

Right now, the items seem the have equal and locked size. If I increase the content of an item, the other items have the same increased width.

I'm new to UWP, and I can't figure out how to implement such a feature.

    <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>
uwp listview c#
2 Answers

You'll want to change your ItemsPanel to be an ItemsStackPanel with Orientation set to Horizontal. Here's a quick sample:

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>

Code

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

And you can see that each item has a wider width enter image description here

user_10549610

That is hardly possible with ListView. Maybe ItemRepeater is control for you. Or you can use StackPanel (with horizontal orientation) inside ScrollViewer.

user_11547730
Related