I'm trying to use DragVisualProvider on my ListBox:
<telerik:RadListBox.DragDropBehavior>
<telerik:ListBoxDragDropBehavior AllowReorder="False"/>
</telerik:RadListBox.DragDropBehavior>
<telerik:RadListBox.DragVisualProvider>
<telerik:ScreenshotDragVisualProvider />
</telerik:RadListBox.DragVisualProvider>
<telerik:RadListBox.ItemsPanel>
<ItemsPanelTemplate>
<telerik:RadWrapPanel HorizontalAlignment="Stretch"/>
</ItemsPanelTemplate>
</telerik:RadListBox.ItemsPanel>However, the "drop line" (the blue vertical line that indicates where the item will be dropped) is not sizing correctly. It appears to be much larger than the items themselves, as you can see in the attached image.
How can I fix this so that the drop line fits the size of the other images? Am I missing a property or a specific configuration?
Any help would be greatly appreciated. Thanks!
1 Answer, 1 is accepted
Hello Raphael,
The drop line is represented by the LinearDropVisual element, which contains an Ellipse and a Rectangle element that have set values for some of their properties.
With this in mind, based on the provided image, it seems that the Windows 11 theme is used on your end. In order to customize the LinearDropVisual element, its default ControlTemplate will have to be extracted and modified. After that, locate the Rectangle element that is inside the Grid layout with x:Name="HorizontalState", and modify the Width property to the desired value.
The following code snippet showcases this suggestion's implementation:
<Style TargetType="telerik:LinearDropVisual">
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="telerik:LinearDropVisual">
<Grid x:Name="DropCueElement" VerticalAlignment="Stretch" IsHitTestVisible="{TemplateBinding IsHitTestVisible}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="OrientationStates">
<VisualState x:Name="Horizontal">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="HorizontalState">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="VerticalState">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Vertical">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="VerticalState">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="HorizontalState">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid x:Name="VerticalState" Height="11" VerticalAlignment="Top" Visibility="Collapsed" Margin="0 -4 0 0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="11"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Ellipse Fill="{TemplateBinding Background}"
Stroke="{TemplateBinding BorderBrush}"
SnapsToDevicePixels="True"
StrokeThickness="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=BorderThickness.Left}"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Width="11"
Height="11"/>
<Rectangle VerticalAlignment="Top"
HorizontalAlignment="Stretch"
Fill="{TemplateBinding BorderBrush}"
Stroke="{TemplateBinding BorderBrush}"
Grid.Column="1"
Margin="0 4 0 0"
SnapsToDevicePixels="True"/>
</Grid>
<Grid x:Name="HorizontalState" Visibility="Collapsed" Width="11" HorizontalAlignment="Left" Margin="-4 0 0 0">
<Grid.RowDefinitions>
<RowDefinition Height="11"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Ellipse Stroke="{TemplateBinding BorderBrush}"
Fill="{TemplateBinding Background}"
StrokeThickness="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=BorderThickness.Left}"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Width="11"
Height="11"
SnapsToDevicePixels="True"
Margin="0"/>
<!--Modify the Width property of the Rectangle (default value "3") (modified value "1")-->
<Rectangle VerticalAlignment="Stretch"
Width="1"
HorizontalAlignment="Center"
Stroke="{TemplateBinding BorderBrush}"
Fill="{TemplateBinding BorderBrush}"
SnapsToDevicePixels="True"
Grid.Row="1"
Margin="0 -1 0 0"/>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The produced result is as follows (the line is thinner than the default size):
With this being said, could you give this suggestion a try?
Regards,
Stenly
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
Rank 1
I think my previous explanation was a bit wrong when I expressed "much larger" I was talking about the height not the width of the drop line, let me explain it again:
The "drop line" is taking the full height of the container. It should be only as tall as the items inside the WrapPanel, not take the full height of the WrapPanel itself:
Tried to draw the size of the drop line in green and below the red line shouldn't be displayed
Thanks in advance!
Hello Raphael,
Thank you for the clarification.
The observed behavior is expected because the default ItemsPanel of the RadListBox control is not the RadWrapPanel.
With this in mind, to achieve this requirement, you could follow the suggestion from the following forum thread:
How to: reorder items within wrappanel in UI for WPF | Telerik Forums
With this being said, I hope the provided information will be of help to you.
Rank 1
I've already tried to use VirtualizingWrapPanel and no success :(
Do you have another approach that we could try?
Thanks in advance!
Hello Raphael,
I was referring to the approach in the sample project from the forum thread that I shared. Please excuse me for not specifying this in my previous comment.
With this in mind, what I could suggest would be to revert back to the RadWrapPanel as an ItemsPanel, and extend the LinearDropVisualProvider class. Then, override the GetLocation method to return a new Point instance based on the position of the dragged RadListBoxItem element inside the panel. After that, create a new instance of the extended LinearDropVisualProvider for the DropVisualProvider property of RadListBox.
The following code snippets showcase this suggestion's implementation:
public class CustomLinearDropVisualProvider : LinearDropVisualProvider
{
public override Point GetLocation(Telerik.Windows.Controls.RadListBoxItem container, Panel panel)
{
return container.TransformToVisual(panel).Transform(new Point());
}
}<telerik:RadListBox.DropVisualProvider>
<local:CustomLinearDropVisualProvider />
</telerik:RadListBox.DropVisualProvider>
With this suggestion only, the line will now display based on the location of the dragged RadListBoxItem container, rather than being displayed only on the top row.
To customize the line itself to not extend to the end of the panel, you could create a new Style that targets the LinearDropVisual element and introduces a custom ControlTemplate.
The following code snippet showcases a sample one:
<Style TargetType="telerik:LinearDropVisual">
<Setter Property="IsHitTestVisible" Value="False" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="telerik:LinearDropVisual">
<Grid VerticalAlignment="Stretch"
IsHitTestVisible="{TemplateBinding IsHitTestVisible}">
<Grid x:Name="HorizontalState"
Visibility="Visible"
Width="8"
HorizontalAlignment="Left"
Margin="-3 0 0 0">
<Grid.RowDefinitions>
<RowDefinition Height="8" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Ellipse Stroke="{telerik:Windows11Resource ResourceKey=AccentSelectedBrush}"
StrokeThickness="2"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Width="8"
Height="8"/>
<Rectangle Fill="{telerik:Windows11Resource ResourceKey=AccentSelectedBrush}"
RadiusX="2"
RadiusY="2"
Margin="0 -1 0 0"
VerticalAlignment="Top"
Width="2"
HorizontalAlignment="Center"
Height="35"
Grid.Row="1" />
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The produced result with both of these suggestions is as follows:
With this being said, I attached a sample project for you to test.
Rank 1
Thank you very much for the help, Stenly!
Hello Raphael,
I am happy to hear that the proposed suggestion was of help to you and that you took the time to confirm its behavior on your end.