ComboBox in WPF DataGrid's Column Header

Here, In this article, we are going to discuss, how can we add framework elements in WPF Datagrid's column header. We will add combo box in  the header. To add Combobox in the Header of DataGrid we use [GridColumn].Header tag. In the tag we can add any element directly.

<tools:DataGridTextColumn.Header>

     <ComboBox x:Name='txtCbo75P' ItemsSource='{StaticResource StringArrayResource}' SelectedIndex='0'></ComboBox>

</tools:DataGridTextColumn.Header>

Now suppose we have to create Grid as below:

In this case for the forth column rather than giving header text directly, we shall use above code

XAML

<Window x:Class='SuperHeaderExample.Window1'

       xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation'

       xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'

       xmlns:tools='clr-namespace:Microsoft.Windows.Controls;assembly=WPFToolkit'

       xmlns:sys='clr-namespace:System;assembly=mscorlib'

       xmlns:toolsp='clr-namespace:Microsoft.Windows.Controls.Primitives;assembly=WPFToolkit'

       Title='MainWindow' Height='350' Width='900'>

     <Border>

        <Border.Resources>

            <x:Array x:Key='StringArrayResource' Type='sys:String'>

                <sys:String>Value1</sys:String>

                <sys:String>Value2</sys:String>

            </x:Array>

            <LinearGradientBrush x:Key='HeaderBrush' StartPoint='0.5,0' EndPoint='0.5,1'>

                <GradientStop Color='#FF6B8E95' Offset='0'/>

                <GradientStop Color='#FF14A7C1' Offset='1'/>

                <GradientStop Color='#FF1E424E' Offset='0.509'/>

                <GradientStop Color='#FF1D4855' Offset='0.542'/>

                <GradientStop Color='#FF1D4855' Offset='0.542'/>

                <GradientStop Color='#FF193A44' Offset='0.526'/>

            </LinearGradientBrush>

            <LinearGradientBrush x:Key='HeaderBorderBrush' StartPoint='0.5,0' EndPoint ='0.5,1'>

                <GradientStop Color='#FF1D1D1D' Offset='0.614'/>

                <GradientStop Color='#FF007F96' Offset='0.853'/>

                <GradientStop Color='#FF0AEAFA' Offset='1'/>

            </LinearGradientBrush>

            <Style x:Key='HeaderStyle' TargetType='{x:Type toolsp:DataGridColumnHeader}'>

                <Setter Property='Background' Value='{StaticResource HeaderBrush}' />

                <Setter Property='Foreground' Value='White' />

                <Setter Property='BorderBrush' Value='{StaticResource HeaderBorderBrush}' />

                <Setter Property='BorderThickness' Value='1' />

                <Setter Property='SnapsToDevicePixels' Value='True' />

                <Setter Property='HorizontalAlignment' Value='Stretch' />

                <Setter Property='MinWidth' Value='0' />

                <Setter Property='MinHeight' Value='30' />

                <Setter Property='Cursor' Value='Hand' />

            </Style>

        </Border.Resources>

        <StackPanel>

            <Grid>

                <ScrollViewer VerticalScrollBarVisibility='Hidden' HorizontalScrollBarVisibility='Auto' Width='600' HorizontalAlignment='Left'>

  <Grid>

    <Grid.RowDefinitions>

      <RowDefinition Height='auto'/>

      <RowDefinition Height='2*'/>

    </Grid.RowDefinitions>

    <tools:DataGrid ColumnHeaderStyle='{DynamicResource HeaderStyle}'>

      <tools:DataGrid.Columns>

        <tools:DataGridTextColumn Header='S. No.' Binding="{Binding Path=[Column1]}" />

        <tools:DataGridTemplateColumn Header='Column2' Binding="{Binding Path=[Column2]}" />

        <tools:DataGridTextColumn Header='Column3' Binding='{Binding Path=[Column3]}' />

        <tools:DataGridTextColumn Binding='{Binding Path=[Column4]}'>

          <tools:DataGridTextColumn.Header>

            <ComboBox x:Name='cbo1' ItemsSource='{StaticResource StringArrayResource}' />

          </tools:DataGridTextColumn.Header>

        </tools:DataGridTextColumn>

        <tools:DataGridTextColumn Header='Column5' Binding='{Binding Path=[Column5]}' />

    </tools:DataGrid.Columns>

   </tools:DataGrid>

  </Grid>

         </ScrollViewer>

      </Grid>

     </StackPanel>

   </Border>

</Window>