Покажу пример, пошагово, с использованием MVVM, без сторонних библиотек, только хардкор
Создаю класс вьюмодели, реализую интерфейс INotifyPropertyChanged
public class MainViewModel : INotifyPropertyChanged
{
private int width;
private int height;
public event PropertyChangedEventHandler? PropertyChanged;
private void OnPropertyChanged(string propertyName)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
public int Width
{
get => width;
set
{
width = value;
OnPropertyChanged(nameof(Width));
OnPropertyChanged(nameof(Items));
}
}
public int Height
{
get => height;
set
{
height = value;
OnPropertyChanged(nameof(Height));
OnPropertyChanged(nameof(Items));
}
}
public IEnumerable<int> Items => Enumerable.Range(1, Width * Height);
}
Подключаю ее к окну
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
DataContext = new MainViewModel();
}
}
Делаю разметку интерфейса для создания адаптивных прямоугольников, для развлечения добавил изменение количества этих прямоугольников прямо в интерфейсе.
<Window x:Class="WpfApp5.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApp5"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800"
d:DataContext="{d:DesignInstance local:MainViewModel}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Width:" Margin="5" FontWeight="Bold"/>
<TextBox Width="100" Margin="5" MaxLength="2" Text="{Binding Width, UpdateSourceTrigger=PropertyChanged}"/>
<TextBlock Text="Height:" Margin="5" FontWeight="Bold"/>
<TextBox Width="100" Margin="5" MaxLength="2" Text="{Binding Height, UpdateSourceTrigger=PropertyChanged}"/>
</StackPanel>
<ItemsControl ItemsSource="{Binding Items}" Grid.Row="1" >
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border BorderThickness="4" BorderBrush="#add8e6" Margin="3">
<TextBlock Text="{Binding}" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="20"/>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Rows="{Binding Height}" Columns="{Binding Width}"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</Grid>
</Window>
Вот и всё, если вы имеете дело с коллекциями, надо подружиться с соответствующими контролами, и самый базовый и простой из них - ItemsControl. Ну и панели разные Grid, StackPanel, DockPanel, WrapPanel, UniformGrid так же помогут удобно верстать интерфейс.
Я понимаю, что XAML выглядит с первого взгляда страшно, но его освоение того стоит. Про MVVM даже говорить ничего не буду, так как уже много раз говорил. :)
Итого я написал пример и этот ответ за 15 минут. При этом это так же легко дорабатывается, чтобы внутрь прямоугольников засунуть то что нужно. Просто заменив текстблок на что-то другое, а во вьюмодели просто поместить какую-то коллекцию с данными, текстом, картинками, без разницы.
Вот еще пара примеров работы с интерфейсом.
