将动态创建的组件添加到WPF网格

Question

我有一个WPF网格，需要将RadioButton排列成3列。单选按钮代表每个类别，由模型评估。我还在ViewModel中创建了一个UIElementCollection类型的属性。现在的挑战是将它们安排在网格中，即将行列值分配给每个。

MainWindow xaml：

<Window x:Class="WPFApplication.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WPFApplication"
        xmlns:ViewModels="clr-namespace:WPFApplication.ViewModels"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid Width="auto">
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <!-- The problem with this expander is that the rows are not dynamically added.
             Also, all radio buttons are selectable.-->
        <Expander Name="ExpanderProductCategory" Header="Product Categories" HorizontalAlignment="Left" Height="auto" Grid.Row="0" Grid.Column="0" Margin="0,0,0,0" VerticalAlignment="Top" Width="auto">
            <Expander.DataContext>
                <ViewModels:ProductCategoriesViewModel/>
            </Expander.DataContext>
            <ItemsControl ItemsSource="{Binding ProductCategories}">

                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <Grid x:Name="gridRegions" Margin="5,10,0,0" >
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"></ColumnDefinition>
                                <ColumnDefinition Width="*"></ColumnDefinition>
                                <ColumnDefinition Width="*"></ColumnDefinition>
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition></RowDefinition>
                                <RowDefinition></RowDefinition>

                            </Grid.RowDefinitions>
                        </Grid>

                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>

                <ItemsControl.ItemContainerStyle>
                    <Style TargetType="{x:Type FrameworkElement}">
                        <Setter Property="Grid.Row" Value="{Binding RowIndex}"/>
                        <Setter Property="Grid.Column" Value="{Binding ColumnIndex}"/>
                    </Style>
                </ItemsControl.ItemContainerStyle>

                <ItemsControl.ItemTemplate>                    
                    <DataTemplate>                        
                        <RadioButton Content="{Binding Name }" Grid.Row="{Binding RowIndex}" Grid.Column="{Binding ColumnIndex}" Margin="0,0,5,5" />
                    </DataTemplate>
                </ItemsControl.ItemTemplate>

            </ItemsControl>
        </Expander>

        <!-- The problem with this expander is that all radio buttons are selectable-->
        <Expander Name="ExpanderProductCategory2" Header="Product Categories Uniform Grid" HorizontalAlignment="Left" Height="auto" Grid.Row="1" Grid.Column="0" Margin="0,0,0,0" VerticalAlignment="Top" Width="auto">
            <Expander.DataContext>
                <ViewModels:ProductCategoriesViewModel/>
            </Expander.DataContext>
            <ItemsControl ItemsSource="{Binding ProductCategories}">

                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <UniformGrid>

                        </UniformGrid>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>

                <ItemsControl.ItemContainerStyle>
                    <Style TargetType="{x:Type FrameworkElement}">
                        <Setter Property="Grid.Row" Value="{Binding RowIndex}"/>
                        <Setter Property="Grid.Column" Value="{Binding ColumnIndex}"/>
                    </Style>
                </ItemsControl.ItemContainerStyle>

                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <RadioButton Content="{Binding Name}" Margin="0,0,5,5" />
                    </DataTemplate>
                </ItemsControl.ItemTemplate>

            </ItemsControl>
        </Expander>

    </Grid>
</Window>

ViewModel代码：

namespace WPFApplication.ViewModels
{
    class ProductCategoriesViewModel
    {
        private ProductCategory[] _productCategories = { new ProductCategory( "Home Appliances",0,0),
           new ProductCategory( "Personal Care",1,0),
            new ProductCategory("Groceries",2,0),
            new ProductCategory( "Apparels",0,1),
            new ProductCategory("Stationary",1,1),
            new ProductCategory("Toys",2,1),
            new ProductCategory("Kitchenware",0,2) };

        public ProductCategory[] ProductCategories
        {
            get { return _productCategories; }
        }

        private string[] _productCategoriesString = { "Home Appliances",
           "Personal Care",
            "Groceries",
            "Apparels",
            "Stationary",
            "Toys",
            "Kitchenware"};

        public string[] ProductCategoriesString
        {
            get { return _productCategoriesString; }
        }
    }
}

请建议我在WPF和MVVM中处理此案例的正确方法。