How to Re Style the AvalonControlsLibrary DataGridView

I received an email from 3 different persons asking me how to restyle the column headers of the DataGridView Control of AvalonControlsLibrary so I decided to put a small blog post for it.

Let’s start from here… The AvalonControlsLibrary is just a Listview (with a GridView as view) that creates it’s GridViewColumns dynamically on runtime by looking at the properties(and their metadata) of the bound object. So how can you control the look of the columns if they are being generated dynamically? Well here we can use the power of WPF’s styling system. We can create a Style in a ResourceDictionary that does not have the x:Key set but only the TargetType. By doing so we will be setting the Style to all our GridViewColumns.

An example for this is setting a Style for the Headers. Here is the XAML to do so

   1: <Grid>
   2:     <Grid.Resources>
   3:         <Style TargetType="{x:Type GridViewColumnHeader}">
   4:             <Setter Property="Template">
   5:                 <Setter.Value>
   6:                     <ControlTemplate TargetType="{x:Type GridViewColumnHeader}">
   7:                         <Border CornerRadius="5" BorderBrush="Yellow" BorderThickness="2">
   8:                             <ContentPresenter />
   9:                         </Border>
  10:                     </ControlTemplate>
  11:                 </Setter.Value>
  12:             </Setter>
  13:         </Style>
  14:     </Grid.Resources>
  15:     
  16:     <controls:DataGridView ItemsSource="{Binding}" />
  17: </Grid>

Hope this helps :)

P.S For anyone using the DataGridView I would suggest to have a look at the new DataGrid control from Microsoft. It’s really really COOL!

About these ads

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s