This is a migrated thread and some comments may be shown as answers.

Drag reorder styling the header

1 Answer 49 Views
Docking
This is a migrated thread and some comments may be shown as answers.
Jiri
Top achievements
Rank 1
Jiri asked on 19 Sep 2014, 11:25 AM
Hi,

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

thank you.

1 Answer, 1 is accepted

Sort by
0
Kalin
Telerik team
answered on 23 Sep 2014, 01:09 PM
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"/>
</LinearGradientBrush>
         
<ControlTemplate x:Key="DraggedElementVisualCueTemplate">
    <Grid>
        <Border
            Margin="0 0 4 4"
            CornerRadius="1"
            BorderBrush="{TemplateBinding BorderBrush}"
            BorderThickness="{TemplateBinding BorderThickness}"
            Background="{TemplateBinding Background}" />
        <Border Margin="0 0 4 4" Padding="{TemplateBinding BorderThickness}">
            <TextBlock
                Text="{Binding Title}"
                Margin="{TemplateBinding Padding}"
                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
        </Border>
    </Grid>
</ControlTemplate>
<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}"/>
</Style>

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

Hope this helps.

Regards,
Kalin
Telerik
 
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.
 
Tags
Docking
Asked by
Jiri
Top achievements
Rank 1
Answers by
Kalin
Telerik team
Share this question
or