Dynamic Grid width для динамически генерируемых элементов

Question

Следующий код дает результат, что мы видим разделенную сетку на 4 элемента согласно расписанию. Каждый столбец заполнен цветом.

<Grid Grid.Column="1" Background="#FF7E7738">
    <Grid Width="Auto">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*"/>
            <ColumnDefinition Width="1*"/>
            <ColumnDefinition Width="0.6*"/>
            <ColumnDefinition Width="1*"/>
        </Grid.ColumnDefinitions>
        <Grid Grid.Column="0" Background="Red"></Grid>
        <Grid Grid.Column="1" Background="Green"></Grid>
        <Grid Grid.Column="2" Background="Blue"></Grid>
        <Grid Grid.Column="3" Background="Pink"></Grid>
    </Grid>
</Grid>

Ниже я написал код, который должен делать то же самое.

public ObservableCollection<Grid> ConnectorItemsGridX { get; set; }

public void DrawConnectors()
{
    Grid mainGrid = new Grid();
    mainGrid.Width = Double.NaN;

    ColumnDefinition cd1 = new ColumnDefinition();
    cd1.Width = new GridLength(1, GridUnitType.Star);

    ColumnDefinition cd2 = new ColumnDefinition();
    cd2.Width = new GridLength(1, GridUnitType.Star);

    ColumnDefinition cd3 = new ColumnDefinition();
    cd3.Width = new GridLength(0.6, GridUnitType.Star);

    ColumnDefinition cd4 = new ColumnDefinition();
    cd4.Width = new GridLength(1, GridUnitType.Star);

    mainGrid.ColumnDefinitions.Add(cd1);
    mainGrid.ColumnDefinitions.Add(cd2);
    mainGrid.ColumnDefinitions.Add(cd3);
    mainGrid.ColumnDefinitions.Add(cd4);

    Grid tb1 = new Grid();
    tb1.Background = Brushes.Beige;

    Grid tb2 = new Grid();
    tb2.Background = Brushes.DarkSeaGreen;

    Grid tb3 = new Grid();
    tb3.Background = Brushes.MistyRose;

    Grid tb4 = new Grid();
    tb4.Background = Brushes.Violet;

    mainGrid.Children.Add(tb1);
    mainGrid.Children.Add(tb2);
    mainGrid.Children.Add(tb3);
    mainGrid.Children.Add(tb4);

    Grid.SetColumn(tb1, 0);
    Grid.SetColumn(tb2, 1);
    Grid.SetColumn(tb3, 2);
    Grid.SetColumn(tb4, 3);


    ConnectorItemsGridX = new ObservableCollection<Grid>();
    ConnectorItemsGridX.Add(mainGrid);
}

Код из файла XAMl для загрузки Grid.

<Grid Grid.Column="1" Background="#FF7E7738">
    <ItemsControl ItemsSource="{Binding ConnectorItemsGridX}" HorizontalAlignment="Left">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal"/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
    </ItemsControl>
</Grid>

Почему я не вижу результат?

Мне кажется, что такое решение имеет проблему с загрузкой ширины сетки, которая выше.

Если вы введете фиксированное значение типа mainGrid.Width = 200;, все отобразится. Размер окна может меняться более динамично, иметь ширину, равную приведенной выше сетке. Что мне нужно включить в код, который не используется в версии XAML?

Answer 1

ItemsControl не показывает сетки, потому что они не имеют дочерних элементов. (Например, добавьте строку tb4.Children.Add(new TextBlock { Text = "100500" });, и вы увидите Фиолетовую сетку).

Это происходит из-за HorizontalAlignment="Left" и StackPanel в качестве панели элементов. Обе настройки располагают минимальную ширину от 0 до сетки.

это работает:

<ItemsControl ItemsSource="{Binding ConnectorItemsGridX}" HorizontalAlignment="Stretch">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Grid />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
</ItemsControl>

Предлагаю изучить эти посты для вдохновения для динамических столбцов Grid:

Упрощенная разметка сетки для Silverlight и WPF Колин Эберхардт (внешний)

Как динамически добавить RowDefinition в сетку в шаблоне ItemsPanelTemplate?