Different DraggedElementVisualCueTemplate depending on dragged item type

[Andrew]

In RadDock for WPF it is possible to set the DraggedElementVisualCue / DraggedElementVisualCueTemplate when using RadDocking.DragDropMode = Deferred. 

 

<ControlTemplate x:Key="DraggedElementVisualCueTemplate">
    <Grid Width="300" Height="200">
        <Border
            Margin="0 0 4 4"
            CornerRadius="1"
            BorderBrush="{TemplateBinding BorderBrush}"
            BorderThickness="{TemplateBinding BorderThickness}"
            Background="{TemplateBinding Background}" />
        <Border Margin="0 0 4 4" Padding="10">
            <TextBlock
                Text="{Binding Title}"
                Foreground="{StaticResource IconForegroundLight}"
                Margin="{TemplateBinding Padding}"
                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
        </Border>
    </Grid>
</ControlTemplate>

<docking:ObjectToTypeStringConverter x:Key="ObjectToTypeStringConverter"/>

<Style TargetType="telerik:DraggedElementVisualCue">
    <Setter Property="Foreground" Value="{StaticResource IconForegroundLight}"/>
    <Setter Property="BorderBrush" Value="{DynamicResource AccentColorBrush}"/>
    <Setter Property="Background" Value="{StaticResource HeaderBackgroundBrush}"/>
    <Setter Property="HorizontalContentAlignment" Value="Center"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="BorderThickness" Value="2"/>
    <Setter Property="Margin" Value="10 0 0 0"/>
    <Setter Property="Padding" Value="6 2"/>
</Style>

 

So far so good :) 

What I'd like to do is to is have a different VisualCue template for certain pane types (e.g. depending on DataContext type, or Pane Type itself) 

Any ideas how? 

DraggedElementVisualCue.DataContext is of type DockingDragDropPayload. There is a Pane property in there but it's private ... so the data exists just not accessible. 

[Andrew]

Edit: That Style is missing a line to apply the template 

<Style TargetType="telerik:DraggedElementVisualCue">
       <Setter Property="Foreground" Value="{StaticResource IconForegroundLight}"/>
       <Setter Property="BorderBrush" Value="{DynamicResource AccentColorBrush}"/>
       <Setter Property="Background" Value="{StaticResource HeaderBackgroundBrush}"/>
       <Setter Property="HorizontalContentAlignment" Value="Center"/>
       <Setter Property="VerticalContentAlignment" Value="Center"/>
       <Setter Property="BorderThickness" Value="2"/>
       <Setter Property="Margin" Value="10 0 0 0"/>
       <Setter Property="Padding" Value="6 2"/>
       <Setter Property="Template" Value="{StaticResource DraggedElementVisualCueTemplate}"/>
   </Style>

[Andrew]

So I have a solution but it's a hack. I wonder if anyone can improve on it? 

Telerik support could improve by making DockingDragDropPayload.Pane and PaneGroup fields public get-only properties

Here's my code

public class DockingDragDropPayloadEx
    {
        private readonly DockingDragDropPayload _payload;
        private RadPane _pane;
        private RadPaneGroup _paneGroup;

        public DockingDragDropPayloadEx(DockingDragDropPayload payload)
        {
            _payload = payload;
            var fields = _payload.GetType().GetFields(BindingFlags.Instance | BindingFlags.NonPublic);
            //var names = fields.Select(x => x.Name).ToArray();
            var paneField = fields.First(x => x.Name.Contains("Pane"));
            var paneGroupField = fields.First(x => x.Name.Contains("PaneGroup"));
            _pane = (paneField.GetValue(_payload) as WeakReference)?.Target as RadPane;
            _paneGroup = (paneGroupField.GetValue(_payload) as WeakReference)?.Target as RadPaneGroup;
        }

        public object Title => _payload.Title;

        public RadPane Pane => _pane;

        public bool IsDocumentPane => _pane is RadDocumentPane || _paneGroup?.ChildrenOfType<RadDocumentPane>().Count() > 0;

        public bool IsWorkspacePane => _pane is RadWorkspacePane || _paneGroup?.ChildrenOfType<RadWorkspacePane>().Count() > 0;

        public static implicit operator DockingDragDropPayload(DockingDragDropPayloadEx d)
        {
            return d._payload;
        }
    }

    public class DragDropPayloadFetcher
    {
        public static readonly DependencyProperty FetchPaneFromDataContextProperty = DependencyProperty.RegisterAttached(
            "FetchPaneFromDataContext", typeof(bool), typeof(DragDropPayloadFetcher), new PropertyMetadata(default(bool), OnFetchPaneFromDataContextPropertyChanged));

        private static void OnFetchPaneFromDataContextPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            var cue = ((DraggedElementVisualCue) d);
            var payload = cue.DataContext as DockingDragDropPayload;
            cue.Tag = new DockingDragDropPayloadEx(payload);
        }

        public static void SetFetchPaneFromDataContext(DependencyObject element, bool value)
        {
            element.SetValue(FetchPaneFromDataContextProperty, value);
        }

        public static bool GetSetFetchPaneFromDataContext(DependencyObject element)
        {
            return (bool) element.GetValue(FetchPaneFromDataContextProperty);
        }
    }

 

