VerticalAlignment of header in DataGrid

If we want to align the content of the header vertically(Bottom) in datagrid, found that we need to change the style. I thought there would be an easier way, but could not find one.

 

xmlns:my1=”clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data”

Here is the style, changes made to the default style in Bold

<Style TargetType=”my1:DataGridColumnHeader”>
<Setter Property=”SeparatorBrush”>
    <Setter.Value>
        <SolidColorBrush Color=”#FFA4A4A4″ />
    </Setter.Value>
</Setter>
<Setter Property=”SeparatorVisibility”
        Value=”Visible” />
<Setter Property=”Template”>
    <Setter.Value>
        <ControlTemplate TargetType=”my1:DataGridColumnHeader”>
            <Grid Name=”RootElement” >
                <Grid.Background>
                    <LinearGradientBrush StartPoint=”0.276463,-0.00385181″
                                         EndPoint=”0.276463,0.71″>
                        <GradientStop Color=”#FFF9FAFA”
                                      Offset=”0″ />
                        <GradientStop Name=”StopColor2″
                                      Color=”#FFEDF1F4″
                                      Offset=”0.37259″ />
                        <GradientStop Name=”StopColor3″
                                      Color=”#FFE2E8EF”
                                      Offset=”0.372881″ />
                        <GradientStop Name=”StopColor4″
                                      Color=”#FFC3C9CD”
                                      Offset=”1″ />
                    </LinearGradientBrush>
                </Grid.Background>

                <Grid.Resources>
                    <Storyboard x:Key=”Normal State”>
                        <ColorAnimation Storyboard.TargetName=”StopColor2″
                                        Storyboard.TargetProperty=”(Color)”
                                        Duration=”00:00:0.3″
                                        To=”#FFEDF1F4″ />
                        <ColorAnimation Storyboard.TargetName=”StopColor3″
                                        Storyboard.TargetProperty=”(Color)”
                                        Duration=”00:00:0.3″
                                        To=”#FFE2E8EF” />
                        <ColorAnimation Storyboard.TargetName=”StopColor4″
                                        Storyboard.TargetProperty=”(Color)”
                                        Duration=”00:00:0.3″
                                        To=”#FFC3C9CD” />
                    </Storyboard>
                    <Storyboard x:Key=”MouseOver State”>
                        <ColorAnimation Storyboard.TargetName=”StopColor2″
                                        Storyboard.TargetProperty=”(Color)”
                                        Duration=”00:00:0.3″
                                        To=”#FFE6EFF7″ />
                        <ColorAnimation Storyboard.TargetName=”StopColor3″
                                        Storyboard.TargetProperty=”(Color)”
                                        Duration=”00:00:0.3″
                                        To=”#FFD3E4F5″ />
                        <ColorAnimation Storyboard.TargetName=”StopColor4″
                                        Storyboard.TargetProperty=”(Color)”
                                        Duration=”00:00:0.3″
                                        To=”#FF87A5BA” />
                    </Storyboard>
                    <Storyboard x:Key=”Unsorted State”>
                        <DoubleAnimation Storyboard.TargetName=”SortIconElement”
                                         Storyboard.TargetProperty=”Opacity”
                                         Duration=”00:00:0.3″
                                         To=”0.0″ />
                        <DoubleAnimation Storyboard.TargetName=”SortIconTransform”
                                         Storyboard.TargetProperty=”ScaleY”
                                         BeginTime=”00:00:0.3″
                                         Duration=”00:00:0.0″
                                         To=”1″ />
                    </Storyboard>
                    <Storyboard x:Key=”SortedAscending State”>
                        <DoubleAnimation Storyboard.TargetName=”SortIconElement”
                                         Storyboard.TargetProperty=”Opacity”
                                         Duration=”00:00:0.3″
                                         To=”1.0″ />
                        <DoubleAnimation Storyboard.TargetName=”SortIconTransform”
                                         Storyboard.TargetProperty=”ScaleY”
                                         Duration=”00:00:0.3″
                                         To=”-1″ />
                    </Storyboard>
                    <Storyboard x:Key=”SortedDescending State”>
                        <DoubleAnimation Storyboard.TargetName=”SortIconElement”
                                         Storyboard.TargetProperty=”Opacity”
                                         Duration=”00:00:0.3″
                                         To=”1.0″ />
                        <DoubleAnimation Storyboard.TargetName=”SortIconTransform”
                                         Storyboard.TargetProperty=”ScaleY”
                                         Duration=”00:00:0.3″
                                         To=”1″ />
                    </Storyboard>
                </Grid.Resources>

                <Grid.RowDefinitions>
                    <RowDefinition Height=”*” />
                    <RowDefinition Height=”*” />
                    <RowDefinition Height=”Auto” />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width=”*” />
                    <ColumnDefinition Width=”Auto” />
                    <ColumnDefinition Width=”Auto” />
                </Grid.ColumnDefinitions>

                <Rectangle Stretch=”Fill”
                           StrokeThickness=”2″
                           Stroke=”#FFFFFFFF”
                           Grid.ColumnSpan=”2″
                           Grid.RowSpan=”2″ />
                <Rectangle Grid.Row=”2″
                           Grid.ColumnSpan=”3″
                           Height=”1″
                           HorizontalAlignment=”Stretch”
                           Fill=”#FFA4A4A4″ />
                <Rectangle Grid.RowSpan=”2″
                           Grid.Column=”2″
                           Width=”1″
                           VerticalAlignment=”Stretch”
                           Fill=”{TemplateBinding SeparatorBrush}”
                           Visibility=”{TemplateBinding SeparatorVisibility}” />
                <!– TODO: Put this back when SL gets ViewBox; Currently this path kills autosizing
            <Path Margin=”1,1,1,0″ Stretch=”Fill” Grid.ColumnSpan=”2″ Data=”F1 M 547.239,124.863L 430.795,124.863L 430.795,135.106C 447.845,138.848 467.753,140.997 489.017,140.997C 510.281,140.997 530.188,138.848 547.239,135.106L 547.239,124.863 Z “>
                <Path.Fill>
                    <LinearGradientBrush StartPoint=”0.5125,-0.0864589″ EndPoint=”0.5125,1.00202″>
                        <GradientStop Color=”#B3FFFFFF” Offset=”0″/>
                        <GradientStop Color=”#3CFFFFFF” Offset=”1″/>
                    </LinearGradientBrush>
                </Path.Fill>
            </Path>
            –>

                <ContentPresenter Margin=”3,0,3,0″ Grid.RowSpan=”3″ 
                                           Content=”{TemplateBinding Content}”
                                           VerticalAlignment=”Bottom” />
                <Path Name=”SortIconElement”
                      Margin=”3,0,3,0″
                      Opacity=”0″
                      Grid.Column=”1″ Grid.Row=”1″
                      Stretch=”Uniform”
                      Width=”8″
                      Data=”F1 M -5.215,0.0L 5.215,0.0L 0,6.099L -5.215,0.0 Z “>
                    <Path.Fill>
                        <SolidColorBrush Color=”#FF313131″ />
                    </Path.Fill>
                    <Path.RenderTransform>
                        <ScaleTransform Name=”SortIconTransform”
                                        CenterX=”4″
                                        CenterY=”2.5″
                                        ScaleX=”1″
                                        ScaleY=”1″ />
                    </Path.RenderTransform>
                </Path>
            </Grid>
        </ControlTemplate>
    </Setter.Value>
