以下代码给出了我们根据计划在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版本中未使用的代码中包含任何内容吗?
答案 0 :(得分:2)
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?