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

[Solved] Creating 2 styles of RadGrid in one project

3 Answers 127 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.

Chester asked on 04 Apr 2011, 09:03 AM

2-styes-of-Grid.JPG

Hi Telerik,

We're creating a silverlight project and we agreed to use two styles of radgridview in our project. (please see attached image) I already modified the first radgridview but I have problems in modifying the second one. I styled the gridheaderview part of the first radgrid explicitly by not naming the x:key of the GridViewHeaderCell. Can you help me with this? Thanks :)

Chester

note: image is done in Photoshop (serves as our project reference)

3 Answers, 1 is accepted

answered on 04 Apr 2011, 09:18 AM

Hello Chester,

I am quite not sure that I understand your requirement correctly and the relation between these pictures.
Can you please share with us the issues you are currently experiencing with RadGridView's styling?
For the time being I would suggest you to review our online documentation on this matter, following this link.
You may also send us a runnable project in a new support ticket, where we can see what is wrong.

Best wishes,
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

answered on 04 Apr 2011, 11:04 AM

Hi Vanya,

Here is my xaml code for the RadGridHeaderCell. Apparently, I have successfully customized the black-styled RadGridView. However, as I mofidy the 2nd RadGridView to have its uniques style (silver style), I get problems in editing its gridviewheader style. Since, I did not name this style, this style applies to all grids available in my project. Basically I just need to have 2 sets of RadGrid with 2 unique visual styles for its Header Cell. Can you assist me with this?

Thanks,
Chester

<Style TargetType="telerikGridView:GridViewHeaderCell">

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="telerikGridView:GridViewHeaderCell">

<Grid x:Name="PART_HeaderCellGrid">

<Grid.ColumnDefinitions>

<ColumnDefinition Width="*"/>

<ColumnDefinition Width="Auto"/>

</Grid.ColumnDefinitions>

<VisualStateManager.VisualStateGroups>

<VisualStateGroup x:Name="CommonStates">

<VisualStateGroup.Transitions>

<VisualTransition GeneratedDuration="00:00:00.2000000" To="Normal"/>

<VisualTransition GeneratedDuration="00:00:00.2000000" To="MouseOver"/>

</VisualStateGroup.Transitions>

<VisualState x:Name="Normal"/>

<VisualState x:Name="MouseOver">

<Storyboard>

<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="GridViewHeaderCell_Over">

<EasingDoubleKeyFrame KeyTime="0:0:0" Value="1"/>

</DoubleAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">

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

<DiscreteObjectKeyFrame.Value>

<SolidColorBrush Color="White"/>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="Ascending">

<Storyboard>

<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">

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

<DiscreteObjectKeyFrame.Value>

<SolidColorBrush Color="Black"/>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_SortIndicator">

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

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="GridViewHeaderCell_Selected">

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

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="Descending">

<Storyboard>

<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">

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

<DiscreteObjectKeyFrame.Value>

<SolidColorBrush Color="Black"/>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_SortIndicator">

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

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="RenderTransform" Storyboard.TargetName="PART_SortIndicator">

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

<DiscreteObjectKeyFrame.Value>

<ScaleTransform ScaleY="1" ScaleX="1"/>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="GridViewHeaderCell_Selected">

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

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

<Border x:Name="GridViewHeaderCell" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="2">

<Border BorderBrush="{StaticResource shinyblack_outline}" BorderThickness="1" Background="{StaticResource shinyblack_normal}"/>

</Border>

<Border x:Name="GridViewHeaderCell_Over" BorderBrush="#FF848484" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="2" Opacity="0">

<Border BorderBrush="{StaticResource shinyblack_outline}" BorderThickness="1" Background="{StaticResource shinyblack_mouseover}"/>

</Border>

<Border x:Name="GridViewHeaderCell_Selected" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="2" Opacity="0">

<Border.BorderBrush>

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

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

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

</LinearGradientBrush>

</Border.BorderBrush>

<Border BorderThickness="1">

<Border.Background>

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

<GradientStop Color="#FFFFD74E" Offset="0.996"/>

<GradientStop Color="#FFFFDCAB" Offset="0.17"/>

<GradientStop Color="#FFFFB062" Offset="0.57"/>

<GradientStop Color="#FFFFD18F" Offset="0.56"/>

<GradientStop Color="#FFFFBA74"/>

</LinearGradientBrush>

</Border.Background>

<Border.BorderBrush>

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

<GradientStop Color="#FFB69A78"/>

<GradientStop Color="#FFFFE17A" Offset="0.126"/>

</LinearGradientBrush>

</Border.BorderBrush>

</Border>

<ContentControl x:Name="ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Grid.Column="0" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" IsTabStop="{TemplateBinding IsTabStop}" Margin="{TemplateBinding Padding}" Style="{StaticResource StretchedContentControl}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>

