RE: Basic customizations of the DataGrid

derfez — Thu, 24 Jun 2010 14:50:39 GMT

Is there a way to display the columns and resulting rows the following way ? Meaning to display the gridview in "rows" rather than in columns by selecting for example only a single row of the complete gridview.

My wished display (row 0 selected for example)

Group Carbohydrates

Name Total carbohydrates

Quantity 27.3

Thanks in advance

RE: Basic customizations of the DataGrid

nathanp812 — Sun, 18 Jan 2009 20:42:45 GMT

I am trying to develop a skin for a Silverlight 2 datagrid using expression blend, I can change everything in the template (located in app.xaml) except for the column headings.

I tried using the above example but it doesnt appear to work for me, probably something totally basic that I am overlooking but I am a Silverlight 2 noob when it comes to the skinning side of things...

Any assistance would be much appreciated. :)

RE: Basic customizations of the DataGrid

Aong — Sat, 17 Jan 2009 00:24:26 GMT

Remove " SelectionMode="" " code in Page.xaml for develop with Silverlight 2.

Thank you and Best Regards

RE: Basic customizations of the DataGrid

Aong — Sat, 17 Jan 2009 00:18:42 GMT

move " SelectionMode="" " code in Page.xaml for develop with Silverlight 2.

Thank you and Best Regards,

RE: Basic customizations of the DataGrid

Enrai — Sat, 20 Dec 2008 05:46:01 GMT

To modify the column header you have to set the ColumnHeaderStyle property to an appropriate style. The default style is:

<Style TargetType="prefix:DataGridColumnHeader">
    <Setter Property="Foreground" Value="#FF444444" />
    <Setter Property="HorizontalContentAlignment" Value="Center" />
    <Setter Property="VerticalContentAlignment" Value="Center" />
    <Setter Property="FontSize" Value="10.5" />
    <Setter Property="FontWeight" Value="Bold" />
    <Setter Property="IsTabStop" Value="False" />
    <Setter Property="SeparatorBrush" Value="#FFC9CACA" />
    <Setter Property="Padding" Value="4,4,5,4" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="prefix:DataGridColumnHeader">
                <Grid Name="Root">
                    <vsm:VisualStateManager.VisualStateGroups>
                        <vsm:VisualStateGroup x:Name="CommonStates">
                            <vsm:VisualStateGroup.Transitions>
                                <vsm:VisualTransition GeneratedDuration="00:00:0.1" />
                            vsm:VisualStateGroup.Transitions>
                            <vsm:VisualState x:Name="Normal" />
                            <vsm:VisualState x:Name="MouseOver">
                                <Storyboard>
                                    <ColorAnimationUsingKeyFrames BeginTime="0" Duration="0" Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
                                        <SplineColorKeyFrame KeyTime="0" Value="#FF448DCA"/>
                                    ColorAnimationUsingKeyFrames>
                                    <ColorAnimationUsingKeyFrames BeginTime="0" Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)">
                                        <SplineColorKeyFrame KeyTime="0" Value="#7FFFFFFF"/>
                                    ColorAnimationUsingKeyFrames>
                                    <ColorAnimationUsingKeyFrames BeginTime="0" Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)">
                                        <SplineColorKeyFrame KeyTime="0" Value="#CCFFFFFF"/>
                                    ColorAnimationUsingKeyFrames>
                                    <ColorAnimationUsingKeyFrames BeginTime="0" Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
                                        <SplineColorKeyFrame KeyTime="0" Value="#F2FFFFFF"/>
                                    ColorAnimationUsingKeyFrames>
                                Storyboard>
                            vsm:VisualState>
                        vsm:VisualStateGroup>
                        <vsm:VisualStateGroup x:Name="SortStates">
                            <vsm:VisualStateGroup.Transitions>
                                <vsm:VisualTransition GeneratedDuration="00:00:0.1" />
                            vsm:VisualStateGroup.Transitions>
                            <vsm:VisualState x:Name="Unsorted" />
                            <vsm:VisualState x:Name="SortAscending">
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="SortIcon" Storyboard.TargetProperty="Opacity" Duration="0" To="1.0"/>
                                Storyboard>
                            vsm:VisualState>
                            <vsm:VisualState x:Name="SortDescending">
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="SortIcon" Storyboard.TargetProperty="Opacity" Duration="0" To="1.0"/>
                                    <DoubleAnimation Storyboard.TargetName="SortIconTransform" Storyboard.TargetProperty="ScaleY" Duration="0" To="-.9"/>
                                Storyboard>
                            vsm:VisualState>
                        vsm:VisualStateGroup>
                    vsm:VisualStateManager.VisualStateGroups>
 
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*" />
                        <RowDefinition Height="*" />
                        <RowDefinition Height="Auto" />
                    Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="Auto" />
                    Grid.ColumnDefinitions>
 
                    <Rectangle x:Name="BackgroundRectangle" Stretch="Fill" Fill="#FF1F3B53" Grid.ColumnSpan="2" Grid.RowSpan="2"/>
                    
                    <Rectangle x:Name="BackgroundGradient" Stretch="Fill" Grid.ColumnSpan="2" Grid.RowSpan="2">
                        <Rectangle.Fill>
                            <LinearGradientBrush StartPoint=".7,0" EndPoint=".7,1">
                                <GradientStop Color="#FFFFFFFF" Offset="0.015" />
                                <GradientStop Color="#F9FFFFFF" Offset="0.375" />
                                <GradientStop Color="#E5FFFFFF" Offset="0.6" />
                                <GradientStop Color="#C6FFFFFF" Offset="1" />
                            LinearGradientBrush>
                        Rectangle.Fill>
                    Rectangle>
 
                    <ContentPresenter
                        Grid.RowSpan="2"
                        Content="{TemplateBinding Content}"
                        Cursor="{TemplateBinding Cursor}"
                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                        Margin="{TemplateBinding Padding}"/>
                    
                    <Rectangle Name="VerticalSeparator" Grid.RowSpan="2" Grid.Column="2" Width="1" VerticalAlignment="Stretch" Fill="{TemplateBinding SeparatorBrush}" Visibility="{TemplateBinding SeparatorVisibility}" />
                    
                    <Path Grid.RowSpan="2" Name="SortIcon" RenderTransformOrigin=".5,.5" HorizontalAlignment="Left" VerticalAlignment="Center" Opacity="0" Grid.Column="1" Stretch="Uniform" Width="8" Data="F1 M -5.215,6.099L 5.215,6.099L 0,0L -5.215,6.099 Z ">
                        <Path.Fill>
                            <SolidColorBrush Color="#FF444444" />
                        Path.Fill>
                        <Path.RenderTransform>
                            <TransformGroup>
                                <ScaleTransform x:Name="SortIconTransform" ScaleX=".9" ScaleY=".9" />
                            TransformGroup>
                        Path.RenderTransform>
                    Path>
                    
                Grid>
            ControlTemplate>
        Setter.Value>
    Setter>
