縱向合併WPF DataGrid中的單元格

Question

我想在WPF中創建一個DataGrid，其中一些單元格將「合併在一起」（如果它們相似）。

例子：

+---------+------+-----+ 
| Country | Name | Age | 
+---------+------+-----+ 
|   | Lisa | 24 | 
+   +------+-----+ 
| Danmark | Per | 32 | 
+   +------+-----+ 
|   | Hans | 33 | 
+---------+------+-----+ 
| Germany | Mick | 22 | 
+---------+------+-----+ 

有沒有辦法實現這個使用DataGrid使用綁定？

非常感謝。

Answer 1

對不起，與其他東西bu got。

誘騙這樣的場景是使用形成在CollectionViewSource的Groups作爲DataGrid的ItemsSource。並且，使用DataGrid本身作爲Column的CellTemplate。

的XAML

<Window.Resources> 
     <CollectionViewSource x:Key="CvsKey"> 
      <CollectionViewSource.GroupDescriptions> 
       <PropertyGroupDescription PropertyName="Country"/> 
      </CollectionViewSource.GroupDescriptions> 
     </CollectionViewSource> 
    </Window.Resources> 

    <Grid> 
     <DataGrid x:Name="dg" Loaded="dg_Loaded" HorizontalScrollBarVisibility="Disabled" HeadersVisibility="All" Grid.Column="0" RowHeaderWidth="0" CanUserAddRows="False" AutoGenerateColumns="False" VerticalContentAlignment="Center" HorizontalContentAlignment="Center">    
      <DataGrid.Columns> 
       <DataGridTemplateColumn Header="Country" Width="75"> 
        <DataGridTemplateColumn.CellTemplate> 
         <DataTemplate>       
          <Grid> 
           <TextBlock VerticalAlignment="Center" Text="{Binding Name}"/> 
          </Grid> 
         </DataTemplate> 
        </DataGridTemplateColumn.CellTemplate> 
       </DataGridTemplateColumn> 
       <DataGridTemplateColumn Header="Name" Width="75"> 
        <DataGridTemplateColumn.CellTemplate> 
         <DataTemplate> 
          <DataGrid ItemsSource="{Binding Items}" IsReadOnly="True" AutoGenerateColumns="False" HeadersVisibility="None"> 
           <DataGrid.Columns> 
            <DataGridTemplateColumn Width="*"> 
             <DataGridTemplateColumn.CellTemplate> 
              <DataTemplate> 
               <TextBlock Text="{Binding Name}"/> 
              </DataTemplate> 
             </DataGridTemplateColumn.CellTemplate> 
            </DataGridTemplateColumn> 
           </DataGrid.Columns> 
          </DataGrid> 
         </DataTemplate> 
        </DataGridTemplateColumn.CellTemplate> 
      </DataGridTemplateColumn> 
      </DataGrid.Columns>    
     </DataGrid> 
    </Grid> 
</Window> 

DataGrid.Loaded event

private void dg_Loaded(object sender, RoutedEventArgs e) 
    { 
     var groups = (this.Resources["CvsKey"] as CollectionViewSource).View.Groups; 
     dg.ItemsSource = groups; 
    } 

這應該讓你開始。

輸出：

Answer 2

我創建了一個演示項目上github.com
輸出：

XAML代碼：網格與兩列和每個都包含一個DataGrid

