RadPane background color and icon

5 posts, 0 answers
  1. Yu
    Yu avatar
    17 posts
    Member since:
    Jul 2012

    Posted 07 Jan 2013 Link to this post

    How could I use code to set the background color and icon image of each RadPane?

    The RadPane is created in code and added to RandPanGroup with AddItem method.

    For the background, I tried radPane.Background = brush but it has no effect.

    For the icon, I can not find any properties for assigning values.

    Thanks
  2. Yu
    Yu avatar
    17 posts
    Member since:
    Jul 2012

    Posted 09 Jan 2013 Link to this post

    Any idea?
  3. UI for WPF is Visual Studio 2017 Ready
  4. Masha
    Admin
    Masha avatar
    355 posts

    Posted 09 Jan 2013 Link to this post

    Hello Yu Geng,

    To apply an icon to the RadPane you should create a custom data template and set it to its HeaderTemplate property. The data template should be like code listed below:

    <DataTemplate x:Key="HeaderTemplate">
       <StackPanel Orientation="Horizontal">
         <TextBlock Text="{Binding}"/>
         <Image Source="Icon.jpg" Width="16" Height="16"/>
       </StackPanel>
    </DataTemplate>

    If you want to set the background of the content of the RadPane, you should set the background of its root element. The background of the RadPane is used for the TabItem. You could use the following code:

    <telerik:RadPane>
     <Grid Background="Red">
     ...
     </Grid>
    </telerik:RadPane>

    In the code-behind you could find the Content first and set its Background.

    I hope this will be helpful.

    All the best,
    Maria
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  5. Yu
    Yu avatar
    17 posts
    Member since:
    Jul 2012

    Posted 09 Jan 2013 Link to this post

    Hi Maria,

    Thanks for reply.

    The radPane is created dynamically during ruttime by code.

    Can you show me more examples how to specify the databinding in the template for the icon? Each radPane added will have differenct icon in the header. The image ath is passed during runtime.

    Also, setting the background for RadPane in code does not seem to have any effect of chaning color of the TabItem.

    Thanks
  6. Masha
    Admin
    Masha avatar
    355 posts

    Posted 14 Jan 2013 Link to this post

    Hi Yu Geng,

    The approach is demonstrated in the attached project.

    I've created a custom attached property for the RadPane header icon:

    RadPaneExtensions.SetIcon(radPane1, new BitmapImage(new Uri("icon-alert.png", UriKind.Relative)));
    radPane1.HeaderTemplate = (DataTemplate)this.Resources["HeaderTemplate"];


    <DataTemplate x:Key="HeaderTemplate">
        <StackPanel Orientation="Horizontal">
            <Image Source="{Binding Path=Icon, RelativeSource={RelativeSource AncestorType={x:Type telerik:RadPane}}}" Width="15" Height="13"/>
            <TextBlock Text="{Binding}"/>
        </StackPanel>
    </DataTemplate>

    I have also modified TabChromStyle, which is used in PaneBottomTemplate control template to get bindings for background property for RadPane

    <Style x:Key="CustomDocumentTabChromeStyle" TargetType="telerikChromes:ButtonChrome" BasedOn="{StaticResource DocumentTabChromeStyle}">
        <Setter Property="Background" Value="{Binding Background, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type telerik:RadPane}}}" />
        <Setter Property="BorderBrush" Value="{StaticResource PaneTabOuterBorder_Normal}" />
    </Style>

    I hope this will be helpful.

    Regards,
    Maria
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Back to Top
UI for WPF is Visual Studio 2017 Ready