Creating 2 styles of RadGrid in one project

[Chester]

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)

[Vanya Pavlova]

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

[Chester]

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

[Vanya Pavlova]

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