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.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" });，您将看到Violet网格。）

由于HorizontalAlignment="Left"和StackPanel作为项目面板而发生。两种设置都将最小宽度0排列为网格。

这有效：

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

我建议研究这些帖子，以获取动态网格列的灵感：

A Simplified Grid Markup for Silverlight and WPF by Colin Eberhardt（外部）

How can I dynamically add a RowDefinition to a Grid in an ItemsPanelTemplate?

动态生成元素的动态网格宽度

1 个答案: