Home > Sivlerlight 3 > Hilighting entire row in datagrid

Hilighting entire row in datagrid

when we select a row in datagrid the entire row will be highlighted along the the cell we clicked on getting a different background. when our datagrid is readonly we may not want this special treatment for the current cell. we could style the cell to remove this highlight. Here is the image of the selectedrow before and after applying the style

 <Style x:Key=”dgc” TargetType=”data:DataGridCell”>
            <Setter Property=”Background” Value=”Transparent” />
            <Setter Property=”HorizontalContentAlignment” Value=”Stretch” />
            <Setter Property=”VerticalContentAlignment” Value=”Stretch” />
            <Setter Property=”Cursor” Value=”Arrow” />
            <Setter Property=”IsTabStop” Value=”False” />
            <Setter Property=”Template”>
                    <ControlTemplate TargetType=”data:DataGridCell”>
                        <Grid Name=”Root” Background=”{TemplateBinding Background}”>
                                <vsm:VisualStateGroup x:Name=”CurrentStates”>
                                    <vsm:VisualState x:Name=”Regular” />
                                    <vsm:VisualState x:Name=”Current”>
                                            <DoubleAnimation Storyboard.TargetName=”FocusVisual” Storyboard.TargetProperty=”Opacity” To=”1″ Duration=”0″ />
                                <vsm:VisualStateGroup x:Name=”ValidationStates”>
                                        <vsm:VisualTransition GeneratedDuration=”00:00:0.1″/>
                                    <vsm:VisualState x:Name=”Valid”/>
                                    <vsm:VisualState x:Name=”Invalid”>
                                            <DoubleAnimation Storyboard.TargetName=”InvalidVisualElement” Storyboard.TargetProperty=”Opacity” Duration=”0″ To=”1″/>
                                            <ColorAnimation Storyboard.TargetName=”FocusVisual” Storyboard.TargetProperty=”(Fill).Color” Duration=”0″ To=”#FFFFFFFF”/>

                                <ColumnDefinition />
                                <ColumnDefinition Width=”Auto” />

                            <Rectangle Name=”FocusVisual” Stroke=”#FF6DBDD1″ StrokeThickness=”1″ Fill=”#66FFFFFF” HorizontalAlignment=”Stretch”
                                   VerticalAlignment=”Stretch” IsHitTestVisible=”false” Opacity=”0″ />

                            Content=”{TemplateBinding Content}”
                            ContentTemplate=”{TemplateBinding ContentTemplate}”
                            Cursor=”{TemplateBinding Cursor}”
                            HorizontalAlignment=”{TemplateBinding HorizontalContentAlignment}”
                            VerticalAlignment=”{TemplateBinding VerticalContentAlignment}”
                            Margin=”{TemplateBinding Padding}” />

                            <Rectangle x:Name=”InvalidVisualElement” IsHitTestVisible=”False” StrokeThickness=”1″ Stroke=”#FFDC000C” HorizontalAlignment=”Stretch” VerticalAlignment=”Stretch” Opacity=”0″/>

                            <Rectangle Name=”RightGridLine” Grid.Column=”1″ VerticalAlignment=”Stretch” Width=”1″ />

The only change  we need to make is to delete the storyboard from the default style. The style is applied like this

<data:DataGrid Margin=”10″ Width=”200″ x:Name=”datagrid2″ CellStyle=”{StaticResource dgc}” ></data:DataGrid>

About these ads
Categories: Sivlerlight 3
  1. July 17, 2009 at 1:42 am

    Hello All

    I like Your blog. It is interesting. Do You have RSS so I can add to my favorites.
    Let me know when it will be ready. Kee it UP.
    best regards Szczecin Hotele

    • lee
      July 17, 2009 at 7:33 am


  2. ricky
    October 7, 2009 at 1:09 pm

    HI, i am new to WPF. I search on your blog to solve my problem, however, i do not know how to get the correct vsm name space which prevent me use visualstatemanager. i was trying to use the name space on WPFtoolkit but it still does not working.
    Can you give me some hint? Thank you.

  3. August 8, 2011 at 10:57 pm

    How do you select the row programmatically?

  4. lee
    August 8, 2011 at 11:48 pm

    you could set the selecteditem of the Datagrid, witht he item you want to select.

  1. July 1, 2009 at 4:09 am

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


Get every new post delivered to your Inbox.

%d bloggers like this: