[SOLVED] How can I use a ListView horizontally to show items of varying width?

How can I use a ListView horizontally to show items of varying width?

I have a ListView whose ItemsSource is a collection of strings. The collection of strings, as you might expect, are of varying lengths. My goal is to display those strings in the listView horizontally.

There are many examples of using a ListView horizontally so that part was easy. I achieved that by specifying a Horizontal StackPanel as the ItemsPanelTemplate...

My ListView xaml:

 <ListView x:Name="myListView">
  <ListView.ItemsPanel>
    <ItemsPanelTemplate>
      <StackPanel Orientation="Horizontal"/>
    </ItemsPanelTemplate>
  </ListView.ItemsPanel>
  <ListView.View>
    <GridView>
      <GridViewColumn>
        <GridViewColumn.CellTemplate>
          <DataTemplate>
            <StackPanel Orientation="Horizontal">
              <Button Click="Button_Click" FontSize="10" Foreground="Salmon"  BorderThickness="0" Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}" Content="x" Background="Transparent" />
              <Label FontSize="10" Foreground="SteelBlue" Content="{Binding}"/>
            </StackPanel>
          </DataTemplate>
        </GridViewColumn.CellTemplate>
      </GridViewColumn>
    </GridView>
  </ListView.View>
</ListView>

What I am trying to display:

[This is a string] [This is also a string] [abc] [Look at me]

What my xaml displays:

[This i] [This i] [abc   ] [Look a]

I can give my GridviewColumn a set width, and get something like this:

[This is a string  ][This is also a string] [abc           ][Look at me        ]

I can also set the Column width to Auto which will make it as big as the widest item... but I'd really like it to conserve space and put them side by side at their true width.

I've done a lot of research without success, any ideas?

Solution

I am not sure how to achieve this in ListView. But i have tried using ListBox it works well. Refer below code.

<ListBox x:Name="myListView">
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel Orientation="Horizontal"/>
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
        <ListBox.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <Button Click="Button_Click" FontSize="10" Foreground="Salmon"
                            BorderThickness="0" Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}" Content="x" Background="Transparent" />
                    <Label FontSize="10" Foreground="SteelBlue" Width="Auto" Content="{Binding}"/>
                </StackPanel>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>