WPF Listview Display

Question

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.

I do not really understand your ControlTemplate for the ListViewItems. Could you provide some details of the data item type and how it should be visualized? Otherwise UniformGrid seems to be the right approach and it should work the way you used it. — Clemens
@Clemens UniformGrid is having some layout specifities that didn't fit what I wanted, by spacing items differently depending on their numbers and such. For the ControlTemplate, unsure what you wanted to see, I just overloaded the style while implementing RectangleBox (I did this in order to remove the highlight effect) — MagiKruiser

MagiKruiser MagiKruiser · Accepted Answer · 2013-12-01T13:33:38

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.

WPF Listview Display

1 Answers