RadPane header background

5 posts, 1 answers
  1. Jonathan
    Jonathan avatar
    15 posts
    Member since:
    Dec 2014

    Posted 10 Apr 2015 Link to this post

    Hi,

    I'm having some issues with setting the background color of my RadPanes' headers.

    I've created four different data templates (I have four panes that each have a different icon in the header) like this:

    <DataTemplate x:Key="ChecklistTitleTemplate">
        <Grid Background="#efa1b6">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <Image Grid.Column="0" Source="../../icons/icon_checklist.png" Width="30" Height="30" />
            <ContentPresenter Grid.Column="1" Content="{Binding}" Margin="10,0,0,0" />
        </Grid>
    </DataTemplate>
     

    I'm then applying the template like this:

    <telerik:RadPane Header="Checklista" Content="..." TitleTemplate="{StaticResource ChecklistTitleTemplate}" telerik:RadDocking.SerializationTag="Checklist" ContextMenuTemplate="{x:Null}">

    However the background isn't covering the entire pane header. See the attached screenshot to see what I mean.

    Thanks,
    Jonathan

    <DataTemplate x:Key="ChecklistTitleTemplate">
        <Grid Background="#efa1b6">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <Image Grid.Column="0" Source="../../icons/icon_checklist.png" Width="30" Height="30" />
            <ContentPresenter Grid.Column="1" Content="{Binding}" Margin="10,0,0,0" />
        </Grid>
    </DataTemplate>
    <DataTemplate x:Key="ChecklistTitleTemplate">
        <Grid Background="#efa1b6">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <Image Grid.Column="0" Source="../../icons/icon_checklist.png" Width="30" Height="30" />
            <ContentPresenter Grid.Column="1" Content="{Binding}" Margin="10,0,0,0" />
        </Grid>
    </DataTemplate>
  2. Masha
    Admin
    Masha avatar
    355 posts

    Posted 14 Apr 2015 Link to this post

    Hello Jonathan,

    In order to achieve the desired approach you need to use PaneHeaderStyle of RadDocking control and modify its background property as you wish:

    <Style TargetType="telerik:PaneHeader" BasedOn="{StaticResource PaneHeaderStyle}">
     ...
    </Style>

    I hope this helps.


    Regards,
    Masha
    Telerik
     

    See What's Next in App Development. Register for TelerikNEXT.

     
  3. DevCraft banner
  4. Jonathan
    Jonathan avatar
    15 posts
    Member since:
    Dec 2014

    Posted 15 Apr 2015 in reply to Masha Link to this post

    Hi Masha,

    What does the XAML look like when using a PaneHeader control? Since I have four panes, each with a different header background color, I unfortunately can't create one style targeting all PaneHeaders.

  5. Answer
    Masha
    Admin
    Masha avatar
    355 posts

    Posted 17 Apr 2015 Link to this post

    Hi Jonathan,

    If you want to have differently colored PaneHeaders you need to use DataTemplate property exactly as you did. In that case you need to make a small modification inside the ControlTemplate of the PaneHeader style.

    I've attached a sample project where the ControlTemplate is modified in Office_Black theme using implicit styling approach.

    I hope it helps.

    Regards,
    Masha
    Telerik
     

    See What's Next in App Development. Register for TelerikNEXT.

     
  6. Jonathan
    Jonathan avatar
    15 posts
    Member since:
    Dec 2014

    Posted 17 Apr 2015 in reply to Masha Link to this post

    Thanks Masha, that's exactly what I needed. I never would have figured that out!
Back to Top
DevCraft banner