Question

我正在尝试制作一个布局，向我展示一个响应用户点击的图像网格。预期的布局将是

之一

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>

目前看来，显示的唯一项目是最后插入List项目来源的项目。

Answer 1

我不完全确定你为什么要在网格中一次显示3个图像，但如果你不为每个项目添加行，它们就会显示在彼此之上。

Answer 2

首先，您必须在网格中定义三（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>

可选择均匀间隔的图像网格

2 个答案: