C# 可选择的等间距图像网格

我正在尝试生成一个布局，它将向我显示一个网格图像，它将响应用户的点击。预期的布局将是其中之一

Image 1   Image 2     Image 3

Image 4   Image 5     Image 6

Image 7   Image 8     Image 9 

我当前的XAML布局是

 <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,10,10,10">
        <ListBox x:Name="PreviewListBox"
                 HorizontalAlignment="Left" 
                 Margin="2,10,0,10" 
                 Width="446">
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <toolkit:WrapPanel  Orientation="Horizontal"  />
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Grid HorizontalAlignment="Center">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="120"/>

                        </Grid.ColumnDefinitions>

                        <Image  Source="{Binding Path=firstImgUrl}" 
                                HorizontalAlignment="Center"
                               />
                        <TextBlock Text="{Binding Path=firstImgTitle}"
                                   HorizontalAlignment="Center"
                                   />

                        <Image  Source="{Binding Path=secondImgUrl}" 
                                HorizontalAlignment="Center"
                                />
                        <TextBlock Text="{Binding Path=secondImgTitle}" 
                                   HorizontalAlignment="Center"
                                    />

                        <Image  Source="{Binding Path=thirdImgUrl}" 
                                HorizontalAlignment="Center"
                                />
                        <TextBlock Text="{Binding Path=thirdImgTitle}" 
                                   HorizontalAlignment="Center"
                                  />
                    </Grid>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

    </Grid>

---

目前，显示的项目似乎只有最后插入到

列表中的项目。
我不太清楚为什么要在网格中一次显示3个图像，但如果不为每个项目添加行，它们只会显示在彼此的顶部
 首先，您必须在网格中定义三（3）行和三（3）列。然后为每个图像指定它应该位于的列和行。
像这样

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,10,10,10">
    <ListBox x:Name="PreviewListBox"
             HorizontalAlignment="Left" 
             Margin="2,10,0,10" 
             Width="446">
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <toolkit:WrapPanel  Orientation="Horizontal"  />
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
        <ListBox.ItemTemplate>
            <DataTemplate>
                <Grid HorizontalAlignment="Center">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition />
                        <ColumnDefinition />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>

                    <Grid.RowDefinitions>
                        <RowDefinition />
                        <RowDefinition />
                        <RowDefinition />
                    </Grid.RowDefinitions>

                    <Image  Source="{Binding Path=firstImgUrl}" 
                            HorizontalAlignment="Center"
                           Grid.Row="0" Grid.Column="1"/>
                    <TextBlock Text="{Binding Path=firstImgTitle}"
                               HorizontalAlignment="Center"
                           Grid.Row="0" Grid.Column="1"
                               />

                    <Image  Source="{Binding Path=secondImgUrl}" 
                            HorizontalAlignment="Center"
                           Grid.Row="0" Grid.Column="2"
                            />
                    <TextBlock Text="{Binding Path=secondImgTitle}" 
                               HorizontalAlignment="Center"
                           Grid.Row="0" Grid.Column="2"
                                />

                    <Image  Source="{Binding Path=thirdImgUrl}" 
                            HorizontalAlignment="Center"
                           Grid.Row="0" Grid.Column="3"
                            />
                    <TextBlock Text="{Binding Path=thirdImgTitle}" 
                               HorizontalAlignment="Center"
                           Grid.Row="0" Grid.Column="3"
                              />
                </Grid>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

</Grid>