Is there anyway to have a move grip/handle to move the shape instead/beside moving by dragging the shape itself ?

3 posts, 1 answers
  1. Bruno
    Bruno avatar
    10 posts
    Member since:
    Jul 2012

    Posted 04 Sep 2015 Link to this post

    Hey guys,

    Is there anyway to have a move grip/handle to move the shape instead/beside moving by dragging the shape itself ?

     

    Like the attached image.

     

     I have a scenario which I there are shapes with semi transparent content over each other so I don't ant to change the z order index but I have a listbox that contains the name of the shapes so when user select the an item  it selects the shape which is not the top most shape. What I want to do is to have a move grip/handle to allow the user move the shape in the designer area by dragging the grip handle without messing with selecting other shapes. It would be exactly similar with what existing rotation grip behaves.

    The reason why I am asking this is because currently if the user click inside the designer area to drag the selected shape which is not the most top the diagram tries to select the top most but I don't want the selection changes but I want the user be able to drag the selected shape which is already selected and it is not the top most shape. 

     

  2. Answer
    Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 09 Sep 2015 Link to this post

    Hello Bruno,

    For this scenario :

    "currently if the user click inside the designer area to drag the selected shape which is not the most top the diagram tries to select the top most"

    I guess you mean that the shape below is entirely invisible, except its selection rectangle and rotation part which are in separate adorner ? If the shape has some part of itself visible - you are able to drag the shape by dragging this visible part.

    So if you mean shapes entirely behind other shapes, indeed you need to simulate rotation thumb's work.

    You can re-template the ManipulationAdorner used in the RadDiagram to provide such Drag thumb, however this means a lot of custom code - custom diagram, custom manipulation adorner, code behind, probably attached properties. 
    Instead I would recommend using the AdditionalContent of the ItemInformationAdorner.
    <telerik:RadDiagram>
    <
    primitives:ItemInformationAdorner.AdditionalContent>
                  <Rectangle Width="100" Height="100" Fill="DeepSkyBlue" HorizontalAlignment="Right"/>
              </primitives:ItemInformationAdorner.AdditionalContent>

    You can use the AdditionalContentActivated and its Preview events in order to:
    - position the thumb / rectangle used for dragging the shape (usually with Margin depending on the size of the shape
    - get the shapes for which the Additional Content is activated (by using the AdditionalContentActivatedEventArgs.ContextItems property
    Basically, you need to handle MouseDown / Move / Up events of the thumb and move the shapes (with their Posiiton property). Of course, you should use this approach only if you do not use SettingsPane because SettingsPane needs to be the only element in the AdditionContent of the ItemInformationAdorner.

    Regards,
    Petar Mladenov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for WPF is Visual Studio 2017 Ready
  4. Bruno
    Bruno avatar
    10 posts
    Member since:
    Jul 2012

    Posted 09 Sep 2015 in reply to Petar Mladenov Link to this post

    Thanks Peter for the reply.

     I picked the first approach with some modifications because I would like the handle act the same way rotate handle is working in terms of keeping the location according to the rotation state of the shape and consistency with rotate handle behavior.

     Here is what I did:

    1- ​I overridden the style for the primitives:ManipulationAdorner by adding a thumb control besides the rotate path as follows:

    <Style TargetType="primitives:ManipulationAdorner" >
            <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">
                <Setter.Value>
                    <ControlTemplate TargetType="primitives:ManipulationAdorner">
                        <Grid>
                            <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">
                                <ToolTipService.ToolTip>
                                    <ToolTip Content="{telerik:LocalizableResource Key=Diagram_Resize}"/>
                                </ToolTipService.ToolTip>
                            </Rectangle>
                            <Rectangle x:Name="TopRightResizeHandle"
                                    Style="{StaticResource ResizingRectangleStyle}"
                                    Margin="{StaticResource ManipulationAdornerThicknessT}"
                                    VerticalAlignment="Top"
                                    HorizontalAlignment="Right">
                                <ToolTipService.ToolTip>
                                    <ToolTip Content="{telerik:LocalizableResource Key=Diagram_Resize}"/>
                                </ToolTipService.ToolTip>
                            </Rectangle>
                            <Rectangle x:Name="BottomLeftResizeHandle"
                                    Style="{StaticResource ResizingRectangleStyle}"
                                    Margin="{StaticResource ManipulationAdornerThicknessR}"
                                    VerticalAlignment="Bottom"
                                    HorizontalAlignment="Left">
                                <ToolTipService.ToolTip>
                                    <ToolTip Content="{telerik:LocalizableResource Key=Diagram_Resize}"/>
                                </ToolTipService.ToolTip>
                            </Rectangle>
                            <Rectangle x:Name="BottomRightResizeHandle"
                                    Style="{StaticResource ResizingRectangleStyle}"
                                    Margin="{StaticResource ManipulationAdornerThicknessB}"
                                    VerticalAlignment="Bottom"
                                    HorizontalAlignment="Right">
                                <ToolTipService.ToolTip>
                                    <ToolTip Content="{telerik:LocalizableResource Key=Diagram_Resize}"/>
                                </ToolTipService.ToolTip>
                            </Rectangle>
                            <Path x:Name="RotationPart"
                                    Margin="0, -30, 0, 0"
                                    Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsRotationEnabled, Converter={StaticResource BooleanToVisibilityConverter}}"
                                    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}">
                                <ToolTipService.ToolTip>
                                    <ToolTip Content="{telerik:LocalizableResource Key=Diagram_Rotate}"/>
                                </ToolTipService.ToolTip>
                            </Path>
                            <controls:DiagramDragThumb x:Name="DragThumbPart"
                                    Margin="-40, -30, 0, 0"
                                    Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsDraggingEnabled, Converter={StaticResource BooleanToVisibilityConverter}}"
                                    HorizontalAlignment="Center"
                                    VerticalAlignment="Top"
                                    Height="{StaticResource ManipulationAdornerHeight}"
                                    Width="{StaticResource ManipulationAdornerWidth}" >
                                <ToolTipService.ToolTip>
                                    <ToolTip Content="Move"/>
                                </ToolTipService.ToolTip>
                            </controls:DiagramDragThumb>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

     

    2- then created a custom thumb class called DiagramDragThumb as follows:

     

     public class DiagramDragThumb:Thumb
        {
            public DiagramDragThumb()
            {
                WeakEventManager<Thumb, DragDeltaEventArgs>.AddHandler(this, "DragDelta", OnDragDelta);
            }
            
            private void OnDragDelta(object sender, DragDeltaEventArgs e)
            {
                var diagram = this.FindParent<​RadDiagram>();
                foreach (var shape in diagram.Shapes.Where(s => s.IsSelected))
                {
                    var x=shape.Position.X + e.HorizontalChange;
                    var y = shape.Position.Y + e.VerticalChange;
                    shape.Position = new Point(x, y);
                }
            }
        }

     

    That worked for me!

     Thanks again for your help.

Back to Top