動態生成元素的動態網格寬度

Question

以下代碼給出的結果是，我們根據計划在4個元素上看到了一個划分的Grid。 每列都填充有顏色。

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

為什么看不到結果？

在我看來，這種解決方案在下載更大的Grid寬度方面存在問題。

如果鍵入類型為mainGrid.Width = 200;的固定值mainGrid.Width = 200; 一切都會顯示。 窗口大小可以更動態地更改，其寬度等於上面的網格。 我需要在XAML版本中未使用的代碼中包含什么嗎？

Answer 1

ItemsControl不顯示Grid，因為它們沒有Children元素。 （例如，添加tb4.Children.Add(new TextBlock { Text = "100500" });您將看到Violet網格）。

發生這種情況是由於HorizontalAlignment="Left"和StackPanel as Items面板。 兩種設置都將最小寬度0排列到網格。

這有效：

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

我建議研究這些帖子以啟發動態Grid列：

Colin Eberhardt的Silverlight和WPF的簡化網格標記 （外部）

如何在ItemsPanelTemplate中向網格動態添加RowDefinition？