ListBox Customize DropVisual

9 posts, 1 answers
  1. Tom Allard
    Tom Allard avatar
    2 posts
    Member since:
    May 2010

    Posted 22 Oct 2012 Link to this post

    Hi,

    I'm trying to create a grid that a user can use to reorder pictures.

    To do that i've setup a RadListBox as follows:
    <telerik:RadListBox
            Name="rlb"
               ItemsSource="{Binding Items}" SelectedItem="{Binding SelectedItem,Mode=TwoWay}"  ScrollViewer.HorizontalScrollBarVisibility="Disabled" >
               <telerik:RadListBox.DragVisualProvider>
                   <telerik:ScreenshotDragVisualProvider />
               </telerik:RadListBox.DragVisualProvider>
               <telerik:RadListBox.DragDropBehavior>
                   <telerik:ListBoxDragDropBehavior AllowReorder="True" />
               </telerik:RadListBox.DragDropBehavior>
               <telerik:RadListBox.ItemsPanel>
                   <ItemsPanelTemplate>
                       <telerik:RadWrapPanel Orientation="Horizontal"/>
                   </ItemsPanelTemplate>
               </telerik:RadListBox.ItemsPanel>
                   <telerik:RadListBox.ItemTemplate>
                   <DataTemplate>
                       <Border BorderThickness="2" BorderBrush="Red">
                           <Grid>
                               <Grid.RowDefinitions>
                                   <RowDefinition Height="Auto"/>
                                   <RowDefinition Height="Auto"/>
                               </Grid.RowDefinitions>
                               <TextBlock Text="{Binding Id}" Grid.Row="0"/>
                               <TextBlock Text="{Binding Value}" Grid.Row="1"/>
                           </Grid>
                       </Border>
                   </DataTemplate>
               </telerik:RadListBox.ItemTemplate>
           </telerik:RadListBox>


    With this i can reorder items in the listbox using drag n drop. However the dropvisual is not working as i would expect since it simply draws a horizontal line from left to right.

    I tried creating a custom DropVisualProvider subclassing LinearDropVisualProvider and registering it with the listbox

        rlb.DropVisualProvider = new MyDropVisualProvider();

    However none of the methods i override from LinearDropVisual are being called. I'm not sure what i am doing wrong at this point. What is the recommended way of specifying a custom IDropVisulaProvider?


  2. Answer
    George
    Admin
    George avatar
    1332 posts

    Posted 25 Oct 2012 Link to this post

    Hello Tom,

    I would suggest setting a custom DropVisualProvider for the RadListBox control and change the coordinates where the drop visual will be placed. For example, create a CustomLinearDropVisualProvider that inherits the LinearDropVisualProvider and override the GetLocation method:

    public class CustomLinearDropVisualProvider : LinearDropVisualProvider
    {
        public override Point GetLocation(Telerik.Windows.Controls.RadListBoxItem container, Panel panel)
        {
            return container.TransformToVisual(panel).Transform(new Point());
        }
    }

    All you have to do now is to set the CustomLinearDropVisualProvider for DropVisualProvider:
    <telerik:RadListBox ....>
    .....
    <telerik:RadListBox.DropVisualProvider>
       <local:CustomLinearDropVisualProvider />
    </telerik:RadListBox.DropVisualProvider>
    ...
    </telerik:RadListBox>

    and create a custom style for the LinearDropVisual. The default template is with stretch Vertical/Horizontal alignments and it doesn't look nice on wrap panel.

    Please, refer to the attached project for more information and let me know if this helps.

    Regards,
    George
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  3. DevCraft banner
  4. Tom Allard
    Tom Allard avatar
    2 posts
    Member since:
    May 2010

    Posted 25 Oct 2012 Link to this post

    Thanks! That is exactly what i needed!
  5. Richard
    Richard avatar
    4 posts
    Member since:
    Sep 2012

    Posted 26 Feb 2013 Link to this post

    I have tried the approach you suggested of creating a custom LinearDropVisualProvider. The problem I am having is that this is not
    providing a good drop visual for all cases of drop location. The problem is easier to see in the example project if you set the orientation
    of the wrap panel to vertical and give both the wrap panel and the listbox a specific height, for example 300.

    <telerik:RadListBox ItemsSource="{Binding DataList}" BorderBrush="Black" BorderThickness="1" Margin="10"
                           SelectedItem="{Binding SelectedItem,Mode=TwoWay}"
                        ScrollViewer.HorizontalScrollBarVisibility
    ="Disabled"
                        Height
    ="300">
    ...
        <telerik:RadListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <telerik:RadWrapPanel Orientation="Vertical" Height="300"/>
            </ItemsPanelTemplate>
        </telerik:RadListBox.ItemsPanel>
    ...
    </telerik:RadListBox>

    If the drop location is over a listbox item, the drop visual is drawn in an appropriate location. For the case where the
    drop location is simply inside of the listbox but not over an item, the drop visual is placed at the appropriate location
    in terms of the Y-coordinate, but gives it an X-coordinate of 0. This places the drop visual in an awkward location in
    the first column of listbox items. And the CustomLinearDropVisualProvider.GetLocation() method does not get hit in
    this case.

    After having looked through examples online (and through the code itself), I haven't seen seen a good way to solve this
    problem. What do you suggest for handling this case?
  6. Vladi
    Admin
    Vladi avatar
    744 posts

    Posted 04 Mar 2013 Link to this post

    Hi Richard,

    We are not sure we understand you correctly.

    Do you mean that the custom cue is not displayed when you drag and item out of the scope of the other Items in the ListBox? By default when an Item is drag out of the scope of the other items the drop cue is not displayed and if the item is drop it is placed as a last item in the control.

    It would be very helpful if you could share with us some screenshots or a short video showing the exact scenario and desired behavior.

    All the best,
    Vladi
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  7. Richard
    Richard avatar
    4 posts
    Member since:
    Sep 2012

    Posted 04 Mar 2013 Link to this post

    The custom cue (drop visual) may not be displayed by default, but in the example project previously given in this thread by George, a drop visual is displayed for all drop locations inside of the ListBox. And this is the desired behavior in our case -- to show a drop visual anytime the drop is going to be allowed.

    As you can see in the attached screenshots,
    1. CorrectDropVisual - shows the good behavior when inside the scope of another ListBoxItem.
    2. IncorrectDropVisualForDropAtEndOfList - shows what happens in the example project (with the minor orientation and height changes described in my previous post) when you are inside of the ListBox but outside of an ListBoxItem's scope. The Y-coordinate calculated is OK, but the X-coordinate for the drop visual is simply set to 0.
    3. DesiredDropVisualForDropAtEndOfList - shows the previous shot with the DropVisual in roughly the desired location at the end of the list.
  8. Vladi
    Admin
    Vladi avatar
    744 posts

    Posted 05 Mar 2013 Link to this post

    Hi Richard,

    Thank you for posting the additional information. We were able to reproduce the issue on our side and it seems that this is a bug in the control.

    We logged the issue in our Public Issue Tracker System where you can track its status.

    I updated your Telerik points for bringing this to our attention.

    Regards,
    Vladi
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  9. Richard
    Richard avatar
    4 posts
    Member since:
    Sep 2012

    Posted 05 Mar 2013 Link to this post

    Thank you for your help.

    I wanted to clarify that I added on to this thread because it was almost exactly the question I needed to ask, but I am using WPF, not Silverlight. Will the issue you logged serve to fix the bug for your WPF product as well?
  10. Vladi
    Admin
    Vladi avatar
    744 posts

    Posted 06 Mar 2013 Link to this post

    Hello Richard,

    Yes the issue is logged for both Silverlight and WPF platforms.

    It seems that the PITS issue was not updated correctly and we will update it to list both platforms.

    Kind regards,
    Vladi
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Back to Top
DevCraft banner