</Setter>
</Style>

Advertisements

10 thoughts on “VerticalAlignment of header in DataGrid

  1. Nice. Thanks for your help, Lee!

    I don’t quite understand why it is so difficult to style elements compared with JavaScript UI frameworks that wrap HTML/CSS. For me, this seems like my biggest pain point with Silverlight and WPF. Simple styling that would take me seconds or minutes in HTML/CSS takes me hours to do in Silverlight and WPF, because I have to figure out where the Content I want to Style actually is within the ControlTemplate. Not only that, but in order to diddle just one field in one element, I need to replace the whole visual tree.

    I read WPF Architect Adam Nathan’s opinion on how WPF Styles are better than Cascading Style Sheets, and I personally feel it is Not Invented Here Syndrome more than anything else.

  2. By the way, there are actually some problems with your code. For one, your blog software has this “feature” where it converts vertical double quotes into angled double quotes. This feature makes it impossible to directly copy and paste code into Visual Studio C# or XAML files. And Storyboard.TargetProperty=”(Color)” should just say Storyboard.TargetProperty=”Color”.

  3. I don’t think I will ever like changing styles just to alter layout. Editing ControlTemplates to do deep structural changes to the layout properties of Silverlight/WPF’s box model architecture is a significant wart on the overall design of Microsoft’s GUI toolkit. Layout has literally zero role in control behavior, and so it should be possible to do CSS-style deep, structural, tag pattern-matching changes to layout.

    I commented to Ashish Shetty that this is probably what costs me the most amount of time and disrupts my workflow more than anything else. It is a blatant violation of the Open-Closed Principle in Object-Oriented Analysis. See my comments that I made today here: http://nerddawg.blogspot.com/2008/06/beta-2-of-silverlight-2-has-just.html

  4. I am not sure on the workaround for the “feature”
    (Color) is actually what is in generic.xaml. I picked that up from Reflector. I did not even notice that as the style is working

  5. You’re right, sorry! The XAML Parser in the IDE I was using was hiccuping on a stray angled double quote, not “(Color)”.

  6. Open the system.windows.controls.data.dll in reflector. Expand Resources node. You will find system.windows.controls.data.g.resources in the Disassembler you will see Generic.xaml. that is how I got it

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