Drag Drop with Metro Theme

[Stanescu Mihai]

Hello Telerik,

I am currently using SL5 with telerik version 2012.1.326.1050
I have an issue when applying the metro theme to a RadListBox which has drag and drop enabled. 
If i don't apply the theme, drag and drop works fine with the below code, as soon as I apply the theme it stops working, I have also tried different DragDropManager.AllowCapturedDrag/DragDropManager.AllowDrag combination.

<telerik:RadListBox ItemsSource="{Binding PlayingCopies}" VerticalAlignment="Stretch"
        BorderBrush="{x:Null}" BorderThickness="0" SelectionMode="Extended"
        telerik:StyleManager.Theme="Metro"
        ScrollViewer.VerticalScrollBarVisibility="Auto"
        ScrollViewer.HorizontalScrollBarVisibility="Disabled"
        ItemContainerStyle="{StaticResource RadListBoxItemStyle}"
        ItemTemplate="{StaticResource RadListBoxItemTemplate}" >
    <telerik:RadListBox.DataConverter>
       <common:DataConverterAppointments />
    </telerik:RadListBox.DataConverter>
    <telerik:RadListBox.DragDropBehavior>
       <drag:ListBoxDragDropBehavior AllowReorder="False" />
    </telerik:RadListBox.DragDropBehavior>
    <telerik:RadListBox.DragVisualProvider>
        <drag:ScreenshotDragVisualProvider />
    </telerik:RadListBox.DragVisualProvider>

    <i:Interaction.Triggers>
       <i:EventTrigger EventName="SelectionChanged">
           <gala:EventToCommand Command="{Binding DataSource.SelectionChangedCommand, Source={StaticResource DataContextProxy}}" PassEventArgsToCommand="True"/>
       </i:EventTrigger>
     </i:Interaction.Triggers>
</telerik:RadListBox>

<Style x:Key="RadListBoxItemStyle" TargetType="telerik:RadListBoxItem" >
   <Setter Property="HorizontalContentAlignment" Value="Stretch" />
   <Setter Property="telerik:DragDropManager.AllowCapturedDrag" Value="True" />
   <Setter Property="telerik:DragDropManager.AllowDrag" Value="True" />
</Style>

Any suggestions?

Best regards,
Mihai.

[Georgi]

Hello Mihai,

What you can do about it is to use other ways of setting the theme. I can recommend using our new theming mechanism with implicit styles as shown in this help article. Also you can apply the theme as an application theme :

public MainPage()
       {
           InitializeComponent();
           StyleManager.ApplicationTheme = new MetroTheme();
       }

Hope this will help.

Kind regards,
Georgi
the Telerik team

[Patrick]

We are having the same issues with themes. We are currently using an Application Theme but we would like to style our RadListBox differently using a Theme. When doing so the RadListBox drag drop is broken. The link you provided has a note:

You should not set Application Theme using the StyleManager when using implicit styles.

What is the way we can continue to use our Application Theme and differently style the RadListBox using a Theme while maintaining the drag drop functionality?

Thanks,
Patrick

ps we are using SL5 with telerik DLL version 2013.1.225.1050

[Georgi]

Hello Patrick,

Using Implicit Styles and StyleManager are two different approaches of setting theme. When a theme needs to be modified, or style to be applied to all elements of one type we recommend using the Implicit Styles where you can directly edit the current style of the ListBox.
If you want to use StyleManager we will need more information about your scenario as I am not sure what you mean by: " ...and differently style the RadListBox using a Theme".
I think it would be best if you can open a support ticket and attach a simple project showing your scenario and the difficulties you are facing, so we would be able suggest the best approach.

Regards,
Georgi
Telerik

[Patrick]

Georgi,

What I meant by " ...and differently style the RadListBox using a Theme" was that we would like to style the RadListBox using a theme other than the one set by the Application Theme which it is inheriting from. Styling the RadListBox using telerik:StyleManager.Theme="Office_Black" will cause the RadListBox to style and it looks different but it simply breaks the DragDrop functionality as noted by the OP.

Ideally we could set an Application theme and style with a different theme individual components using StyleManager.Theme and not have the DragDrop functionality break. Why does setting the theme using the StyleManager cause DropDrop to fail on the RadListBox, is that by design?

-Patrick

[Georgi]

Hello Patrick,

Thanks for the clarifications.
What basically happens is in order to turn the DragAndDrop feature on, style like that is used:

<Style TargetType="telerik:RadListBoxItem">
      <Setter Property="telerik:DragDropManager.AllowCapturedDrag" Value="True" />
</Style>

So when setting theme with telerik:StyleManager.Theme="Office_Black" this style gets overwritten and the drag and drop feature stops working.

So we recommend using implicit styles as it can prevent similar issues in the future.
Nevertheless if you want to use ApplicationTheme and Theme there is a workaround that could help you in this scenario. The workaround is not to use style for setting the drag and drop, but to set is as a local value for the ListBox. This can be achieved by creating custom ListBox and overriding the PrepareContainerForItemOverride method :

public class CustomListBox :RadListBox
    {
        protected override void PrepareContainerForItemOverride(DependencyObject element, object item)
        {
            base.PrepareContainerForItemOverride(element, item);
            DragDropManager.SetAllowCapturedDrag(element, true);
        }
    }

Hope this would help.

Regards,
Georgi
Telerik

[Patrick]

Georgi,

I understand, that makes sense. I haven't yet tried this method but I imagine it would work nicely for our situation.
Marked as answered for us!

Thanks,
Patrick