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

    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.
  2. Kalin
    Admin
    Kalin avatar
    1207 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"/>
    </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.
     
  3. UI for WPF is Visual Studio 2017 Ready
Back to Top