[英]Merge Cells in WPF DataGrid
我想創建一個跨越一列多行的WPF數據網格。 像這樣:
+-------+----------------+
| Name | Attributes |
+-------+----------------+
| | Horse Power |
| BMW +----------------+
| | Color |
+-------+----------------+
| | Weight |
| Ford +----------------+
| | Color |
+-------+----------------+
如何更改以下代碼才能完成?
<DataGrid AutoGenerateColumns="False">
<DataGrid.Columns>
<DataGridTextColumn Header="Name" />
<DataGridTextColumn Header="Attributes" />
</DataGrid.Columns>
</DataGrid>
嘗試使用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;
我設法實現了一個解決方案,通過三個級別的分組和一個小問題來完成你想要的工作,因為Group Headers與數據一起滾動。
<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>
關於這個主題的另一篇有用的文章是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
屬性。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.