RadTreeView - Amend drop preview line

4 posts, 0 answers
  1. Ian
    Ian avatar
    7 posts
    Member since:
    Jun 2014

    Posted 26 Jun 2014 Link to this post

    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
  2. Martin Ivanov
    Admin
    Martin Ivanov avatar
    1475 posts

    Posted 26 Jun 2014 Link to this post

    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
     
    Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
     
  3. santosh
    santosh avatar
    1 posts
    Member since:
    Dec 2017

    Posted 04 Dec in reply to Martin Ivanov Link to this post

    How to change drag icon <orange arrow in drag preview>color from orange to green
  4. Martin Ivanov
    Admin
    Martin Ivanov avatar
    1475 posts

    Posted 05 Dec Link to this post

    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
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
Back to Top