Drag Drop with Metro Theme

7 posts, 0 answers
  1. Stanescu Mihai
    Stanescu Mihai avatar
    33 posts
    Member since:
    Aug 2009

    Posted 22 Nov 2012 Link to this post

    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.
  2. Georgi
    Admin
    Georgi avatar
    347 posts

    Posted 27 Nov 2012 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  3. DevCraft banner
  4. Patrick
    Patrick avatar
    43 posts
    Member since:
    Jan 2013

    Posted 26 Jun 2013 Link to this post

    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
  5. Georgi
    Admin
    Georgi avatar
    347 posts

    Posted 01 Jul 2013 Link to this post

    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
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for SILVERLIGHT.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
  6. Patrick
    Patrick avatar
    43 posts
    Member since:
    Jan 2013

    Posted 01 Jul 2013 Link to this post

    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

  7. Georgi
    Admin
    Georgi avatar
    347 posts

    Posted 04 Jul 2013 Link to this post

    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
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for SILVERLIGHT.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
  8. Patrick
    Patrick avatar
    43 posts
    Member since:
    Jan 2013

    Posted 08 Jul 2013 Link to this post

    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
Back to Top
DevCraft banner