具有固定列号的平铺视图，并根据主窗口大小调整大小

Question

我正在尝试创建一个平铺视图，下面的代码创建了一个，但是当调整窗口大小时，平铺之间的空间会增加。相反，我想让瓷砖随窗户一起生长，我看了很多地方，但我找不到解决办法，有没有人能帮忙

public class MainWindowViewModel : INotifyPropertyChanged
{
    private ObservableCollection<PersonEntity> people ;
    public ObservableCollection<PersonEntity> People
    {
        get { return people; }
        set { people = value; OnPropertyChanged("People"); }
    }

    public MainWindowViewModel()
    {
        people = new ObservableCollection<PersonEntity>();
        AddPeople();
    }

    private void AddPeople()
    {
        for (int i = 0; i < 20; i++)
        {
            people.Add( new PersonEntity() {Id=1, FirstName="A person", LastName="with surname", Address= new Address() { Id=1, Street="Somwhere", Town="Big city"}});
            people.Add(new PersonEntity() { Id = 2, FirstName = "A second person", LastName = "with second surname", Address = new Address() { Id = 2, Street = "Somehwere else", Town = "Small village" } });
        }
    }

    public event PropertyChangedEventHandler PropertyChanged = delegate { };
    private void OnPropertyChanged(string property)
    {
        PropertyChanged(this, new PropertyChangedEventArgs(property));
    }
}




public class PersonEntity
{
    public int Id { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public Address Address { get; set; }
}

public class Address
{
    public int Id { get; set; }
    public string Street { get; set; }
    public string Town { get; set; }
}

用户控制

<UserControl x:Class="WpfApplication2.Views.PersonView"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         xmlns:localViewModel ="clr-namespace:WpfApplication2.ViewModels"
         mc:Ignorable="d" 
         d:DesignHeight="300" d:DesignWidth="300">
<UserControl.DataContext>
    <localViewModel:MainWindowViewModel/>
</UserControl.DataContext>
<UserControl.Resources>
    <Style TargetType="ListBox">
        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <UniformGrid  Columns="4" Grid.IsSharedSizeScope="True"/>
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <DataTemplate x:Key="MyImagesItemTemplate">
        <Grid>
            <Border BorderThickness="2" Background="LightSteelBlue" >
                <StackPanel Margin="0,0,15,0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                    <TextBlock Text="{Binding FirstName}" />
                    <TextBlock Text="{Binding LastName}" />
                    <TextBlock Text="{Binding Address.Street}" />
                </StackPanel>
            </Border>
        </Grid>
    </DataTemplate>
</UserControl.Resources>
<Grid>
    <ListBox ItemsSource="{Binding Path=People}" ItemTemplate="{StaticResource MyImagesItemTemplate}" ScrollViewer.HorizontalScrollBarVisibility="Disabled"/>
</Grid>

主窗口

<Window x:Class="WpfApplication2.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525"
    xmlns:localViewModel="clr-namespace:WpfApplication2.ViewModels"
    xmlns:localViews="clr-namespace:WpfApplication2.Views">
<Grid>
    <localViews:PersonView/>
</Grid>

我希望瓷砖随着窗口的增长而增长。

Answer 1

您需要在 ListBoxItem 上将 HorizontalContentAlignment 和 VerticalContentAlignment 设置为 Stretch以便它可以根据可用空间增长。否则它将根据其内容大小调整大小。设置ListBox的ItemContainerStyle中的值。

<ListBox ItemsSource="{Binding Path=People}"
         ItemTemplate="{StaticResource MyImagesItemTemplate}" 
         ScrollViewer.HorizontalScrollBarVisibility="Disabled">
   <ListBox.ItemContainerStyle>
      <Style TargetType="ListBoxItem">
         <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
         <Setter Property="VerticalContentAlignment" Value="Stretch"/>
      </Style>
   </ListBox.ItemContainerStyle>
</ListBox>