2 posts, 0 answers
  1. Anders Lind
    Anders Lind avatar
    5 posts
    Member since:
    Aug 2014

    Posted 07 Jan 2015 Link to this post


    I am trying to make a custom LineTool but i am having some trouble changing the geometry for the inserted shape. Do you guys have some examples of making custom tools, feels like i am missing something, but haven't been able to find any resources on this area.

    On MouseMove is create a new GeometryShape and set the geometry data to a line. But it still show a arc geomtry even thoug active shape holds a LineGeometry. Seem like DrawingService.InitializeDraw(shape, "PencilTool"); is wrong but use "LineTool" as paramter will result in no geometry at all.

    Also a other issue is that i need the manipulation adorner to only show resize handles in the end of the line. I can override the style for the ManipulationAdorner, but the issues is i will also have other shapes that need all four resize handles?

    This is my custom tool:

        public class LineTool : DrawingToolBase
            private readonly RadDiagram _diagram;

            public const string ToolName = "LineTool";

            public LineTool(RadDiagram diagram)
                : base("LineTool")
                _diagram = diagram;
                Cursor = Cursors.Cross;

            public override bool MouseDown(PointerArgs e)
                if (!IsActive)
                    return false;

                DrawingService.DrawPoints(e.TransformedPoint, e.TransformedPoint);

                return base.MouseDown(e);

            public override bool MouseMove(PointerArgs e)
                if (!IsActive || !ToolService.IsMouseDown || (ToolService.IsControlDown || !DrawingService.IsDrawing))
                    return false;
                if (DrawingService.ActiveShape == null)
                    var shape = CreateShape();
                    shape.IsSelected = true;
                    shape.Geometry = new LineGeometry(e.TransformedPoint, e.TransformedPoint);

                    DrawingService.InitializeDraw(shape, "PencilTool"); //LineTool does not show anything
                    return base.MouseMove(e);

                if (DrawingService.AnchorPoints.Count() > 1)
                DrawingService.DrawPoints(e.TransformedPoint, e.TransformedPoint);
                return true;

            public override bool MouseUp(PointerArgs e)
                if (!IsActive || !DrawingService.IsDrawing)
                    return base.MouseUp(e);
                _diagram.ActiveTool = MouseTool.PointerTool;
                return true;

  2. Petar Mladenov
    Petar Mladenov avatar
    2991 posts

    Posted 09 Jan 2015 Link to this post

    Hello Anders,

    Your solution couples with DrawingService and PencilTool. You have partially hit a known issue when customizing PathTool or PencilTool - you need to use custom tool with exactly "PathTool" or "PencilTool" name. However, we think that there is no need to use either Pencil or Path Tool for your requirement.
    I created a sample to draw Line shapes with custom LineTool following our SDK (Dagram - Custom Tools) and the way ShapeTool in it works. We hope it can be a good starting point for you.

    As for the handles , you need to edit the default ManipulationAdornerStyle and remove the handle -rectangles you wish from there.
    <Style TargetType="primitives:ManipulationAdorner" x:Key="ManipulationAdornerStyle">
            <Setter Property="RenderTransformOrigin" Value="0.5 0.5" />
            <Setter Property="Width" Value="36"/>
            <Setter Property="Height" Value="36"/>
            <Setter Property="Background" Value="{StaticResource DiagramControl_ManipulationAdorner_Background}" />
            <Setter Property="BorderBrush" Value="{StaticResource DiagramControl_ManipulationAdorner_BorderBrush}" />
            <Setter Property="ResizeActivationRadius" Value="{StaticResource ManipulationAdornerResizeActivationRadius}"/>
            <Setter Property="Template">
                    <ControlTemplate TargetType="primitives:ManipulationAdorner">
                            <Rectangle Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}"
                                       StrokeDashArray="3 3" StrokeThickness="1" IsHitTestVisible="False" />
                            <Rectangle x:Name="TopLeftResizeHandle" Style="{StaticResource ResizingRectangleStyle}"
                                       Margin="{StaticResource ManipulationAdornerThicknessL}"
                                       VerticalAlignment="Top" HorizontalAlignment="Left">
                                    <ToolTip Content="{telerik:LocalizableResource Key=Diagram_Resize}" />
                            <Rectangle x:Name="TopRightResizeHandle" Style="{StaticResource ResizingRectangleStyle}"
                                       Margin="{StaticResource ManipulationAdornerThicknessT}"
                                       VerticalAlignment="Top" HorizontalAlignment="Right">
                                    <ToolTip Content="{telerik:LocalizableResource Key=Diagram_Resize}" />
                            <Rectangle x:Name="BottomLeftResizeHandle" Style="{StaticResource ResizingRectangleStyle}"
                                       Margin="{StaticResource ManipulationAdornerThicknessR}"
                                       VerticalAlignment="Bottom" HorizontalAlignment="Left">
                                    <ToolTip Content="{telerik:LocalizableResource Key=Diagram_Resize}" />
                            <Rectangle x:Name="BottomRightResizeHandle" Style="{StaticResource ResizingRectangleStyle}"
                                       Margin="{StaticResource ManipulationAdornerThicknessB}"
                                       VerticalAlignment="Bottom" HorizontalAlignment="Right">
                                    <ToolTip Content="{telerik:LocalizableResource Key=Diagram_Resize}" />
                            <Path x:Name="RotationPart" Margin="0, -30, 0, 0"
                                  Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsRotationEnabled, Converter={StaticResource converter}}"
                                  Data="M13,0L13,7.5L5.8,5.6L8.3,3.7C7.8,3.2 7,3 6.5,3C4.6,3 3,4.7 3,6.6C3,8.6 4.6,10 6.5,10C7.9,9.9 8.8,9.5 9.4,8.6L12.3,9.6C11,11.7 9,13 6.5,13C3,13 0,10 0,6.6C0,3 3,0 6.5,0C8.4375,0 9.7,0.8 10.8,1.7z"
                                  HorizontalAlignment="Center" VerticalAlignment="Top"
                                  Stroke="{StaticResource DiagramControl_RotationPath_Stroke}"
                                  Height="{StaticResource ManipulationAdornerHeight}"
                                  Stretch="Fill" Width="{StaticResource ManipulationAdornerWidth}"
                                  Fill="{StaticResource DiagramControl_RotationPath_Fill}">
                                    <ToolTip Content="{telerik:LocalizableResource Key=Diagram_Rotate}" />

    Petar Mladenov

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

Back to Top