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

Styling the Column Headers - with theme

2 Answers 125 Views
GridView
This is a migrated thread and some comments may be shown as answers.
Tim
Top achievements
Rank 1
Tim asked on 18 Oct 2013, 02:41 PM
I am attempting to customize the column headers for RadGridView, but am running into a problem where the template generated in Blend is not based on my selected theme. I have assigned the Windows7Theme to the GridViewHeaderCell before editing the template and have also assigned the theme to the RadGridView itself, but the header cells use the office black theme instead. I am following the instructions found here: http://www.telerik.com/help/wpf/gridview-styling-column-headers.html

My goal is to add a button to the header. I do not wish to alter the style/theme other than that. If there is another way to accomplish this, or a way to edit the header cell template that will respect the theme, I would be interested to know how. Thank you!

I am using Visual Studio 2012 and Expression Blend 4.

I have attached a screenshot of the resulting gridview. Here is the XAML:
<Window
    x:Class="WpfApplication1.MainWindow"
    x:Name="TheWindow"
    Title="MainWindow"
    Width="640" Height="480">
    <Window.Resources>
        <Style x:Key="GridViewHeaderCellStyle1" TargetType="{x:Type telerik:GridViewHeaderCell}">
            <!-- Auto-generated template content removed for sake of brevity -->
            <Setter Property="Background">
                <Setter.Value>
            <!-- Note the colors here, they are the office black theme colors that have been hard coded into the template. Remnants of the office black theme are found throughout the auto-generated template -->
                    <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="DropIndicatorBrush" Value="White"/>
            <Setter Property="DropIndicatorThickness" Value="2"/>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="SnapsToDevicePixels" Value="True"/>
        </Style>
    </Window.Resources>
 
    <Grid>
     <!-- GridViewHeaderCell used for editing template -->
        <telerik:GridViewHeaderCell telerik:StyleManager.Theme="Windows7" Style="{DynamicResource GridViewHeaderCellStyle1}" />
         
        <telerik:RadGridView AutoGenerateColumns="False">
            <telerik:StyleManager.Theme>
                <telerik:Windows7Theme/>
            </telerik:StyleManager.Theme>
            <telerik:RadGridView.Columns>
                <telerik:GridViewDataColumn Header="ID3" HeaderCellStyle="{DynamicResource GridViewHeaderCellStyle1}" />
            </telerik:RadGridView.Columns>
             
        </telerik:RadGridView>
    </Grid>
</Window>

2 Answers, 1 is accepted

Sort by
0
Matt
Top achievements
Rank 1
answered on 22 Oct 2013, 03:32 PM
Why not start from setting the theme for the entire app in the MainWindow class (or whatever you may have renamed it) as seen in the C# portion here:
http://www.telerik.com/help/wpf/common-styling-apperance-setting-theme-wpf.html

And then you won't have to worry about the custom styling, or am I missing something?
0
Yoan
Telerik team
answered on 23 Oct 2013, 11:50 AM
Hello Tim,

Generally, the styles used in our themes are theme specific. Thus, you should predefine the template of GridViewHeaderCell against each theme. You can manually extract the template for the GridViewHeaderCell that is available with the installation files of the RadControls. You can find it together with all the other templates used for the GridView inside "Telerik.Windows.Controls.GridView.xaml" file browsing to "InstallationFolder\WPF\Themes\OfficeBlack(or Windows7/ Windows8 )\Themes" folder.

However, you can check this help article on how to place a button in GridViewHeaderCell.

I hope this information helps.

Regards,
Yoan
Telerik
TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WPF.
Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
Sign up for Free application insights >>
Tags
GridView
Asked by
Tim
Top achievements
Rank 1
Answers by
Matt
Top achievements
Rank 1
Yoan
Telerik team
Share this question
or