This is a migrated thread and some comments may be shown as answers.

GridView Styling

2 Answers 125 Views

GridView

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

Subrajit asked on 17 Feb 2012, 11:48 AM

GridVIew.jpg

Hi,
I have a gridview which uses the Group functionality of Telerik GridView. I am able to display the data well, but I am unable to style it. I need to display the column as displayed in the attached image. In addition, in the GroupRow, I want to display an image next to the name. And the last thing is, currently if you notice there is a Black background in the gridview. I understand it is because of the dark theme which gets applied automatically. However, irrespective of what we do, we are unable to remove it.

Any help in these regards will be helpful.

Here is my style:

<UserControl.Resources>

<Style x:Key="GridViewAlternateStyle" TargetType="Telerik_Windows_Controls_GridView:GridViewRow">

<Setter Property="Background" Value="#00FFFFFF"/>

<Setter Property="IsTabStop" Value="False" />

<Setter Property="Padding" Value="0" />

<Setter Property="Margin" Value="0" />

<Setter Property="MinHeight" Value="30"/>

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="Telerik_Windows_Controls_GridView:GridViewRow">

<Grid x:Name="grid">

<Grid.ColumnDefinitions>

<ColumnDefinition Width="Auto"/>

</Grid.ColumnDefinitions>

<vsm:VisualStateManager.VisualStateGroups>

<vsm:VisualStateGroup x:Name="FocusStates">

<vsm:VisualState x:Name="Unfocused">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="NavigatorIndicator" Storyboard.TargetProperty="Visibility">

<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Collapsed"/>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</vsm:VisualState>

<vsm:VisualState x:Name="Focused">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="NavigatorIndicator" Storyboard.TargetProperty="Visibility">

<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible"/>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</vsm:VisualState>

</vsm:VisualStateGroup>

<vsm:VisualStateGroup x:Name="SelectionStates">

<vsm:VisualState x:Name="Unselected"/>

</vsm:VisualStateGroup>

<vsm:VisualStateGroup x:Name="CommonStates">

<vsm:VisualState x:Name="Normal"/>

<vsm:VisualState x:Name="MouseOver">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="SelectionBackground" Storyboard.TargetProperty="Background">

<DiscreteObjectKeyFrame KeyTime="0:0:0">

<DiscreteObjectKeyFrame.Value>

<SolidColorBrush Color="#FFd9ebf5"/>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</vsm:VisualState>

<vsm:VisualState x:Name="Selected">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="SelectionBackground" Storyboard.TargetProperty="Background">

<DiscreteObjectKeyFrame KeyTime="0:0:0">

<DiscreteObjectKeyFrame.Value>

<SolidColorBrush Color="#FFd9ebf5"/>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</vsm:VisualState>

</vsm:VisualStateGroup>

<vsm:VisualStateGroup x:Name="ValueStates">

<vsm:VisualState x:Name="Valid">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="InvalidBorder" Storyboard.TargetProperty="Visibility">

<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Collapsed"/>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</vsm:VisualState>

<vsm:VisualState x:Name="Invalid">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="InvalidBorder" Storyboard.TargetProperty="Visibility">

<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible"/>

</ObjectAnimationUsingKeyFrames>

<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="InvalidBorder" Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)">

<SplineColorKeyFrame KeyTime="00:00:00" Value="#FF115313"/>

</ColorAnimationUsingKeyFrames>

</Storyboard>

</vsm:VisualState>

</vsm:VisualStateGroup>

</vsm:VisualStateManager.VisualStateGroups>

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

<Style x:Key="GridViewRowStyle" TargetType="Telerik_Windows_Controls_GridView:GridViewRow">

<Setter Property="Background" Value="#FFf7f7f7"/>

<Setter Property="IsTabStop" Value="False" />

<Setter Property="Padding" Value="0" />

<Setter Property="Margin" Value="0" />

<Setter Property="MinHeight" Value="30"/>

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="Telerik_Windows_Controls_GridView:GridViewRow">

<Grid x:Name="grid">

<Grid.ColumnDefinitions>

<ColumnDefinition Width="Auto"/>

</Grid.ColumnDefinitions>

<vsm:VisualStateManager.VisualStateGroups>

<vsm:VisualStateGroup x:Name="FocusStates">

<vsm:VisualState x:Name="Unfocused">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="NavigatorIndicator" Storyboard.TargetProperty="Visibility">

<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Collapsed"/>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</vsm:VisualState>

<vsm:VisualState x:Name="Focused">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="NavigatorIndicator" Storyboard.TargetProperty="Visibility">

<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible"/>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</vsm:VisualState>

</vsm:VisualStateGroup>

<vsm:VisualStateGroup x:Name="SelectionStates">

<vsm:VisualState x:Name="Unselected"/>

</vsm:VisualStateGroup>

<vsm:VisualStateGroup x:Name="CommonStates">

<vsm:VisualState x:Name="Normal"/>

<vsm:VisualState x:Name="MouseOver">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="SelectionBackground" Storyboard.TargetProperty="Background">