And the style becomes

<ControlTemplate x:Key="DocumentVisualCueTemplate">
    <Grid Width="300" Height="200">
        <Border
            Margin="0 0 4 4"
            CornerRadius="1"
            BorderBrush="{TemplateBinding BorderBrush}"
            BorderThickness="{TemplateBinding BorderThickness}"
            Background="Green"/>
        <Border Margin="0 0 4 4" Padding="10">
            <TextBlock
                Text="{Binding Title}"
                Foreground="{StaticResource IconForegroundLight}"
                Margin="{TemplateBinding Padding}"
                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
        </Border>
    </Grid>
</ControlTemplate>

<ControlTemplate x:Key="WorkspaceVisualCueTemplate">
    <Grid Width="300" Height="200">
        <Border
            Margin="0 0 4 4"
            CornerRadius="1"
            BorderBrush="{TemplateBinding BorderBrush}"
            BorderThickness="{TemplateBinding BorderThickness}"
            Background="{TemplateBinding Background}" />
        <Border Margin="0 0 4 4" Padding="10">
            <TextBlock
                Text="{Binding Title}"
                Foreground="{StaticResource IconForegroundLight}"
                Margin="{TemplateBinding Padding}"
                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
        </Border>
    </Grid>
</ControlTemplate>

<Style TargetType="telerik:DraggedElementVisualCue">
    <Setter Property="docking:DragDropPayloadFetcher.FetchPaneFromDataContext" Value="True"/>
    <Setter Property="Foreground" Value="{StaticResource IconForegroundLight}"/>
    <Setter Property="BorderBrush" Value="{DynamicResource AccentColorBrush}"/>
    <Setter Property="Background" Value="{StaticResource HeaderBackgroundBrush}"/>
    <Setter Property="HorizontalContentAlignment" Value="Center"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="BorderThickness" Value="2"/>
    <Setter Property="Margin" Value="10 0 0 0"/>
    <Setter Property="Padding" Value="6 2"/>
    <Style.Triggers>
        <DataTrigger Binding="{Binding Tag.IsDocumentPane, RelativeSource={RelativeSource Self}}" Value="True">
            <DataTrigger.Setters>
                <Setter Property="Template" Value="{StaticResource DocumentVisualCueTemplate}"/>
            </DataTrigger.Setters>
        </DataTrigger>
        <DataTrigger Binding="{Binding Tag.IsWorkspacePane, RelativeSource={RelativeSource Self}}" Value="True">
            <DataTrigger.Setters>
                <Setter Property="Template" Value="{StaticResource WorkspaceVisualCueTemplate}"/>
            </DataTrigger.Setters>
        </DataTrigger>
    </Style.Triggers>
</Style>

 

 

 

[Martin]

Hello Andrew,

Thank you for the provided solution to the community. Another approach to achieve the desired behavior is to add DragInitialize handler through DragDropManager and get the dragged item. After that to continue your solution and set it to tag property of VisualCue. You can take a look for the code snippet below for the reference: 

public MainWindow()
      {
          InitializeComponent();
          DragDropManager.AddDragInitializeHandler(this, OnDragInit, true);
      }

      private void OnDragInit(object sender, DragInitializeEventArgs e)
      {
          if (e.OriginalSource is PaneHeader)
          {
              var type = DragDropPayloadManager.GetDataFromObject(e.Data, typeof(RadPaneGroup).Name);
              var type2 = DragDropPayloadManager.GetDataFromObject(e.Data, typeof(RadPane).Name);

              var dragVisual = e.DragVisual as DraggedElementVisualCue;

              dragVisual.Tag = "";

          }
      }

I hope that this helps.

Regards,
Martin Vatev
Progress Telerik