Search code examples
wpflistviewlayoutlistviewitem

WPF Listview Display

I'm trying to display a Listview items through RectangleBox (Which I managed to do using ControlTemplate)

My problem is the how the RectangleBox are being organised on the window. I'd like to display as many as I can on one line (Depending on the windows' width) and when one line is filled, go start a new one and so on. The organisation would be updated depending on the window's width after each resize:

Example

This might give a better idea of what I want, you see each RectangleBox (Labelled 1,2...) organisation on the window changing depending on its width.

Here is my current code in my MainWindow xaml:

<ListView Name="PlayerList" ItemsSource="{Binding Players}"> 
    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
             <UniformGrid/>
         </ItemsPanelTemplate>
    </ListView.ItemsPanel>
</ListView>

Having the following Style applied:

<Style TargetType="ListViewItem">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ListViewItem}">
                <GroupBox Header="{Binding Name}" Width="250" Height="125" Name="Disp" HorizontalAlignment="Left">
                    <GroupBox.HeaderTemplate>
                            <DataTemplate>
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock Text="{Binding}" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="5,0,0,0" TextAlignment="Right"></TextBlock>
                                </StackPanel>
                            </DataTemplate>
                        </GroupBox.HeaderTemplate>
                        <StackPanel Orientation="Vertical">
                            <TextBlock Text="{Binding Char}"/>
                            <TextBlock Text="{Binding Item}"/>
                        </StackPanel>
                    </GroupBox>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

But so far, the UniformGrid was just a failled attempt, I've been looking around but couldn't really find a solution. Hopefully it was just me being dumb and missing something obvious D:

Thanks for the help.

Solution

  • Thanks for few comments.

    WrapPanel was indeed the right way, just didn't think of it :P I just needed to add the following property:

    ScrollViewer.HorizontalScrollBarVisibility="Disabled"

    To my listview in order to avoid all the items to stack on one line.