<DiscreteObjectKeyFrame KeyTime="0:0:0">

<DiscreteObjectKeyFrame.Value>

<SolidColorBrush Color="#FFd9ebf5"/>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</vsm:VisualState>

<vsm:VisualState x:Name="Selected">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="SelectionBackground" Storyboard.TargetProperty="Background">

<DiscreteObjectKeyFrame KeyTime="0:0:0">

<DiscreteObjectKeyFrame.Value>

<SolidColorBrush Color="#FFd9ebf5"/>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</vsm:VisualState>

</vsm:VisualStateGroup>

<vsm:VisualStateGroup x:Name="ValueStates">

<vsm:VisualState x:Name="Valid">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="InvalidBorder" Storyboard.TargetProperty="Visibility">

<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Collapsed"/>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</vsm:VisualState>

<vsm:VisualState x:Name="Invalid">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="InvalidBorder" Storyboard.TargetProperty="Visibility">

<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible"/>

</ObjectAnimationUsingKeyFrames>

<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="InvalidBorder" Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)">

<SplineColorKeyFrame KeyTime="00:00:00" Value="#FF115313"/>

</ColorAnimationUsingKeyFrames>

</Storyboard>

</vsm:VisualState>

</vsm:VisualStateGroup>

</vsm:VisualStateManager.VisualStateGroups>

<Border Margin="{TemplateBinding Margin}" MinHeight="{TemplateBinding MinHeight}" x:Name="SelectionBackground" Grid.Column="2" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0" Padding="{TemplateBinding Padding}"/>

<Telerik_Windows_Controls_GridView:IndicatorPresenter Background="#FFE5E9D8" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1,1,1,0" x:Name="PART_IndicatorPresenter" Grid.Column="0" >

<Path Height="8" Margin="7,0,0,0" x:Name="NavigatorIndicator" Width="5" Data="M254.5,183.75 L254.5,193.33333 260.75,188.16682 z" Fill="#FF115313" Stretch="Fill"/>

</Telerik_Windows_Controls_GridView:IndicatorPresenter>

<Telerik_Windows_Controls_GridView:IndentPresenter Background="{TemplateBinding Background}" x:Name="PART_IndentPresenter" Grid.Column="1" />

<Telerik_Windows_Controls_GridView:DataCellsPresenter Height="Auto" MinHeight="{TemplateBinding MinHeight}" x:Name="PART_DataCellsPresenter" Grid.Column="2" />

<Rectangle Height="Auto" Margin="0" x:Name="InvalidBorder" Width="Auto" Visibility="Collapsed" Grid.Column="0" Grid.ColumnSpan="3" Stroke="Red" StrokeThickness="2"/>

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

<Style x:Key="RadGroupRowStyle" TargetType="Telerik_Windows_Controls_GridView:GridViewGroupRow">

<Setter Property="Foreground" Value="#FF333333" />

<Setter Property="Background" Value="#FFefefef" />

<Setter Property="HorizontalContentAlignment" Value="Center" />

<Setter Property="VerticalContentAlignment" Value="Center" />

<Setter Property="FontSize" Value="12.33" />

<Setter Property="FontWeight" Value="Medium" />

</Style>

<Style x:Key="GridViewHeaderRowStyle" TargetType="Telerik_Windows_Controls_GridView:GridViewHeaderRow">

<!--<Setter Property="Template" Value="{StaticResource GridViewHeaderRowTemplate}"/>

<Setter Property="Background">

<Setter.Value>

<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#FFD1DBB9" Offset="0.498"/>

<GradientStop Color="#FF274415" Offset="0"/>

</LinearGradientBrush>

</Setter.Value>

</Setter>-->

<Setter Property="MinHeight" Value="26"/>

<Setter Property="BorderThickness" Value="0"/>

<Setter Property="Margin" Value="0"/>

<Setter Property="Padding" Value="0"/>

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="Telerik_Windows_Controls_GridView:GridViewHeaderRow">

<Border Margin="{TemplateBinding Margin}" MinHeight="{TemplateBinding MinHeight}" x:Name="PART_GridViewHeaderRowBorder" Background="Red" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}">

<Grid>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="Auto"/>

</Grid.ColumnDefinitions>

<Border Grid.ColumnSpan="3" Background="{TemplateBinding Background}" BorderBrush="#FFEEEEEE" BorderThickness="0"/>

<Telerik_Windows_Controls_GridView:IndicatorPresenter MinHeight="{TemplateBinding MinHeight}" x:Name="PART_IndicatorPresenter" Grid.Column="0" />

<Telerik_Windows_Controls_GridView:IndentPresenter MinHeight="100" x:Name="PART_IndentPresenter" Grid.Column="1" IndentLevel="{TemplateBinding IndentLevel}"/>

<Telerik_Windows_Controls_GridView:DataCellsPresenter Background="{StaticResource GridViewHeaderRowDataCellsPresenterBackground}" MinHeight="{TemplateBinding MinHeight}" x:Name="PART_DataCellsPresenter" Grid.Column="2" />

