none
How to merge datagrid cells in wpf? RRS feed

  • Question

  • Hi All,

    I am developing a WPF application, and I need to merge cells Horizontally IN THE DATAGRID at runtime.

    This is my initial datagrid.

     

     

    I want to merge the cells as shown in figure below.



    • Edited by Mozak104 Wednesday, January 11, 2012 10:46 AM
    Wednesday, January 11, 2012 10:36 AM

Answers

  • Use the DataTrigger in the DataGridRow style, and change the DataGridRow template:

    XAML:
    
    
    <Window x:Class="WpfApplication2.MainWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            Title="MainWindow" Height="350" Width="525">
        <Grid>
        <DataGrid ItemsSource="{Binding}" AutoGenerateColumns="False">
          <DataGrid.ItemContainerStyle>
            <Style TargetType="{x:Type DataGridRow}">
              <Style.Triggers>
                <DataTrigger Binding="{Binding IsMerged}" Value="True">
                  <Setter Property="Template">
                    <Setter.Value>
                      <ControlTemplate TargetType="{x:Type DataGridRow}">
                        <Border x:Name="DGR_Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
                          <SelectiveScrollingGrid>
                            <SelectiveScrollingGrid.ColumnDefinitions>
                              <ColumnDefinition Width="Auto"/>
                              <ColumnDefinition Width="*"/>
                            </SelectiveScrollingGrid.ColumnDefinitions>
                            <Border BorderBrush="Black" BorderThickness="0,0,1,1" Grid.Column="1">
                              <TextBlock>
                                <TextBlock.Inlines>
                                  <Run Text="Name: "/>
                                  <Run Text="{Binding Name}"/>
                                  <Run Text="Age: "/>
                                  <Run Text="{Binding Age}"/>
                                </TextBlock.Inlines>
                              </TextBlock>
                                
                            </Border>
                            <DataGridRowHeader SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical" Visibility="{Binding HeadersVisibility, ConverterParameter={x:Static DataGridHeadersVisibility.Row}, Converter={x:Static DataGrid.HeadersVisibilityConverter}, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}"/>
                          </SelectiveScrollingGrid>
                        </Border>
                      </ControlTemplate>
                    </Setter.Value>
                  </Setter>
                </DataTrigger>
              </Style.Triggers>
            </Style>
          </DataGrid.ItemContainerStyle>
          
          <DataGrid.Columns>
            <DataGridTextColumn Binding="{Binding Name}" Header="Name" Width="*"/>
            <DataGridTextColumn Binding="{Binding Age}" Header="Age" Width="*"/>
            <DataGridTextColumn Binding="{Binding Details }" Header="Details " Width="*"/>
          </DataGrid.Columns>
        </DataGrid>
      </Grid>
    </Window>
    
    

     

    C#:

      public partial class MainWindow : Window
      {
        public ObservableCollection<item> Items { get; set; }
        public MainWindow()
        {
          InitializeComponent();
          Items = new ObservableCollection<item>();
          for (int i = 0; i < 10; i++)
            Items.Add(new item());
          this.DataContext = Items;
        }
      }
      
      public class item
      {
        static int ID;
        public string Name { get; set; }
        public int Age { get; set; }
        public int Sex { get; set; }
        public string Details { get; set; }
        public bool IsMerged { get; set; }
        public item()
        {
          Name = "Name " + ID.ToString();
          Age = 20 + ID % 4;
          Details = "Details: for Name " + ID.ToString();
          IsMerged = (ID % 4 == 0);
          ID++;
        }
      }
    

     

    Sample download: https://skydrive.live.com/?cid=51b2fdd068799d15#cid=51B2FDD068799D15&id=51B2FDD068799D15%21902

    Sincerely,


    Bob Bao [MSFT]
    MSDN Community Support | Feedback to us
    Thursday, January 12, 2012 7:25 AM
    Moderator
  • Hi

    Mazak 104

    try below thread its somewhat related to your post may be solve your problem

    http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/1e414159-70f6-4be3-9be5-56e4f3278366/

     


    Harshad..... Always 4 U
    Wednesday, January 11, 2012 10:54 AM

