Question

我试图在网格中添加18张图片，使其动态化我从ModelView中的文件夹中读取图片，创建每个图片的对象并通过XAML中的绑定添加它们。

我的xaml：

<Page.DataContext>
    <viewModel:HomeViewModel/>
</Page.DataContext>

<ItemsControl Name="flagList" ItemsSource="{Binding Path=CurrenCountries}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel>
                <WrapPanel.Resources>
                    <Style TargetType="{x:Type Rectangle}">
                        <Setter Property="Width" Value="10"/>
                        <Setter Property="Height" Value="10"/>
                        <Setter Property="Fill" Value="Black"/>
                    </Style>
                </WrapPanel.Resources>
            </WrapPanel>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>

    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition/>
                    <RowDefinition/>
                </Grid.RowDefinitions>
                    <Image Grid.Row="0" Margin="5,5" Source="{Binding Path=Photo}" />
                <TextBlock Grid.Row="1" Text="{Binding Title}" HorizontalAlignment="Center"/>
                </Grid>
            </Grid>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

以下是这样的：

我希望它看起来如何//很好并且伸展=）

有人有什么建议吗？ :)谢谢！

Answer 1

试试这个：

    <ItemsControl Name="flagList" ItemsSource="{Binding Path=CurrenCountries}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <UniformGrid Rows="3" Columns="6" />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>

        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <WrapPanel Orientation="Vertical">
                    <Image Grid.Row="0" Margin="5,5" Source="{Binding Path=Photo}" Stretch="UniformToFill" />
                    <TextBlock Grid.Row="1" Text="{Binding Title}" HorizontalAlignment="Center"/>
                </WrapPanel>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>

Wrappanel项目仅填充页面的一半

1 个答案: