How can I apply DataTemplate to each item in a Collection into the cells of a grid

Question

I have a Grid defined as such

<Grid DockPanel.Dock="Top"  x:Name="grdFilter" Margin="40 10">

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <StackPanel Grid.ColumnSpan="3" Grid.Row="5" Orientation="Horizontal" 
                Margin="5" HorizontalAlignment="Center">
        <Button Content="Apply" 
                Margin="0 0 2 0"
                Style="{StaticResource MyButtonStyle}"
                Command="{Binding ApplyFilterCommand}"/>
        <Button x:Name="btnCancelFilter" 
                Margin="2 0 0 0"
                Content="Cancel" 
                Style="{StaticResource MyButtonStyle}" 
                Click="btnCancelFilter_Click" />
    </StackPanel>
</Grid>

And an ObservableCollection<string> in my ViewModel that defines a list of strings to filter some data on. I want to present each item in the ObservableCollection in a separate cell in the Grid defined above using a checkbox and a label. I realize there is a finite number of possible cells; I'm not worried about that right now.

If I hard-code the items, I'm stuck repeating the definitions for the checkbox and label for every cell of the grid

<DockPanel Grid.Column="0" Grid.Row="0">
    <CheckBox x:Name="filterCheckbox"
              Command="SomeFilterCommand">
        <CheckBox.LayoutTransform>
            <ScaleTransform ScaleX="3" ScaleY="3"/>
        </CheckBox.LayoutTransform>
    </CheckBox>
    <Label Content="Filter 1" />
</DockPanel>

<DockPanel Grid.Column="1" Grid.Row="0">
    <CheckBox x:Name="filterCheckbox"
              Command="SomeFilterCommand">
        <CheckBox.LayoutTransform>
            <ScaleTransform ScaleX="3" ScaleY="3"/>
        </CheckBox.LayoutTransform>
    </CheckBox>
    <Label Content="Filter 2" />
</DockPanel>

etc... I thought maybe I could create a DataTemplate and somehow bash that into the Grid with some voodoo but I don't know how to do it or if it's even possible.

Here's my DataTemplate

<DataTemplate x:Key="FilterTemplate">
    <DockPanel>
        <CheckBox x:Name="filterCheckbox"
                    Tag="{Binding Mode=OneWay}"
                    Command="SomeFilterCommandFromBindings">
            <CheckBox.LayoutTransform>
                <ScaleTransform ScaleX="3" ScaleY="3"/>
            </CheckBox.LayoutTransform>
        </CheckBox>
        <Label Content="{Binding Mode=OneWay}" />
    </DockPanel>
</DataTemplate>

Is there any other way to load a collection of items into a grid cell-by-cell with a template? Or another control that I can use?

Answer 1

A grid can't be used as an ItemsPanel Template but a Uniform Grid can, which is not as flexible but usually does the job in these kinds of situations

<ItemsControl>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <UniformGrid Columns="3"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <DockPanel>
                <!-- Template here -->
            </DockPanel>
        </DataTemplate>
    </ItemsControl.ItemTemplate>        
</ItemsControl>

You can also use a ListBox or ListView, depending on the functionality required; ItemsControl doesn't have a scrollviewer or SelectedItem for example, but if you just need to display data then ItemxControl is the way to go.