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

[Bruno]

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. 

 

[Petar Mladenov]

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

[Bruno]

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.