WPF DataGrid: Place Custom Button in Upper-right Corner

Sep 27, 2008 at 12:21 PM
Edited Sep 27, 2008 at 12:28 PM
Hi,

I'd like to thank you for the WPF DataGrid control itself, and for really useful usage examples.

Is there a way to place a custom button at the right end of the header row?
We need to use the free space above scroll bar in upper-right corner.

In a similar manner, WPF DataGrid upper-left corner is already used for "select all" button.

Here's what we need:
Custom Button in Upper-right Corner
To do this:
Custom Button in Upper-right Corner Pressed, with Pop-up

Is there a way to accomplish this without changing the theme for WPF DataGrid assembly?

Thanks in advance,
Darko Antanasijevic
Revolution HI Team, Pexim Solutions Belgrade



Sep 27, 2008 at 2:21 PM
Hi Darko,

You don't have to change the theme, just create a ControlTemplate for the ScrollViewer in the DataGrid.  You can do it right in the XAML.  Once you've created that ControlTemplate for the ScrollViewer you just have to add your button in the ControlTemplate.  Here's a snippet up to the point where you add the button.

<ControlTemplate x:Key="ScrollViewerControlTemplate1" TargetType="{x:Type ScrollViewer}">
   <Grid>
    <Grid.ColumnDefinitions>
     <ColumnDefinition Width="Auto"/>
     <ColumnDefinition Width="*"/>
     <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
     <RowDefinition Height="Auto"/>
     <RowDefinition Height="*"/>
     <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Button Name="myButton" Grid.Column="2" Content="*"/>...

Let me know if you need more detail.

Cheers,
-LT

Sep 29, 2008 at 9:36 AM
Thanks LT,

We'll have to extend DataGrid.
Nov 24, 2008 at 6:42 PM
Hi LT, probably a stupid question, but how can we specify the control template for the scroll viewer in the datagrid?  I didn't see a ScrollViewerTemplate or similar property...
Nov 24, 2008 at 7:13 PM
Hi,
   The ControlTemplate I  show above above is used in bold below.  Let me know if you have any other questions.

<Window.Resources>
  <Style x:Key="DataGridStyle1" TargetType="{x:Type dg:DataGrid}">
   <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
   <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
   <Setter Property="BorderBrush" Value="#FF688CAF"/>
   <Setter Property="BorderThickness" Value="1,1,1,1"/>
   <Setter Property="ScrollViewer.CanContentScroll" Value="True"/>
   <Setter Property="Template">
    <Setter.Value>
     <ControlTemplate TargetType="{x:Type dg:DataGrid}">
      <Border SnapsToDevicePixels="True" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}">
       <ScrollViewer Focusable="False" x:Name="DG_ScrollViewer" Template="{DynamicResource ScrollViewerControlTemplate1}">
        <ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
       </ScrollViewer>
      </Border>
     </ControlTemplate>
    </Setter.Value>
   </Setter>
   <Style.Triggers>
    <Trigger Property="IsGrouping" Value="True">
     <Setter Property="ScrollViewer.CanContentScroll" Value="False"/>
    </Trigger>
   </Style.Triggers>
  </Style>
  <ControlTemplate x:Key="ScrollViewerControlTemplate1" TargetType="{x:Type ScrollViewer}">
   <Grid>
    <Grid.ColumnDefinitions>
     <ColumnDefinition Width="Auto"/>
     <ColumnDefinition Width="*"/>
     <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
     <RowDefinition Height="Auto"/>
     <RowDefinition Height="*"/>
     <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Button Name="myButton" Grid.Column="2" Content="*"/>...
Nov 25, 2008 at 4:37 PM
OK, thanks for the answer.  it is a bummer there is not a ScrollViewerTemplate property on the datagrid (and other similar controls) - instead of having to restyle the whole control... any reason why?  makes for a lot of redundant (style/template) code.
Nov 25, 2008 at 6:04 PM
I'm not sure why Microsoft has chosen to do it this way, but I'm glad there is at least a way to do it.  In my project I had to tweak other areas of the Scrollviewer's style and template anyway to give it the look and feel of our legacy client's datagrid.