All replies

  • Hi

    Mozak104

    can you plz explain briefly...


    Harshad..... Always 4 U
    Wednesday, January 11, 2012 10:42 AM
  • Thanks for the prompt response.

     

    Please see my updated question and Help me.

    Wednesday, January 11, 2012 10:48 AM
  • Hi

    Mazak 104

    try below thread its somewhat related to your post may be solve your problem

    http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/1e414159-70f6-4be3-9be5-56e4f3278366/

     


    Harshad..... Always 4 U
    Wednesday, January 11, 2012 10:54 AM
  • Use the DataTrigger in the DataGridRow style, and change the DataGridRow template:

    XAML:
    
    
    <Window x:Class="WpfApplication2.MainWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            Title="MainWindow" Height="350" Width="525">
        <Grid>
        <DataGrid ItemsSource="{Binding}" AutoGenerateColumns="False">
          <DataGrid.ItemContainerStyle>
            <Style TargetType="{x:Type DataGridRow}">
              <Style.Triggers>
                <DataTrigger Binding="{Binding IsMerged}" Value="True">
                  <Setter Property="Template">
                    <Setter.Value>
                      <ControlTemplate TargetType="{x:Type DataGridRow}">
                        <Border x:Name="DGR_Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
                          <SelectiveScrollingGrid>
                            <SelectiveScrollingGrid.ColumnDefinitions>
                              <ColumnDefinition Width="Auto"/>
                              <ColumnDefinition Width="*"/>
                            </SelectiveScrollingGrid.ColumnDefinitions>
                            <Border BorderBrush="Black" BorderThickness="0,0,1,1" Grid.Column="1">
                              <TextBlock>
                                <TextBlock.Inlines>
                                  <Run Text="Name: "/>
                                  <Run Text="{Binding Name}"/>
                                  <Run Text="Age: "/>
                                  <Run Text="{Binding Age}"/>
                                </TextBlock.Inlines>
                              </TextBlock>
                                
                            </Border>
                            <DataGridRowHeader SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical" Visibility="{Binding HeadersVisibility, ConverterParameter={x:Static DataGridHeadersVisibility.Row}, Converter={x:Static DataGrid.HeadersVisibilityConverter}, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}"/>
                          </SelectiveScrollingGrid>
                        </Border>
                      </ControlTemplate>
                    </Setter.Value>
                  </Setter>
                </DataTrigger>
              </Style.Triggers>
            </Style>
          </DataGrid.ItemContainerStyle>
          
          <DataGrid.Columns>
            <DataGridTextColumn Binding="{Binding Name}" Header="Name" Width="*"/>
            <DataGridTextColumn Binding="{Binding Age}" Header="Age" Width="*"/>
            <DataGridTextColumn Binding="{Binding Details }" Header="Details " Width="*"/>
          </DataGrid.Columns>
        </DataGrid>
      </Grid>
    </Window>
    
    

     

    C#:

      public partial class MainWindow : Window
      {
        public ObservableCollection<item> Items { get; set; }
        public MainWindow()
        {
          InitializeComponent();
          Items = new ObservableCollection<item>();
          for (int i = 0; i < 10; i++)
            Items.Add(new item());
          this.DataContext = Items;
        }
      }
      
      public class item
      {
        static int ID;
        public string Name { get; set; }
        public int Age { get; set; }
        public int Sex { get; set; }
        public string Details { get; set; }
        public bool IsMerged { get; set; }
        public item()
        {
          Name = "Name " + ID.ToString();
          Age = 20 + ID % 4;
          Details = "Details: for Name " + ID.ToString();
          IsMerged = (ID % 4 == 0);
          ID++;
        }
      }
    

     

    Sample download: https://skydrive.live.com/?cid=51b2fdd068799d15#cid=51B2FDD068799D15&id=51B2FDD068799D15%21902

    Sincerely,


    Bob Bao [MSFT]
    MSDN Community Support | Feedback to us
    Thursday, January 12, 2012 7:25 AM
    Moderator