Не отображаются элементы в ячейках грида при программном добавлении

Question

Я программно создаю поле состоящее из прямоугольников. В итоге на экране отображается только первый прямоугольник. Код:

            for (int i = 0; i < Height; i++)
            {
                rd.Add(new RowDefinition());
            }
            for (int j = 0; j < Width; j++)
            {
                cd.Add(new ColumnDefinition());
            }

            
            for (int j = 0; j < Width*Height; j++) {
                Rectangle rect = new Rectangle();
                rect.Fill = new SolidColorBrush(Color.FromRgb(173, 216, 230));
                rect.Opacity = 1;
                rect.Margin = new System.Windows.Thickness(4);
                rect.Width = 20;
                rect.Width = 20;
                MWindow.MainField.Children.Add(rect);
            }

Answer 1

Покажу пример, пошагово, с использованием 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 минут. При этом это так же легко дорабатывается, чтобы внутрь прямоугольников засунуть то что нужно. Просто заменив текстблок на что-то другое, а во вьюмодели просто поместить какую-то коллекцию с данными, текстом, картинками, без разницы.

Вот еще пара примеров работы с интерфейсом.

БЛОГ НА HUSL

Не отображаются элементы в ячейках грида при программном добавлении

Ответы (1 шт):