locked
Multi-Column ItemsControl

    Question

  • I have an ItemsControl with data I want to display in 2 columns. The width of the columns and the number of items is unknown. If I were to hardcode this to look the way I want using a Grid, it would look something like this:

    <Grid>
    	<Grid.RowDefinitions>
    		<RowDefinition Height="Auto"/>
    		<RowDefinition Height="Auto"/>
    		<RowDefinition Height="Auto"/>
    		<RowDefinition Height="Auto"/>
    		<RowDefinition Height="Auto"/>
    	</Grid.RowDefinitions>
    	<Grid.ColumnDefinitions>
    		<ColumnDefinition Width="Auto"/>
    		<ColumnDefinition Width="Auto"/>
    	</Grid.ColumnDefinitions>
    	<TextBlock Grid.Row="0" Grid.Column="0" Text="Item 0 0"/>
    	<TextBlock Grid.Row="0" Grid.Column="1" Text="Item 0 1"/>
    	<TextBlock Grid.Row="1" Grid.Column="0" Text="Item 1 0"/>
    	<TextBlock Grid.Row="1" Grid.Column="1" Text="Item 1 1"/>
    	<TextBlock Grid.Row="2" Grid.Column="0" Text="Item 2 0"/>
    	<TextBlock Grid.Row="2" Grid.Column="1" Text="Item 2 1"/>
    	<TextBlock Grid.Row="3" Grid.Column="0" Text="Item 3 0"/>
    	<TextBlock Grid.Row="3" Grid.Column="1" Text="Item 3 1"/>
    	<TextBlock Grid.Row="4" Grid.Column="0" Text="Item 4 0"/>
    	<TextBlock Grid.Row="4" Grid.Column="1" Text="Item 4 1"/>
    </Grid>
    I could, of course, set fixed widths in my ItemTemplate, but that would require knowing the widths beforehand. I also considered using 2 ItemsControls (one for each column), but this seemed inefficient. Is there any way to use an ItemsControl (or other control that I could bind my data to) to create columns without setting fixed widths or binding multiple times? Thanks.

    Nathan Sokalski njsokalski@hotmail.com http://www.nathansokalski.com/

    Monday, January 19, 2015 9:45 PM

All replies

  • Hi Nathan,

    You may need something like MaximumRowsOrColumns property for WrapGrid if the container has a big width, but I'm not able to know how would you handle the situation the container has a really small width.

    --James


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Tuesday, January 20, 2015 3:31 AM
    Moderator
  • Try this:
           <ListView >
                 <ListView.ItemContainerStyle >
                    <Style TargetType="ListViewItem">
                        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                    </Style>
                </ListView.ItemContainerStyle>
                <ListView.ItemTemplate >
                    <DataTemplate >
                        <Grid>
                            <Grid.ColumnDefinitions >
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                        </Grid>
                    </DataTemplate>
                </ListView.ItemTemplate> 
            </ListView>


    在現實生活中,你和誰在一起的確很重要,甚至能改變你的成長軌跡,決定你的人生成敗。 和什麼樣的人在一起,就會有什麼樣的人生。 和勤奮的人在一起,你不會懶惰; 和積極的人在一起,你不會消沈; 與智者同行,你會不同凡響; 與高人為伍,你能登上巔峰。

    Tuesday, January 20, 2015 7:55 PM
  • If I understand correctly, that would display every item as a Grid. However, because they would be separate Grids, the first column of the first Grid would not necessarily have the same width as the first column of the second Grid. Any other ideas? Thanks.

    Nathan Sokalski njsokalski@hotmail.com http://www.nathansokalski.com/

    Tuesday, January 20, 2015 8:07 PM