我想创建一个跨越一列中多行的WPF数据网格。像这样:
+-------+----------------+
| Name | Attributes |
+-------+----------------+
| | Horse Power |
| BMW +----------------+
| | Color |
+-------+----------------+
| | Weight |
| Ford +----------------+
| | Color |
+-------+----------------+
如何更改以下代码才能完成?
<DataGrid AutoGenerateColumns="False">
<DataGrid.Columns>
<DataGridTextColumn Header="Name" />
<DataGridTextColumn Header="Attributes" />
</DataGrid.Columns>
</DataGrid>
答案 0 :(得分:8)
尝试使用DataGridTemplateColumn
。我为数据绑定创建了样本测试类
public class Test
{
public Test(string name, string attribute1, string attribute2)
{
Name = name;
Attributes = new Attribute(attribute1, attribute2);
}
public string Name { get; set; }
public Attribute Attributes { get; set; }
}
public class Attribute
{
public Attribute(string attribute1, string attribute2)
{
Attribute1 = attribute1;
Attribute2 = attribute2;
}
public string Attribute1 { get; set; }
public string Attribute2 { get; set; }
}
xaml中的数据网格
<DataGrid AutoGenerateColumns="False" Name="dataGrid1" ItemsSource="{Binding}">
<DataGrid.Columns>
<DataGridTemplateColumn Header="Name" >
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Grid>
<TextBlock Text="{Binding Path=Name}" VerticalAlignment="Center" Margin="3,3,3,3"/>
</Grid>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTemplateColumn Header="Attributes" >
<DataGridTemplateColumn.CellTemplate>
<DataTemplate >
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50*"/>
<RowDefinition />
<RowDefinition Height="50*"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="{Binding Path=Attributes.Attribute1}" VerticalAlignment="Center" Margin="3,3,3,3"/>
<Line Grid.Row="1" Stroke="Black" Stretch="Fill" X2="1" VerticalAlignment="Center"/>
<TextBlock Grid.Row="2" Text="{Binding Path=Attributes.Attribute2}" VerticalAlignment="Center" Margin="3,3,3,3"/>
</Grid>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
填写代码隐藏
List<Test> list = new List<Test>();
//populate list with your data here
dataGrid1.DataContext = list;
答案 1 :(得分:3)
我设法实现了一个解决方案,通过三个级别的分组和一个小问题来完成您想要的任务,因为组标题可以滚动数据。
<Style x:Key="GroupItemStyle" TargetType="{x:Type GroupItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GroupItem}">
<StackPanel Orientation="Horizontal" >
<Border BorderThickness="0">
<Grid HorizontalAlignment="Center" VerticalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Border BorderThickness="1" MinWidth="150">
<Grid HorizontalAlignment="Center" VerticalAlignment="Center">
<ContentPresenter Content="{Binding Name}" >
</ContentPresenter>
</Grid>
</Border>
<Border BorderThickness="0" Grid.Column="1">
<Grid HorizontalAlignment="Center" VerticalAlignment="Center">
<ItemsPresenter/>
</Grid>
</Border>
</Grid>
</Border>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
和网格:
<DataGrid ItemsSource="{Binding GroupedData}" AutoGenerateColumns="False" MinRowHeight="25" CanUserAddRows="False" CanUserDeleteRows="False">
<DataGrid.GroupStyle>
<!-- First Group -->
<GroupStyle ContainerStyle="{StaticResource GroupItemStyle}">
<GroupStyle.Panel>
<ItemsPanelTemplate>
<DataGridRowsPresenter/>
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
<!-- Second Group -->
<GroupStyle ContainerStyle="{StaticResource GroupItemStyle}">
<GroupStyle.Panel>
<ItemsPanelTemplate>
<DataGridRowsPresenter/>
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
<!-- Third Group -->
<GroupStyle ContainerStyle="{StaticResource GroupItemStyle}">
<GroupStyle.Panel>
<ItemsPanelTemplate>
<DataGridRowsPresenter/>
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</DataGrid.GroupStyle>
<DataGrid.Columns>
...
</DataGrid.Columns>
</DataGrid>
答案 2 :(得分:0)
关于这个主题的另一篇有用的文章是http://www.mindstick.com/Articles/90371ed3-c0f7-49eb-ba2d-9d1f2c9b14e2/?Grid%20Control%20in%20WPF:
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Button x:Name="btn1" Content="First Button" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" />
<Button x:Name="btn2" Content="Second Button" Grid.Row="0" Grid.Column="2" />
<Button x:Name="btn3" Content="Thired Button" Grid.Row="1" Grid.Column="0" Grid.RowSpan="2" />
<Button x:Name="btn4" Content="Fourth Button" Grid.Row="1" Grid.Column="1" />
<Button x:Name="btn5" Content="Fifth Button" Grid.Row="1" Grid.Column="2" />
<Button x:Name="btn6" Content="Six Button" Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="2" />
请注意Grid.ColumnSpan
和Grid.RowSpan
属性。