Changing the highlight/selection color for an entire row

18 posts, 0 answers
  1. Rob Peters
    Rob Peters avatar
    16 posts
    Member since:
    Feb 2010

    Posted 21 Jun 2010 Link to this post

    I have a gridview item with a red background and a white text.
    When i move the mouse above the gridview i get a yellow highlight, that causes the text to be unreadable.

    Is there a easy way to set the row background/foreground color for the highlight, and selection?

    For example:
    Highlight: background = yellow, foreground=black
    Selection: background = orange, foreground=black

    With regards,
    Rob


  2. vanya
    vanya avatar
    35 posts
    Member since:
    Nov 2008

    Posted 21 Jun 2010 Link to this post

    You cah achieve this effect by setting the style ro the rows in the grdiview and the corresponding triggers-I have used your notes about this and here is the code sample:


    <Window x:Class="HightLighted.MainWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            Title="MainWindow" Height="350" Width="525" xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation">
        <Grid>
            <telerik:RadGridView ItemsSource="{Binding}" Background="Red" Foreground="White" AutoGenerateColumns="False" HorizontalAlignment="Left" Margin="24,36,0,0" Name="radGridView1" VerticalAlignment="Top">
                <telerik:RadGridView.RowStyle>
                    <Style TargetType="{x:Type telerik:GridViewRow}">
                        <Setter Property="Background" Value="Red"/>
                        <Setter Property="Foreground" Value="White"/>
                        <Style.Triggers>
                            <Trigger Property="IsSelected" Value="True">
                                <Setter Property="Background" Value="DarkOrange"/>
                                <Setter Property="Foreground" Value="black"/>
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Background" Value="LightYellow"/>
                                <Setter Property="Foreground" Value="black"/>
                            </Trigger>
                        </Style.Triggers>
                    </Style>
                </telerik:RadGridView.RowStyle>
                <telerik:RadGridView.Columns>
                    <telerik:GridViewDataColumn Header="EmployeeID" DataMemberBinding="{Binding EmployeeID}"/>
                </telerik:RadGridView.Columns>
            </telerik:RadGridView>
        </Grid>
    </Window>


    Hope it helps:

  3. UI for WPF is Visual Studio 2017 Ready
  4. Rob Peters
    Rob Peters avatar
    16 posts
    Member since:
    Feb 2010

    Posted 22 Jun 2010 Link to this post

    Hi Vanya,

    Thanks for your help!

    What this does, it quickly shows the color defined in the trigger, but there is still that yellow rectangle thats popping up on front.
    Also when selecting, the color from the property is applied, but another rectangle is put on top (kind of yellow)

    Do you know how to turn this off, or change that color?

    Edit: When setting the Mouseover/Selection foreground to black, solved my reading problem, but one has to like the yellow...

    With kind regards,
    Rob
  5. vanya
    vanya avatar
    35 posts
    Member since:
    Nov 2008

    Posted 22 Jun 2010 Link to this post

    HI,

    Bellow you can see the style I have used for the gridview using your notes-It seems that there is a little difference  between your picture and mine in the colors .......may be you have commented the line for the foreground in the IsSelected property of the trigger It does not matter......
    See the picture or if you have modified the style  just paste the code to see what is going on ....... 

    Hope this helps.......


    Note: the second row has a light yellow background because the mouse cursor is over it -the cursor is not visible
  6. Vlad
    Admin
    Vlad avatar
    11100 posts

    Posted 22 Jun 2010 Link to this post

    Hi,

     Generally the best way to override the default grid styles for the row is copy the style in Blend and change (or even remove) desired states.

    Best wishes,
    Vlad
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  7. Rob Peters
    Rob Peters avatar
    16 posts
    Member since:
    Feb 2010

    Posted 22 Jun 2010 Link to this post

    Hello Vlad,

    I'm no Blend expert (not to mention that is sometimes give undisired effects when installed),
    Is it possible to post an example how to set that 'yellow' rectangle to blue for example?

    Maybe an idea to make this a property for the next release?
    Or if possible a selection that is always readable when mouseover/selected....

    With kind regards,
    Rob
  8. Vlad
    Admin
    Vlad avatar
    11100 posts

    Posted 22 Jun 2010 Link to this post

    Hello Rob,

     Exposing these colors as properties will limit the grid to just solid colors. You will not have cool gradients, borders, animations, etc. I've attached screenshot how you can do this easily in Blend.

    Best wishes,
    Vlad
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  9. Rob Peters
    Rob Peters avatar
    16 posts
    Member since:
    Feb 2010

    Posted 22 Jun 2010 Link to this post

    Hello Vlad,

    I'm sorry, i cannot get/create that template in blend 4.

    ----
    Start Blend
    New Project, WPF Application
    Add reference for gridview
    Place radgridview on window
    Create sample data, set it as itemssource for the gridview
    RadGridView->Edit Template -> Edit Copy
    Now all items (rows) are inside PART_GridViewVirtualizingPanel?
    ----

    I aggree that it's a very cool effect!, but that effect should also (have) set the foreground color, because now all items with a white foreground (or yellow for example), are unreadable, making the control not look right.

    With the help of Venya (trigger) i now have set the foreground to black on the mouseover/isselected event, but if possible, i would appriciate if you could show me how to do this in blend or directly in xaml.

    With kind regards,
    Rob
  10. vanya
    vanya avatar
    35 posts
    Member since:
    Nov 2008

    Posted 22 Jun 2010 Link to this post

    Hi,

    Vlad is really right that MS Blend is a good alternative-the easiest way  you can do to edit the template of the GridViewRow is to simply drag from the Assets Library GridViewRow (RightClick) wherever onto the design surface->Edit template ->Edit a Copy Create a Style resource and check the radioButton "Apply to ALL" ......[ I am using MS BLEND 3] and from there you can modify whatever you want (finally simply delete this Row from the window and use the style created)-from the picture bellow you can see how you can do that I believe that now it will be absolutely clear - I modified the fontsize wheh the rows is selected to be 36pt and the foreground to be LightYellow-read carefully the code and I hope that it is clear.....




    <Window x:Class="WPFAPP.MainWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            Title="MainWindow" Height="476" Width="696" xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation">
    <Window.Resources>
    <Style TargetType="{x:Type telerik:GridViewRow}">
    <Setter Property="IsTabStop" Value="False"/>
    <Setter Property="Template">
    <Setter.Value>
    <ControlTemplate TargetType="{x:Type telerik:GridViewRow}">
    <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{x:Null}">
    <telerik:SelectiveScrollingGrid x:Name="grid" Background="{x:Null}">
    <telerik:SelectiveScrollingGrid.ColumnDefinitions>
    <ColumnDefinition Width="Auto"/>
    <ColumnDefinition Width="Auto"/>
    <ColumnDefinition Width="Auto"/>
    <ColumnDefinition Width="*"/>
    </telerik:SelectiveScrollingGrid.ColumnDefinitions>
    <telerik:SelectiveScrollingGrid.RowDefinitions>
    <RowDefinition Height="*"/>
    <RowDefinition Height="Auto"/>
    <RowDefinition Height="Auto"/>
    <RowDefinition Height="Auto"/>
    </telerik:SelectiveScrollingGrid.RowDefinitions>
    <Border x:Name="SelectionBackground" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Margin}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Grid.Column="2" Grid.ColumnSpan="2" telerik:SelectiveScrollingGrid.SelectiveScrollingClip="True" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}"/>
    <Border x:Name="Background_Over" Margin="1,1,1,2" Opacity="0" Grid.Column="2" Grid.ColumnSpan="2" telerik:SelectiveScrollingGrid.SelectiveScrollingClip="True" BorderBrush="{x:Null}" BorderThickness="1" CornerRadius="1">
    <Border BorderBrush="White" BorderThickness="1" Background="#FFCD750E"/>
    </Border>
    <Border x:Name="Background_Selected" Margin="1,1,1,2" Opacity="0" Grid.Column="2" Grid.ColumnSpan="2" telerik:SelectiveScrollingGrid.SelectiveScrollingClip="True" BorderBrush="#FFFFC92B" BorderThickness="1" CornerRadius="1">
    <Border BorderBrush="White" BorderThickness="1" Background="#FF061261"/>
    </Border>
    <Border x:Name="Background_Invalid" Margin="1,1,1,2" Opacity="0" Grid.Column="2" Grid.ColumnSpan="2" telerik:SelectiveScrollingGrid.SelectiveScrollingClip="True" BorderBrush="#FFCE7D7D" BorderThickness="1" CornerRadius="1">
    <Border BorderThickness="1">
    <Border.Background>
    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
    <GradientStop Color="#FFFCDCDC"/>
    <GradientStop Color="#FFFCC1C1" Offset="1"/>
    </LinearGradientBrush>
    </Border.Background>
    <Border.BorderBrush>
    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
    <GradientStop Color="#FFEBF4FD"/>
    <GradientStop Color="#FFDBEAFD" Offset="1"/>
    </LinearGradientBrush>
    </Border.BorderBrush>
    </Border>
    </Border>
    <telerik:GridViewToggleButton Width="25" IsTabStop="{TemplateBinding IsTabStop}" IsHitTestVisible="{Binding IsExpandable, RelativeSource={RelativeSource TemplatedParent}}" Grid.Column="2" telerik:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical" IsChecked="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}">
    <telerik:GridViewToggleButton.Opacity>
    <Binding Path="IsExpandable" RelativeSource="{RelativeSource TemplatedParent}">
    <Binding.Converter>
    <telerik:BooleanToOpacityConverter/>
    </Binding.Converter>
    </Binding>
    </telerik:GridViewToggleButton.Opacity>
    <telerik:GridViewToggleButton.Visibility>
    <Binding Path="HasHierarchy" RelativeSource="{RelativeSource TemplatedParent}">
    <Binding.Converter>
    <telerik:BooleanToVisibilityConverter/>
    </Binding.Converter>
    </Binding>
    </telerik:GridViewToggleButton.Visibility>
    </telerik:GridViewToggleButton>
    <Border Grid.Column="2" telerik:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical">
    <Border.Visibility>
    <Binding Path="HasHierarchy" RelativeSource="{RelativeSource TemplatedParent}">
    <Binding.Converter>
    <telerik:BooleanToVisibilityConverter/>
    </Binding.Converter>
    </Binding>
    </Border.Visibility>
    </Border>
    <telerik:DataCellsPresenter x:Name="PART_DataCellsPresenter" IsTabStop="False" Grid.Column="3">
    <telerik:StyleManager.Theme>
    <telerik:Office_BlackTheme/>
    </telerik:StyleManager.Theme>
    </telerik:DataCellsPresenter>
    <Border x:Name="PART_RowBorder" VerticalAlignment="Bottom" Grid.Column="1" Grid.ColumnSpan="4" Grid.RowSpan="4" telerik:SelectiveScrollingGrid.SelectiveScrollingClip="True" BorderBrush="{TemplateBinding HorizontalGridLinesBrush}">
    <Border.BorderThickness>
    <Binding Path="HorizontalGridLinesWidth" ConverterParameter="Bottom" RelativeSource="{RelativeSource TemplatedParent}">
    <Binding.Converter>
    <telerik:GridLineWidthToThicknessConverter/>
    </Binding.Converter>
    </Binding>
    </Border.BorderThickness>
    </Border>
    <Border Grid.Column="2" Grid.ColumnSpan="2" Grid.Row="2" telerik:SelectiveScrollingGrid.SelectiveScrollingClip="True" Background="#FFBBBBBB" BorderBrush="#FF848484" BorderThickness="0,1" Padding="6">
    <Border.Visibility>
    <Binding Path="IsExpanded" RelativeSource="{RelativeSource TemplatedParent}">
    <Binding.Converter>
    <telerik:BooleanToVisibilityConverter/>
    </Binding.Converter>
    </Binding>
    </Border.Visibility>
    <ContentPresenter x:Name="PART_HierarchyChildPresenter" telerik:SelectiveScrollingGrid.SelectiveScrollingClip="True" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
    </Border>
    <telerik:DetailsPresenter x:Name="PART_DetailsPresenter" IsTabStop="False" Visibility="Collapsed" Grid.Column="2" Grid.ColumnSpan="2" Grid.Row="1" DetailsProvider="{TemplateBinding DetailsProvider}">
    <telerik:StyleManager.Theme>
    <telerik:Office_BlackTheme/>
    </telerik:StyleManager.Theme>
    </telerik:DetailsPresenter>
    <telerik:IndentPresenter x:Name="PART_IndentPresenter" IsTabStop="False" Grid.Column="1" Grid.RowSpan="4" IndentLevel="{TemplateBinding IndentLevel}" telerik:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical">
    <telerik:StyleManager.Theme>
    <telerik:Office_BlackTheme/>
    </telerik:StyleManager.Theme>
    </telerik:IndentPresenter>
    <Border x:Name="PART_IndicatorPresenter" VerticalAlignment="Stretch" Width="25" Visibility="{TemplateBinding RowIndicatorVisibility}" Grid.Column="0" Grid.RowSpan="3" telerik:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical" BorderBrush="#FF848484" BorderThickness="0,0,1,1">
    <Border x:Name="NavigatorIndicatorBackground" Background="#FFE4E4E4" BorderBrush="White" BorderThickness="1">
    <Grid>
    <Grid x:Name="ErrorIndicator" HorizontalAlignment="Center" VerticalAlignment="Center" Width="16" Height="16" Visibility="Collapsed">
    <Path Stretch="Fill" Margin="1" Data="M3,12.999999L4,12.999999 5,12.999999 6,12.999999 7,12.999999 8,12.999999 9,12.999999 10,12.999999 11,12.999999 11,13.999999 10,13.999999 9,13.999999 8,13.999999 7,13.999999 6,13.999999 5,13.999999 4,13.999999 3,13.999999z M11,11.999999L12,11.999999 12,12.999999 11,12.999999z M2.0000001,11.999999L3,11.999999 3,12.999999 2.0000001,12.999999z M12,10.999999L13,10.999999 13,11.999999 12,11.999999z M1,10.999999L2.0000001,10.999999 2.0000001,11.999999 1,11.999999z M13,2.9999992L14,2.9999992 14,3.9999992 14,4.9999992 14,5.9999992 14,6.9999992 14,7.9999992 14,8.9999992 14,9.9999992 14,10.999999 13,10.999999 13,9.9999992 13,8.9999992 13,7.9999992 13,6.9999992 13,5.9999992 13,4.9999992 13,3.9999992z M0,2.9999992L1,2.9999992 1,3.9999992 1,4.9999992 1,5.9999992 1,6.9999992 1,7.9999992 1,8.9999992 1,9.9999992 1,10.999999 0,10.999999 0,9.9999992 0,8.9999992 0,7.9999992 0,6.9999992 0,5.9999992 0,4.9999992 0,3.9999992z M12,1.9999999L13,1.9999999 13,2.9999992 12,2.9999992z M1,1.9999999L2.0000001,1.9999999 2.0000001,2.9999992 1,2.9999992z M11,0.99999994L12,0.99999994 12,1.9999999 11,1.9999999z M2.0000001,0.99999994L2.9999998,0.99999994 2.9999998,1.9999999 2.0000001,1.9999999z M2.9999998,0L3.9999998,0 5,0 6,0 7,0 8,0 9,0 10,0 11,0 11,0.99999994 10,0.99999994 9,0.99999994 8,0.99999994 7,0.99999994 6,0.99999994 5,0.99999994 3.9999998,0.99999994 2.9999998,0.99999994z">
    <Path.Fill>
    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
    <GradientStop Color="#FFFC9999" Offset="0"/>
    <GradientStop Color="#FFC26666" Offset="1"/>
    </LinearGradientBrush>
    </Path.Fill>
    </Path>
    <Path Fill="White" Stretch="Fill" Margin="7,3" Data="M1.4901161E-07,8L1.0000001,8 2.0000002,8 2.0000002,9 2.0000002,10 1.0000003,10 1.0000003,9 1.0000001,10 1.4901161E-07,10 1.4901161E-07,9z M1.4901161E-07,0L1.0000001,0 2.0000002,0 2.0000002,1 2.0000002,2 2.0000002,3 2.0000002,4.0000001 2.0000002,5 2.0000002,5.9999999 2.0000002,7 1.0000001,7 1.4901161E-07,7 1.4901161E-07,5.9999999 1.4901161E-07,5 1.4901161E-07,4.0000001 1.4901161E-07,3 1.4901161E-07,2 0,1z"/>
    <Path Stretch="Fill" Data="M4,15L5,15 6,15 7,15 8,15 9,15 10,15 11,15 12,15 12,16 11,16 10,16 9,16 8,16 7,16 6,16 5,16 4,16z M12,14L13,14 13,15 12,15z M3,14L4,14 4,15 3,15z M13,13L14,13 14,14 13,14z M2,13L3,13 3,14 2,14z M14,12L15,12 15,13 14,13z M1,12L2,12 2,13 1,13z M7,11L7,12 7,13 8,13 9,13 9,12 9,11 8,11z M15,4L16,4 16,5 16,6 16,7 16,8 16,9 16,10 16,11 16,12 15,12 15,11 15,10 15,9 15,8 15,7 15,6 15,5z M0,4L1,4 1,5 1,6 1,7 1,8 1,9 1,10 1,11 1,12 0,12 0,11 0,10 0,9 0,8 0,7 0,6 0,5z M14,3L15,3 15,4 14,4z M7,3L7,4 7,5 7,6 7,7 7,8 7,9 7,10 8,10 9,10 9,9 9,8 9,7 9,6 9,5 9,4 9,3 8,3z M1,3L2,3 2,4 1,4z M13,2L14,2 14,3 13,3z M4,2L5,2 6,2 7,2 8,2 9,2 10,2 11,2 12,2 12,3 13,3 13,4 14,4 14,5 14,6 14,7 14,8 14,9 14,10 14,11 14,12 13,12 13,13 12,13 12,14 11,14 10,14 9,14 8,14 7,14 6,14 5,14 4,14 4,13 3,13 3,12 2,12 2,11 2,10 2,9 2,8 2,7 2,6 2,5 2,4 3,4 3,3 4,3z M2,2L3,2 3,3 2,3z M12,1L13,1 13,2 12,2z M3,1L4,1 4,2 3,2z M4,0L5,0 6,0 7,0 8,0 9,0 10,0 11,0 12,0 12,1 11,1 10,1 9,1 8,1 7,1 6,1 5,1 4,1z">
    <Path.Fill>
    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
    <GradientStop Color="Red" Offset="0"/>
    <GradientStop Color="#FF990000" Offset="1"/>
    </LinearGradientBrush>
    </Path.Fill>
    </Path>
    </Grid>
    <Grid x:Name="NavigatorIndicator" HorizontalAlignment="Center" VerticalAlignment="Center" Width="9" Height="9" Visibility="Collapsed">
    <Path Stroke="#E5343434" StrokeThickness="1" Data="M0.5,0.5L8.5,4.4375 0.5,8.5z">
    <Path.Fill>
    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
    <GradientStop Color="White"/>
    <GradientStop Color="#FF4D4D4D" Offset="1"/>
    </LinearGradientBrush>
    </Path.Fill>
    </Path>
    </Grid>
    <Grid x:Name="EditIndicator" HorizontalAlignment="Center" VerticalAlignment="Center" Width="16" Height="10" Visibility="Collapsed">
    <Path Fill="#7F848484" Stretch="Fill" Data="M14,9L15,9 15,10 14,10z M1,9L2,9 2,10 1,10z M15,8L16,8 16,9 15,9z M0,8L1,8 1,9 0,9z M15,1L16,1 16,2 15,2z M0,1L1,1 1,2 0,2z M14,0L15,0 15,1 14,1z M1,0L2,0 2,1 1,1z"/>
    <Path Fill="#FFCBCBCB" Stretch="Fill" Margin="1" Data="M0.99999994,6.9999995L2,6.9999995 3,6.9999995 4,6.9999995 5,6.9999995 6,6.9999995 7,6.9999995 8,6.9999995 9,6.9999995 10,6.9999995 11,6.9999995 12,6.9999995 13,6.9999995 13,7.9999995 12,7.9999995 11,7.9999995 10,7.9999995 9,7.9999995 8,7.9999995 7,7.9999995 6,7.9999995 5,7.9999995 4,7.9999995 3,7.9999995 2,7.9999995 0.99999994,7.9999995z M13,0.99999994L14,0.99999994 14,1.9999999 14,2.9999995 14,3.9999995 14,4.9999995 14,5.9999995 14,6.9999995 13,6.9999995 13,5.9999995 13,4.9999995 13,3.9999995 13,2.9999995 13,1.9999999z M0,0.99999994L0.99999994,0.99999994 0.99999994,1.9999999 0.99999994,2.9999995 0.99999994,3.9999995 0.99999994,4.9999995 0.99999994,5.9999995 0.99999994,6.9999995 0,6.9999995 0,5.9999995 0,4.9999995 0,3.9999995 0,2.9999995 0,1.9999999z M11,0L12,0 13,0 13,0.99999994 12,0.99999994 11,0.99999994 10,0.99999994 9,0.99999994 8,0.99999994 7,0.99999994 6,0.99999994 5,0.99999994 4,0.99999994 3,0.99999994 2,0.99999994 0.99999994,0.99999994 0.99999994,2.3841858E-07 2,2.3841858E-07 3,2.3841858E-07 4,2.3841858E-07 5,2.3841858E-07 6,2.3841858E-07 7,2.3841858E-07 8,2.3841858E-07 9,2.3841858E-07 10,2.3841858E-07z"/>
    <Path Fill="#FF848484" Stretch="Fill" Data="M2,9L3,9 4,9 5,9 6,9 7,9 8,9 9,9 10,9 11,9 12,9 13,9 14,9 14,10 13,10 12,10 11,10 10,10 9,10 8,10 7,10 6,10 5,10 4,10 3,10 2,10z M14,8L15,8 15,9 14,9z M1,8L2,8 2,9 1,9z M15,2L16,2 16,3 16,4 16,5 16,6 16,7 16,8 15,8 15,7 15,6 15,5 15,4 15,3z M3,2L4,2 5,2 6,2 6,3 5,3 5,4 5,5 5,6 5,7 6,7 6,8 5,8 4,8 3,8 3,7 4,7 4,6 4,5 4,4 4,3 3,3z M0,2L1,2 1,3 1,4 1,5 1,6 1,7 1,8 0,8 0,7 0,6 0,5 0,4 0,3z M14,1L15,1 15,2 14,2z M1,1L2,1 2,2 1,2z M2,0L3,0 4,0 5,0 6,0 7,0 8,0 9,0 10,0 11,0 12,0 13,0 14,0 14,1 13,1 12,1 11,1 10,1 9,1 8,1 7,1 6,1 5,1 4,1 3,1 2,1z"/>
    <Path Fill="White" Stretch="Fill" Margin="2" Data="M4,0L5,0 6,0 7,0 8,0 9,0 10,0 11,0 12,0 12,1 12,2 12,3 12,4 12,5.0000001 12,6 11,6 10,6 9,6 8,6 7,6 6,6 5,6 4,6 4,5.0000001 3,5.0000001 3,4 3,3 3,2 3,1 4,1z M0,0L1,0 1,1 2,1 2,2 2,3 2,4 2,5.0000001 1,5.0000001 1,6 0,6 0,5.0000001 0,4 0,3 0,2 0,1z"/>
    </Grid>
    </Grid>
    </Border>
    </Border>
    </telerik:SelectiveScrollingGrid>
    </Border>
    <ControlTemplate.Triggers>
    <Trigger Property="IsSelected" Value="True">
    <Setter Property="Opacity" TargetName="Background_Selected" Value="1"/>
    <Setter Property="Foreground" Value="LightYellow"/>
    <Setter Property="FontSize" Value="36"/>
    </Trigger>
    <Trigger Property="IsMouseOver" Value="True">

    <Trigger.EnterActions>
    <BeginStoryboard>
    <Storyboard>
    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Background_Over" Storyboard.TargetProperty="Opacity">
    <SplineDoubleKeyFrame KeyTime="00:00:00.2000000" Value="1"/>
    </DoubleAnimationUsingKeyFrames>
    </Storyboard>
    </BeginStoryboard>
    </Trigger.EnterActions>
    <Trigger.ExitActions>
    <BeginStoryboard>
    <Storyboard>
    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Background_Over" Storyboard.TargetProperty="Opacity">
    <SplineDoubleKeyFrame KeyTime="00:00:00.2000000" Value="0"/>
    </DoubleAnimationUsingKeyFrames>
    </Storyboard>
    </BeginStoryboard>
    </Trigger.ExitActions>
    </Trigger>
    <Trigger Property="IsContentValid" Value="False">
    <Setter Property="Opacity" TargetName="Background_Invalid" Value="1"/>
    <Setter Property="Visibility" TargetName="ErrorIndicator" Value="Visible"/>
    <Setter Property="Visibility" TargetName="EditIndicator" Value="Collapsed"/>
    <Setter Property="Visibility" TargetName="NavigatorIndicator" Value="Collapsed"/>
    </Trigger>
    <Trigger Property="IsCurrent" Value="True">
    <Setter Property="Background" TargetName="NavigatorIndicatorBackground">
    <Setter.Value>
    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
    <GradientStop Color="#FF848484" Offset="0"/>
    <GradientStop Color="#FFE4E4E4" Offset="1"/>
    </LinearGradientBrush>
    </Setter.Value>
    </Setter>
    <Setter Property="Visibility" TargetName="NavigatorIndicator" Value="Visible"/>
    </Trigger>
    <Trigger Property="IsInEditMode" Value="True">
    <Setter Property="Visibility" TargetName="EditIndicator" Value="Visible"/>
    </Trigger>
    </ControlTemplate.Triggers>
    </ControlTemplate>
    </Setter.Value>
    </Setter>
    <Setter Property="Background" Value="Red"/>
    <Setter Property="Foreground" Value="White"/>
    <Setter Property="BorderBrush" Value="#FFCBCBCB"/>
    <Setter Property="BorderThickness" Value="0"/>
    <Setter Property="FontWeight" Value="Normal"/>
    <Setter Property="VerticalContentAlignment" Value="Stretch"/>
    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    <Setter Property="Padding" Value="0"/>
    <Setter Property="SnapsToDevicePixels" Value="True"/>
    </Style>
    </Window.Resources>
        <Grid>
            <telerik:RadGridView AutoGenerateColumns="True" ItemsSource="{Binding}" Height="290" HorizontalAlignment="Left" Margin="17,22,0,0" Name="radGridView1" VerticalAlignment="Top" Width="631" />
        </Grid>
    </Window>















  11. vanya
    vanya avatar
    35 posts
    Member since:
    Nov 2008

    Posted 22 Jun 2010 Link to this post

    here is the picture
  12. Salini
    Salini avatar
    6 posts
    Member since:
    Aug 2010

    Posted 11 Aug 2010 Link to this post

    Hi,

    I am using RadGridView with IsMouseOver property. I want the row color as #CF7600 when mouse hovers on it. I have set the IsMouseOver property with background color. But when I put mouse on the row, for a fraction of second #CF7600 color shows up and turns back to light yellow (default color). Can you check this and tell me what the problem is.
    <telerik:RadGridView.RowStyle>
        <Style TargetType="{x:Type telerik:GridViewRow}">
                   <Style.Triggers>
         <Trigger Property="IsMouseOver" Value="true">
          <Setter Property="Background" Value="#CF7600"/>       
         </Trigger>
        </Style.Triggers>
       </Style>
      </telerik:RadGridView.RowStyle>

    Regards,
    Salini
  13. Vanya Pavlova
    Admin
    Vanya Pavlova avatar
    2019 posts

    Posted 12 Aug 2010 Link to this post

    Hello Salini,

    If you want to achieve the desired result simply you have to edit the  GridViewRow's ControlTemplate and especially the brushes used in  Background Over and Background Selected,please see the following  link.
    I have prepared an example for you that  uses your color in Background_Over  and pink In Background_Selected.
    Please see the attached application and let me know if you need any further assistance. 

    Kind regards,
    Vanya Pavlova
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  14. Salini
    Salini avatar
    6 posts
    Member since:
    Aug 2010

    Posted 12 Aug 2010 Link to this post

    Thank you. It worked.
  15. Valdomiro
    Valdomiro avatar
    2 posts
    Member since:
    Nov 2010

    Posted 10 Nov 2010 Link to this post

    Good Afternoon,

    I'm having trouble for customize the colors of mouseover color and selected color in Expression Blend 4.

    I'll like an intstruction for insert between the tags <telerik:RadgridView></telerik:RadgridView>.

    Thank You,

    Valdomiro.
  16. Vanya Pavlova
    Admin
    Vanya Pavlova avatar
    2019 posts

    Posted 11 Nov 2010 Link to this post

    Hello Valdomiro,



    In order to change the colors when a GridViewRow is in MouseOver and Selected States, you need to change the brushes used in Background_Over and Background_Selected border elements within its template.
    Please use the attached example that demonstrates this approach.


    If you need any further assistance please let me know.


    Greetings,
    Vanya Pavlova
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  17. Seb
    Seb avatar
    3 posts
    Member since:
    Dec 2015

    Posted 21 Dec 2015 Link to this post

    I have selected a gridview row and it is colored with "Chartreuse". 

    Why is only the border of this row in this color? Where can I change this property?

    When I leave the focus of this grid by clicking on another button, the color changes in a kind of gray. Why does it change to this color? Where can I change this property?

    I have attached two example pictures.

    Kind regards

    Sebastian

  18. Seb
    Seb avatar
    3 posts
    Member since:
    Dec 2015

    Posted 22 Dec 2015 in reply to Seb Link to this post

    Ok I have found the answer in this URL:

     

    http://www.telerik.com/support/code-library/remove-the-selectedunfocused-state-for-the-radgridview

     

  19. Stefan X1
    Admin
    Stefan X1 avatar
    523 posts

    Posted 22 Dec 2015 Link to this post

    Hi Sebastian,

    Actually, the Background is being set, however as the theme is applied over it you are observing this visual behavior. As explained and demonstrated in a sample project by my colleague Vanya, the proper way to achieve this customization is to modify the template of GridViewRow. Please refer to the attachment from the previous answer.

    Best Regards,
    Stefan X1
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for WPF is Visual Studio 2017 Ready