Style>

To change the color of the headers just change the colors of the rectangles with names "Background" and "BackgroundGradients" in the ControlTemplate . Also don't miss the ViewStates as they also manipulate these two elements.

The same can be done with the row headers, except you have to get the default style for the DataGridRowHeader from the generic.xaml using the .Net Reflector.

RE: Basic customizations of the DataGrid

John — Tue, 16 Dec 2008 09:46:00 GMT

Why no example of how to change the column header background color?

RE: Basic customizations of the DataGrid

Enrai — Tue, 18 Nov 2008 02:50:25 GMT

The article about customizing the selection in the DataGrid can be found here - Changing the style of the selected row of the DataGrid control.

RE: Basic customizations of the DataGrid

Enrai — Fri, 14 Nov 2008 01:28:39 GMT

Yes, there is a way to change the background of the currently selected row. To do that you have to set the RowStyle property of the DataGrid and in this style you have to make some changes to the template of the DataGridRow. The TargetType of the style should be "prefix:DataGridRow". I think this is a very interesting case, so expect an article later today that will explain the things more clearly.

P.S. I'll add a link as comment when the article is ready!

Update: I couldn't manage to finish the article for today, so it will be ready in the start of the next week, probably on Monday.

RE: Basic customizations of the DataGrid

JacobE — Thu, 13 Nov 2008 05:03:36 GMT

Is there a way to set the style/background of the currently selected row?

SilverlightShow: Basic customizations of the DataGrid Comments

RE: Basic customizations of the DataGrid

RE: Basic customizations of the DataGrid

RE: Basic customizations of the DataGrid

RE: Basic customizations of the DataGrid

RE: Basic customizations of the DataGrid

RE: Basic customizations of the DataGrid

RE: Basic customizations of the DataGrid

RE: Basic customizations of the DataGrid

RE: Basic customizations of the DataGrid