Wrappanel项目仅填充页面的一半

时间:2016-02-18 14:37:47

标签: c# wpf xaml mvvm wrappanel

我试图在网格中添加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>

以下是这样的: enter image description here

我希望它看起来如何//很好并且伸展=) enter image description here

有人有什么建议吗? :)谢谢!

1 个答案:

答案 0 :(得分: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>