Changing the Header background

[Ron]

I tried to change the background of the Expander header but I didn't succeeded.
Could you please provide a short code sample that makes a gradient background to an expander header?

Thanks

[Ivan]

Hello Ron,

To change the look of RadExpander you should replace its template with a new one.
Attached you can find a sample project in which a custom control applies a new template to RadExpander.

Hope this helps.

Greetings,
Ivan
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Ron]

I took the example you attached that works great and change the reference to the new Telerik.Windows.Controls (from Q1 2009 trial) and now the background is the default background.
Could you please provide a short code sample with the new dll that makes a gradient background to an expander header?

Thanks in advance.

[Ivan]

Hello Ron,

I modified the example for you and attached it to this post. Please, let me know if you have further questions.

All the best,
Ivan
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.

[Toshendra]

How to change header content in this example?

[Ivan]

Hi Toshendra,

Indeed there are two controls, in attached example, named expander: the Telerik's RadExpander and the SLApp's Expander. Please preview the Expander.xaml file from the SLApp project - at the end of the file the RadExpander has been involved - there are three points you should note:

• Initilization of the RadExpander with a custom Style:
  Style="{StaticResource MyNewExpanderStyle}"
• Initilization of the Content:
  Content="some string to initialize the content..."
  Of course you can use the initialization form shown at the end of this message.
• Initilization of the Header - the one you are interested in:
  Header="some string as the Header"
  Of course you can use the initialization form shown at the end of this message.

Below are two expanders initialized in different ways:

<telerik:RadExpander
    Header="some string as the Header"
    Content="some string to initialize the content..."
    Style="{StaticResource MyNewExpanderStyle}"/>
<!-- = = = = = = = = = = -->
<telerik:RadExpander>
    <telerik:RadExpander.Header>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <StackPanel Orientation="Vertical" Grid.Column="0">
                <TextBlock Text="New Books:" FontSize="18" Foreground="Black" />
                <TextBlock Text="Here you can find our last publications" FontSize="8" Foreground="Gray" />
            </StackPanel>
            <Image Grid.Column="1" Source="\Images\Book.png" />
        </Grid>
    </telerik:RadExpander.Header>
    <telerik:RadExpander.Content>
        <ListBox MaxWidth="333" MaxHeight="333">
            <ListBoxItem Content="My new Book" />
        </ListBox>
    </telerik:RadExpander.Content>
</telerik:RadExpander>

We hope this information helps.

Sincerely yours,
Ivan
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Ludovic Gerbault]

I've successfully used your template to change the header of my RadExpander.

But I'd also like to modify the ContentTemplate to change this background on MouseOver and expanded state, and turn it back to the orginial one on MouseOut and Collapsed state

I've tried several things on the visual state coding, but I can't get it to work.

Do you know how to perform such scenario ?

[Ivan]

Hello Subileau,

Thank you for contacting us.

In order to accomplish your task you should care about the IsExpanded state of the control and the mouse position.
We suggest that you should handle the following events: Expanded, Collapsed, MouseEnter and MouseLeave.

//RadExpander myExpander = new RadExpander();
bool mouseOverExpander = false;

void MainPage_Loaded(object sender, RoutedEventArgs e)
{
    myExpander.Expanded += new RoutedEventHandler(myExpander_Expanded);
    myExpander.Collapsed += new RoutedEventHandler(myExpander_Collapsed);
    myExpander.MouseLeave += new MouseEventHandler(myExpander_MouseLeave);
    myExpander.MouseEnter += new MouseEventHandler(myExpander_MouseEnter);
}

void SetExpanderBackground()
{
    myExpander.Background = new SolidColorBrush(
        (myExpander.IsExpanded || this.mouseOverExpander)
        ? Colors.Red
        : Colors.Transparent);
}

void myExpander_Collapsed(object sender, RoutedEventArgs e)
{
    this.SetExpanderBackground();
}

void myExpander_Expanded(object sender, RoutedEventArgs e)
{
    this.SetExpanderBackground();
}

void myExpander_MouseEnter(object sender, MouseEventArgs e)
{
    this.mouseOverExpander = true;
    this.SetExpanderBackground();
}

void myExpander_MouseLeave(object sender, MouseEventArgs e)
{
    this.mouseOverExpander = false;
    throw new NotImplementedException();
}

We hope this information will help you.


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

[Ludovic Gerbault]

Well actually, I don't want the radexpander background to change, but the RadExpander's header background.

So I need to access its template, maybe through the visual states.

[Tihomir Petkov]

Hello Subileau,

You can get a reference to the right element in the template like so:

var headerElement = (VisualTreeHelper.GetChild(myExpander, 0) as FrameworkElement).FindName("HeaderButton") as RadExpanderHeader;
headerElement.Background = new SolidColorBrush(Colors.Red);

Let me know if this works for you.

All the best,
Tihomir Petkov
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.