Uniform Grid in ItemPanel Template

Question

Say I have something like this code

<ItemsControl ItemsSource="{Binding Blabla}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <UniformGrid Rows="8" Columns="8"></UniformGrid>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
           <ItemsControl.ItemTemplate>

<Data Template>
    <Button Command="{Binding blablaComamnd}"></Button>
</DataTemplate>

From what I understand, the uniformgrid will display 64 buttons in a wrap-panel like order to the blabla command of the object inside the blalbla data structure.

Is there a way to specify which item goes to which coordinates in the grid such as based ideally on Binding found in the blabla object?

score 3 · Accepted Answer · answered Nov 11 '14 at 13:24

If you want to specify which item goes into which cell you need to use normal Grid and change ItemContainerStyle for ContentPresenter, which is items wrapper for ItemsControl, to bind Grid.Row and Grid.Column to your view model

<ItemsControl ItemsSource="{Binding Blabla}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition/>
                    <RowDefinition/>
                    <RowDefinition/>
                    <RowDefinition/>
                    <RowDefinition/>
                    <RowDefinition/>
                    <RowDefinition/>
                    <RowDefinition/>
                </Grid.RowDefinitions>
            </Grid>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Button Command="{Binding blablaComamnd}"></Button>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
    <ItemsControl.ItemContainerStyle>
        <Style TargetType="{x:Type ContentPresenter}">
            <Setter Property="Grid.Column" Value="{Binding Column}"/>
            <Setter Property="Grid.Row" Value="{Binding Row}"/>
        </Style>
    </ItemsControl.ItemContainerStyle>
</ItemsControl>

where Column and Row are properties of the same view model which contains blablaComamnd

Thanks a lot, this worked perfectly. Do you know what I could do if I wanted to bind the number of rows/columns to the ViewModel aswell? — Gabriel Asman, Nov 12 '14 at 14:40
There is no straight forward way to do it but you should be able to achieve it with [this](http://stackoverflow.com/questions/9000549/how-can-i-dynamically-add-a-rowdefinition-to-a-grid-in-an-itemspaneltemplate) question. — dkozl, Nov 12 '14 at 14:44

Uniform Grid in ItemPanel Template

1 Answers1