Drag reorder styling the header

2 posts, 0 answers
  1. Jiri
    Jiri avatar
    23 posts
    Member since:
    Aug 2013

    Posted 19 Sep 2014 Link to this post


    when I use this
    <telerik:RadDocking AllowDragReorder="True">
    is possible somehow to style the radpaneheader? like change cursore or size of the draged header (tab)

    thank you.
  2. Kalin
    Kalin avatar
    1189 posts

    Posted 23 Sep 2014 Link to this post

    Hi Jiri,

    In order to achieve the desired you would need to extract and modify the DraggedElementVisualCue ControlTemplate. I have copied here the default Style for the Office Black with corresponding brushesh, you can just copy it to your project and modify it as per your needs:

    <SolidColorBrush x:Key="PaneTabForeground" Color="Black"/>
    <SolidColorBrush x:Key="DragVisualBorder" Color="#FFFFC92B"/>
    <LinearGradientBrush x:Key="DragVisualBackground" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FFFCE79F" Offset="1"/>
        <GradientStop Color="#FFFDD3A8"/>
    <ControlTemplate x:Key="DraggedElementVisualCueTemplate">
                Margin="0 0 4 4"
                BorderBrush="{TemplateBinding BorderBrush}"
                BorderThickness="{TemplateBinding BorderThickness}"
                Background="{TemplateBinding Background}" />
            <Border Margin="0 0 4 4" Padding="{TemplateBinding BorderThickness}">
                    Text="{Binding Title}"
                    Margin="{TemplateBinding Padding}"
                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
    <Style TargetType="telerik:DraggedElementVisualCue">
        <Setter Property="Foreground" Value="{StaticResource PaneTabForeground}"/>
        <Setter Property="BorderBrush" Value="{StaticResource DragVisualBorder}"/>
        <Setter Property="Background" Value="{StaticResource DragVisualBackground}"/>
        <Setter Property="Margin" Value="10 0 0 0"/>
        <Setter Property="Padding" Value="6 2"/>
        <Setter Property="Template" Value="{StaticResource DraggedElementVisualCueTemplate}"/>

    Note that the Style and Template should be placed in App.xaml in order to get correctly applied.

    Hope this helps.

    Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
  3. DevCraft R3 2016 release webinar banner
Back to Top