Hello!
I'm trying to use DragVisualProvider on my ListBox:
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!
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
0
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.
Raphael
commented on 14 Aug 2025, 12:05 PM
Top achievements
Rank 1
Rank 1
Hello Stenly, thanks for the answer
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!
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!
Stenly
commented on 18 Aug 2025, 09:00 AM
Telerik team
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.