<Path x:Name="PART_SortIndicator" Grid.ColumnSpan="2" Data="M0,0 L1,0 2,0 3,0 4,0 5,0 5,1 4,1 4,2 3,2 3,3 2,3 2,2 1,2 1,1 0,1 0,0 z" Fill="Black" HorizontalAlignment="Center" Height="3" Margin="0,3,0,0" Opacity="0" RenderTransformOrigin=".5,.5" Stretch="Fill" VerticalAlignment="Top" Width="5">

<Path.RenderTransform>

<TransformGroup>

<ScaleTransform ScaleY="-1" ScaleX="1"/>

<SkewTransform AngleY="0" AngleX="0"/>

<RotateTransform Angle="0"/>

<TranslateTransform X="0" Y="0"/>

</TransformGroup>

</Path.RenderTransform>

</Path>

<telerikGridView:FilteringDropDown x:Name="PART_DistinctFilterControl" Grid.Column="1" Margin="0,0,8,0" Visibility="{TemplateBinding FilteringUIVisibility}">

<telerik:StyleManager.Theme>

<telerik:Office_BlackTheme/>

</telerik:StyleManager.Theme>

</telerikGridView:FilteringDropDown>

<Thumb x:Name="PART_LeftHeaderGripper" Grid.ColumnSpan="2" HorizontalAlignment="Left" IsTabStop="{TemplateBinding IsTabStop}" Style="{StaticResource ColumnHeaderGripperStyle}"/>

<Thumb x:Name="PART_RightHeaderGripper" Grid.ColumnSpan="2" HorizontalAlignment="Right" IsTabStop="{TemplateBinding IsTabStop}" Style="{StaticResource ColumnHeaderGripperStyle}"/>

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

<Setter Property="Background">

<Setter.Value>

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

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

<GradientStop Color="#FF868686"/>

<GradientStop Color="#FF4F4F4F" Offset="0.42"/>

<GradientStop Color="#FF0E0E0E" Offset="0.43"/>

</LinearGradientBrush>

</Setter.Value>

</Setter>

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

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

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

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

<Setter Property="Padding" Value="5,0,3,0"/>

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

</Style>

answered on 04 Apr 2011, 12:48 PM

Hello Chester,

In case you need to have such unique styles, make them explicit through specifying the x:Key attribute of the corresponding style and set it to the columns in an appropriate manner, please refer to the markup below:

<UserControl

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"

x:Class="SilverlightApplication65.MainPage"

Width="640" Height="480">

<UserControl.Resources>

<Style x:Key="style1" TargetType="telerik:GridViewHeaderCell">

<Setter Property="Background" Value="Red"/>

<Setter Property="Foreground" Value="Blue"/>

</Style>

<Style x:Key="style2" TargetType="telerik:GridViewHeaderCell">

<Setter Property="Foreground" Value="Yellow"/>

<Setter Property="Background" Value="Blue"/>

</Style>

</UserControl.Resources>

<Grid x:Name="LayoutRoot" Background="White" DataContext="{Binding Source={StaticResource SampleDataSource}}">

<telerik:RadGridView x:Name="GRID1" Margin="64,32,48,0" ItemsSource="{Binding Collection}" Height="192" VerticalAlignment="Top">

<telerik:RadGridView.Columns>

<telerik:GridViewDataColumn HeaderCellStyle="{StaticResource style1}" Header="Property1" DataMemberBinding="{Binding Property1}"/>

<telerik:GridViewDataColumn HeaderCellStyle="{StaticResource style1}" Header="Property2" DataMemberBinding="{Binding Property2}"/>

<telerik:GridViewDataColumn HeaderCellStyle="{StaticResource style1}" Header="Property3" DataMemberBinding="{Binding Property3}"/>

</telerik:RadGridView.Columns>

</telerik:RadGridView>

<telerik:RadGridView x:Name="GRID2" Margin="64,0,48,48" ItemsSource="{Binding Collection}" Height="192" VerticalAlignment="Bottom">

<telerik:RadGridView.Columns>

<telerik:GridViewDataColumn HeaderCellStyle="{StaticResource style2}" Header="Property1" DataMemberBinding="{Binding Property1}"/>

<telerik:GridViewDataColumn HeaderCellStyle="{StaticResource style2}" Header="Property2" DataMemberBinding="{Binding Property2}"/>

<telerik:GridViewDataColumn HeaderCellStyle="{StaticResource style2}" Header="Property1" DataMemberBinding="{Binding Property3}"/>

</telerik:RadGridView.Columns>

</telerik:RadGridView>

</Grid>

</UserControl>

Best wishes,
Vanya Pavlova
the Telerik team