Tile view with fixed column number, and with resizing adequately to main window size

Question

I am trying to create a tile view, the code below creates one, but when the window is resized, the space, between tile grows. And instead i would like to have the tiles grow with the window, i had look at quite few places, but i couldnt find a solution to it, is anybody able to help

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; }
}

user control

<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>

Main window

<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>

I'd like the tiles to grow as the window grow.

Answer 1

You need to set HorizontalContentAlignment and VerticalContentAlignment to Stretch on ListBoxItem so that it can grow based on available space. Otherwise it will be sized based on its content size. Set the values in ItemContainerStyle of ListBox.

<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>