RadTreeView - Amend drop preview line

[Ian]

Hi,

Is there any way to customize the drop preview line: (the orange line with the circle on one end in the attached image)

I'd like to change the color to be more prominent in our system here, but I can't figure out how to change it?

Thanks very much

[Martin Ivanov]

Hi Ian,

As the preview line is set directly in the RadTreeView's ControlTemplate in order to change its color you will need to slightly change the template. Basically after extracting the template you can find the Canvas element with x:Name set to "DragBetweenItemsFeedback" and change the colors of the elements inside its Content.

For your convenience I extracted the ControlTemplate and prepared a sample project that demonstrates this change.

<ControlTemplate x:Key="treeViewTemplate" TargetType="telerik:RadTreeView">
    <Grid x:Name="RootElement">
        <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
            <Grid>
                <ScrollViewer
                                Padding="{TemplateBinding Padding}"
                                IsTabStop="False"
                                x:Name="ScrollViewer"
                                BorderThickness="0"
                                Background="{x:Null}"
                                CanContentScroll="True"
                                HorizontalScrollBarVisibility="Auto"
                                VerticalScrollBarVisibility="Auto">
                    <ItemsPresenter/>
                </ScrollViewer>
                <Canvas x:Name="DragBetweenItemsFeedback" Height="8" Visibility="Collapsed" HorizontalAlignment="Left" VerticalAlignment="Top" IsHitTestVisible="False">
                    <Ellipse Stroke="Green" StrokeThickness="2" Width="8" Height="8"/>
                    <Grid Width="{Binding ElementName=DragBetweenItemsFeedback, Path=Width}">
                        <Rectangle Fill="Green" RadiusX="2" RadiusY="2" Height="2" Margin="6,3,0,3"/>
                    </Grid>
                </Canvas>
            </Grid>
        </Border>
    </Grid>
</ControlTemplate>

I hope this helps.

Regards,
Martin
Telerik

 

 

[santosh]

How to change drag icon <orange arrow in drag preview>color from orange to green

[Martin Ivanov]

Hello Santosh,

To change the drag icon you can extract the template of the TreeViewDragVisual element and modify it a bit. Basically, you can find the Path element that draws the drag icon and change its Fill to Green. I attached a small example which demonstrates this approach. I hope it helps.

You can read more about customizing the default drag visual in our help documentation.

Regards,
Martin Ivanov
Progress Telerik