<Grid> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="Auto" /> 
       <ColumnDefinition Width="Auto"/> 
      </Grid.ColumnDefinitions> 
      <DataGrid Name="basketNameDataGrid" AutoGenerateColumns="False" CanUserResizeRows="False" 
         CanUserAddRows="False"> 
       <DataGrid.RowStyle> 
        <Style TargetType="DataGridRow"> 
         <Setter Property="Height" Value="{Binding RowHeight}"></Setter> 
        </Style> 
       </DataGrid.RowStyle> 
       <DataGrid.Columns> 
        <DataGridTemplateColumn Header="Basket"> 
         <DataGridTemplateColumn.CellTemplate> 
          <DataTemplate> 
           <TextBlock Text="{Binding Name}" VerticalAlignment="Center"/> 
          </DataTemplate> 
         </DataGridTemplateColumn.CellTemplate> 
        </DataGridTemplateColumn> 
       </DataGrid.Columns> 
      </DataGrid> 
      <DataGrid Name="itemDataGrid" Grid.Column="1" AutoGenerateColumns="False" HeadersVisibility="Column" 
         CanUserResizeRows="False" CanUserAddRows="False"> 
       <DataGrid.RowStyle> 
        <Style TargetType="DataGridRow"> 
         <Setter Property="Height" Value="20"></Setter> 
        </Style> 
       </DataGrid.RowStyle> 
       <DataGrid.Columns> 
        <DataGridTemplateColumn Header="Item Name"> 
         <DataGridTemplateColumn.CellTemplate> 
          <DataTemplate> 
           <TextBlock Text="{Binding Name, Mode = OneWay}"/> 
          </DataTemplate> 
         </DataGridTemplateColumn.CellTemplate> 
         </DataGridTemplateColumn> 
        <DataGridTextColumn Header="Price" Binding="{Binding Price, Mode = OneWay}" CanUserSort="False"></DataGridTextColumn> 
       </DataGrid.Columns> 
      </DataGrid> 
     </Grid> 

C＃代碼 - 有三種類來構造數據。 （移除構造，以減少代碼行）

class Item 
    { 
     public Name {get;} 
     public Price {set;} 
    } 

    class Basket : List<Item> 
    { 
     public Name {get;} 
    } 

    class BasketCollection : List<Basket> 
    { 
    }   

代碼在後面MainWindow.cs - 填充數據，並分配給的DataGrid。

public MainWindow() 
{ 
    InitializeComponent(); 
    //// Get some data to show in View 
    var baskets = GetData(); 
    int rowHeight = 20; //// itemDataGrid row height is 20 in xaml 

    //// Create a list of annonymous type with properties Name an RowHeight. 
    //// RowHeight = Height of one row * number of items in current basket. 
    var basketNameData = baskets.Select(x => new { Name = x.Name, RowHeight = rowHeight * x.Count }); 

    //// Assign data to first DataGrid 
    basketNameDataGrid.ItemsSource = basketNameData.ToList(); 

    //// Get list of all Items in all baskets and assign as ItemsSource to second datagrid 
    itemDataGrid.ItemsSource = baskets.SelectMany(basket => basket).ToList(); 
} 

/// <summary> 
/// Gets some data to bind to view 
/// </summary> 
/// <returns>Basket Collection</returns> 
private BasketCollection GetData() 
{ 
    var baskets = new BasketCollection(); 

    var fruitBasket = new Basket("Fruit"); 
    fruitBasket.Add(new Item("Alphonso Mango", 80)); 
    fruitBasket.Add(new Item("Nagpur Orange", 10)); 
    fruitBasket.Add(new Item("Dragon Fruit", 50)); 

    var vegetableBasket = new Basket("Vegetable"); 
    vegetableBasket.Add(new Item("Brinjal", 5)); 
    vegetableBasket.Add(new Item("Broccoli", 5)); 
    vegetableBasket.Add(new Item("Onion", 3)); 

    baskets.Add(fruitBasket); 
    baskets.Add(vegetableBasket); 

    return baskets; 
} 

注：這種解決方案實際上不合並單元格，但創造這種視覺 effect.You可以試試這個。演示使用兩個DataGrid控件。 增加第一個DataGrid的行高以創建合併單元格效果。

備選：ReoGrid是MS Excel兼容的控制，它支持細胞merge/unmerge設有如Excel。 ReoGrid聲稱是免費和開源的。它不支持數據綁定，但它有support for DataTable。