Changing the Header background

10 posts, 0 answers
  1. Ron
    Ron avatar
    15 posts
    Member since:
    Jan 2009

    Posted 09 Mar 2009 Link to this post

    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
  2. Ivan
    Admin
    Ivan avatar
    519 posts

    Posted 10 Mar 2009 Link to this post

    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.
  3. DevCraft banner
  4. Ron
    Ron avatar
    15 posts
    Member since:
    Jan 2009

    Posted 31 Mar 2009 Link to this post

    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.
  5. Ivan
    Admin
    Ivan avatar
    519 posts

    Posted 02 Apr 2009 Link to this post

    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.
  6. Toshendra
    Toshendra avatar
    16 posts
    Member since:
    Jun 2009

    Posted 15 Jun 2009 Link to this post

    How to change header content in this example?
  7. Ivan
    Admin
    Ivan avatar
    519 posts

    Posted 18 Jun 2009 Link to this post

    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.
  8. Ludovic Gerbault
    Ludovic Gerbault avatar
    226 posts
    Member since:
    Apr 2009

    Posted 24 Feb 2010 Link to this post

    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 ?
  9. Ivan
    Admin
    Ivan avatar
    519 posts

    Posted 28 Feb 2010 Link to this post

    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.
  10. Ludovic Gerbault
    Ludovic Gerbault avatar
    226 posts
    Member since:
    Apr 2009

    Posted 01 Mar 2010 Link to this post

    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.
  11. Tihomir Petkov
    Admin
    Tihomir Petkov avatar
    576 posts

    Posted 04 Mar 2010 Link to this post

    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.
Back to Top
DevCraft banner