Блог

Я пытаюсь создать макет, который покажет мне сетку изображений, которая будет реагировать на клики пользователя. Ожидаемый макет будет одним из

 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 элементы в источник элемента.

Я не совсем уверен, почему вы пытаетесь показать 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>