</Grid>

</Border>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

<!--<SolidColorBrush x:Key="GridViewCellBorderBrush" Color="{StaticResource GridViewElementOuterBorderBrushColor}"/>

<Color x:Key="GridViewBackgroundItemColor">#FF7F7F7F</Color>

<SolidColorBrush x:Key="GridViewBackgroundItemBackground" Color="{StaticResource GridViewBackgroundItemColor}"/>-->

<Style x:Key="RadGridViewStyle" TargetType="telerikGridView:RadGridView">

<Setter Property="AlternateRowBackground" Value="#00FFFFFF"></Setter>

<Setter Property="SelectionMode" Value="Extended"/>

<Setter Property="CanUserReorderColumns" Value="True"/>

<Setter Property="CanUserResizeColumns" Value="True"/>

<Setter Property="CanUserSortColumns" Value="True"/>

<Setter Property="AutoGenerateColumns" Value="True"/>

<Setter Property="RowDetailsVisibilityMode" Value="VisibleWhenSelected"/>

<Setter Property="BorderBrush" Value="#FF89c5d8"/>

<Setter Property="BorderThickness" Value="1"/>

</Style>

<Color x:Key="Transparent">Transparent</Color>

<SolidColorBrush x:Key="GridViewHeaderRowDataCellsPresenterBackground" Color="{StaticResource Transparent}"/>

<Style x:Key="GridViewHeaderCellStyle" TargetType="Telerik_Windows_Controls_GridView:GridViewHeaderCell">

<Setter Property="Foreground" Value="#FF333333" />

<Setter Property="Background" Value="#FFefefef" />

<Setter Property="HorizontalContentAlignment" Value="Center" />

<Setter Property="VerticalContentAlignment" Value="Center" />

<Setter Property="FontSize" Value="12.33" />

<Setter Property="FontWeight" Value="Medium" />

<Setter Property="IsTabStop" Value="False" />

<Setter Property="Margin" Value="0,1,0,0"/>

<Setter Property="MinHeight" Value="30" />

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="Telerik_Windows_Controls_GridView:GridViewHeaderCell">

<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" >

<Storyboard>

<ColorAnimationUsingKeyFrames BeginTime="0" Duration="0" Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">

<SplineColorKeyFrame KeyTime="0" Value="#FFd1d1d1"/>

</ColorAnimationUsingKeyFrames>

<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)">

<EasingColorKeyFrame KeyTime="00:00:00" Value="#FFd6eaf1"/>

</ColorAnimationUsingKeyFrames>

<EasingColorKeyFrame KeyTime="00:00:00" Value="#FFcee6f0"/>

</ColorAnimationUsingKeyFrames>

<EasingColorKeyFrame KeyTime="00:00:00" Value="#FFcee6f0"/>

</ColorAnimationUsingKeyFrames>

<EasingColorKeyFrame KeyTime="00:00:00" Value="#FFbee0ec"/>

</ColorAnimationUsingKeyFrames>

</Storyboard>

</vsm:VisualState>

<vsm:VisualState x:Name="MouseOver">

<Storyboard>

<ColorAnimationUsingKeyFrames BeginTime="0" Duration="0" Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">

<SplineColorKeyFrame KeyTime="0" Value="#FF989462"/>

</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.ColumnDefinitions>

<ColumnDefinition Width="Auto" />

<ColumnDefinition Width="*" />

<ColumnDefinition Width="Auto" />

</Grid.ColumnDefinitions>

<Rectangle x:Name="BackgroundRectangle" Stretch="Fill" Fill="#FF666666" Grid.ColumnSpan="2"/>

<Rectangle x:Name="BackgroundGradient" Stretch="Fill" Grid.ColumnSpan="2">

<Rectangle.Fill>

<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#FFb2ccdb" Offset="0"/>

<GradientStop Color="#FFa9c6d5" Offset="0.5"/>

<GradientStop Color="#FFa5c1d0" Offset="0.5"/>

<GradientStop Color="#FF9bbecf" Offset="1"/>

</LinearGradientBrush>

</Rectangle.Fill>

</Rectangle>

<ContentPresenter Grid.RowSpan="2" Margin="{TemplateBinding Padding}" VerticalAlignment="Center" HorizontalAlignment="Center"/>

<Rectangle Name="VerticalSeparator" Grid.RowSpan="2" Grid.Column="2" Width="1" VerticalAlignment="Stretch" />

<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="#FF888888" />

</Path.Fill>

<Path.RenderTransform>

<TransformGroup>

<ScaleTransform x:Name="SortIconTransform" ScaleX=".9" ScaleY=".9" />

</TransformGroup>

</Path.RenderTransform>

</Path>

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

<Style TargetType="telerik:GridViewIndentCell">

<Setter Property="Visibility" Value="Collapsed" />

</Style>

</UserControl.Resources>

GridView Styling

2 Answers, 1 is accepted