How to get CheckBox in Header to match theme?

[Jeff]

I have a RadGridView in which I need a column of checkboxes.  My problem?  I need a checkbox in the header that will cause all the checkboxes in the column to be selected - and I need that checkbox and its text to match the style of the other headers, regardless of what theme might be selected.

From this thread I'd thought that this would work:

<telerik:GridViewDataColumn

        IsReadOnly="True"

        >

    <telerik:GridViewDataColumn.Header>

        <CheckBox
                                        telerik:StyleManager.Theme="Metro"
                    x:Name="deleteFoo"
                    >

            Delete?

        </CheckBox>

    </telerik:GridViewDataColumn.Header>

    <telerik:GridViewDataColumn.CellTemplate>

        <DataTemplate>

            <CheckBox

                    IsChecked="{Binding Path=isFoo,Mode=TwoWay}"

                    />

        </DataTemplate>

    </telerik:GridViewDataColumn.CellTemplate>

</telerik:GridViewDataColumn>

It doesn't.  In the Metro theme, header text is drawn in grey. My Delete? header text is drawn in black.

What I don't want is to apply a specific foreground color so that it matches Metro. Because if the theme were to be changed, it'd not match.  (I also don't want to apply a hard-coded theme name, but I was hoping that I could bind to a variable that'd be set by my theme initializing code, but there's no point in worrying about that, when the literal string doesn't).

Just on the off chance, I've tried to set the theme in the code-behind:

StyleManager.SetTheme(this.deleteFoo, new MetroTheme());

And I've tried to set the theme from the parent:

StyleManager.SetThemeFromParent(this.deleteFoo, this);

None if it has worked.  The CheckBox always draws black, regardless of the theme I've tried to attach to it.

[Nick]

Hi Jeffrey,

Have you tried putting the Text in a separate TextBlock? Do you still get the same behavior that way? 

Looking forward to hearing from you. 

Kind regards,
Nik
the Telerik team

[Jeff]

You mean like this?

<CheckBox telerik:StyleManager.Theme="Metro">
    <TextBlock telerik:StyleManager.Theme="Metro">
        Delete?
    </TextBlock>
</CheckBox>

Makes no difference.  The text is still not styled the way that Metro styles column headers.

One thing I was thinking.

This could be one of two problems. It could be that the theme is being applied, but the context is messed up. That it's using the Metro style, but in drawing text in the style of ordinary text, instead of the style of gridview column headers.  Or it could be that it's not using the style at all.

So I tried it using Expression_Dark, which draws normal text in a light gray.  The checkbox text still drew in black.  Looks like the themes aren't being applied at all.

[Vanya Pavlova]

Hello Jeffrey,

 


Our themes can be applied to several Microsoft components, which are listed in our help. 
TextBlock is not included in this list and you cannot apply a theme to this element. When you apply a Metro theme to CheckBox its content will be drawn black and the behavior is by design. You may alter its appearance through predefining its template against the corresponding theme. Also you can predefine the main MetroColors as shown in our help to match your exact requirements. 

Regards,
Vanya Pavlova
the Telerik team

[Jeff]

I'd started by trying to set the theme on a CheckBox - I tried TextBlock only because CheckBox wasn't working.

And according to the help page you linked, CheckBox should work.

I tried the code on that page, and it didn't work. But then, it doesn't seem to make any sense.

<Window.Resources>
    <telerik:Expression_DarkTheme x:Key="Theme" />
        <Style TargetType="Button">
    </Style>
</Window.Resources>

This, as I read it, declares a static instance of Expression_DarkTheme, with a key of "Theme", that is never referenced, and then defines a style that applies no settings to a button. How that combination would apply the Telerk Expression Dark theme to a button is not clear to me.

As for "When you apply a Metro theme to CheckBox its content will be drawn black and the behavior is by design" - what I want is to put a checkbox into a gridview column header, and to have it have the same look and behavior as any other column header. It should inherit its styling in the same way that any other column header cell does.

[Vanya Pavlova]

Hello Jeffrey,

 

A theme to button (or any RadControl being supported by our theming mechanism) can be applied in this way:

<Window.Resources>
    <telerik:Expression_DarkTheme x:Key="Theme" />
        <Style TargetType="Button" telerik:StyleManager.Theme="{StaticResource Theme}">
    </Style>
</Window.Resources>

If you set Expression_Dark theme to RadGridView and to the CheckBox itself which is in the Header the Foreground will be applied correspondingly:

<telerik:RadGridView telerik:StyleManager.Theme="Expression_Dark" ItemsSource="{Binding Collection}">
            <telerik:RadGridView.Columns>
                <telerik:GridViewDataColumn DataMemberBinding="{Binding Property2}">
                    <telerik:GridViewDataColumn.Header>
                        <CheckBox Content="CheckBox" telerik:StyleManager.Theme="Expression_Dark"/>
                        </telerik:GridViewDataColumn.Header>
                    </telerik:GridViewDataColumn>
                </telerik:RadGridView.Columns>
            </telerik:RadGridView>

In Metro theme the Foreground of the CheckBox is Black, those of GridViewHeaderCells use DarkGray color. If you want to apply the same gray Foreground to the CheckBox's Content you may set it manually. 

Regards,
Vanya Pavlova
the Telerik team

[Jeff]

Your new example of applying a theme to a bunch of controls actually looks like it would work, unlike the example on your help page, which looks like it does nothing.

But, when I try it, I get an error: "Property 'Theme' is not attachable to elements of type 'Style'."

In any case, if it did work it'd be equivalent to applying the theme directly to the individual elements, and that isn't working.

You tell me "In Metro theme the Foreground of the CheckBox is Black, those of GridView header cells use DarkGray color."

And if that is true, it's wrong.  Because in Metro theme, the Foreground in GridView header cells is not black, it's gray. And so CheckBoxes placed in GridView header cells should inherit that gray.

And finally: " If you want to apply the same gray Foreground to the CheckBox's Content you may set it manually."

I hope you understand why that is entirely unacceptable.  The whole point of having themes is so that decisions about coloring, fonts, etc., are made in one place, rather than scattered piecemeal across the code.  Certainly I can set the colors explicitly, in these header cells.  And they'll look right, for the moment. But when someone inevitably switches the theme in the config file, these checkboxes will still be gray, and all of the other headers will be whatever color was specified in the new theme.

What I want is simple - to be able to put a checkbox in a gridview header that inherits its styling from context.  Specifically, that the text in the checkbox should have the same foreground color as other text in gridview headers.