Is it possible to make the settings pane float?

[Kunal Chowdhury]

Hi,

Currently the Settings Pane of the raddiagram is attached to the selected shape. Hence, when changing the size of the shape from the settings pane, the pane itself shifts to a delta position that I am changing. It's irritating when the user clicks the numeric up/down buttons.

Thus, I was thinking whether it is possible to make the settings pane detached from the shape and float as a non modal dialog!!

Regards,
Kunal

[Zarko]

Hi Kunal,
Unfortunately there's no straight forward way to achieve this but you could try to handle the commandExecuted and selectionChanged events and manually change the margin of the settings pane:

<primitives:ItemInformationAdorner.AdditionalContent>
    <telerik:SettingsPane x:Name="settingsPane" Diagram="{Binding ElementName=diagram}" />
</primitives:ItemInformationAdorner.AdditionalContent>

and

private Rect selectionBounds;
private Thickness defauktMargin = new Thickness(0, 0, -10, 0);
private void OnDiagramCommandExecuted(object sender, Controls.Diagrams.CommandRoutedEventArgs e)
{
    var m = this.settingsPane.Margin;
    if (e.Command.Name == "Change X")
    {
        var right = this.diagram.SelectionBounds.X - this.selectionBounds.X - 10;
        this.settingsPane.Margin = new Thickness(-right, m.Top, right, m.Bottom);
    }
    else if (e.Command.Name == "Change Y")
    {
        var top = this.selectionBounds.Y - this.diagram.SelectionBounds.Y;
        this.settingsPane.Margin = new Thickness(m.Left, top, m.Right, -top);
    }
    else
    {
        this.settingsPane.Margin = this.defauktMargin;
        this.selectionBounds = this.diagram.SelectionBounds;
    }
}

private void OnDiagramSelectionChanged(object sender, Controls.SelectionChangedEventArgs e)
{
    this.settingsPane.Margin = this.defauktMargin;
    this.selectionBounds = this.diagram.SelectionBounds;
}

I hope I was able to help you and if you have further questions please feel free to ask.

Regards,
Zarko
Telerik

[Kunal Chowdhury]

Hi Zarko,

X and Y changes are working fine but facing difficulties with Height, Width and Rotation. Any pointers?

Here is the code that I used:

private Rect selectionBounds;
private Thickness defauktMargin = new Thickness(0, 0, -10, 0);

private void Diagram_OnCommandExecuted(object sender, CommandRoutedEventArgs e)
{
    var m = this.settingsPane.Margin;
    if (e.Command.Name == "Change X")
    {
        var right = this.diagram.SelectionBounds.X - this.selectionBounds.X - 10;
        this.settingsPane.Margin = new Thickness(-right, m.Top, right, m.Bottom);
    }
    else if (e.Command.Name == "Change Y")
    {
        var top = this.selectionBounds.Y - this.diagram.SelectionBounds.Y;
        this.settingsPane.Margin = new Thickness(m.Left, top, m.Right, -top);
    }
    else if (e.Command.Name == "Change Height")
    {
        var height = this.selectionBounds.Height - this.diagram.SelectionBounds.Height;
        this.settingsPane.Margin = new Thickness(m.Left, height, m.Right, -height);
    }
    else if (e.Command.Name == "Change Width")
    {
        var width = this.diagram.SelectionBounds.Width - this.selectionBounds.Width - 10;
        this.settingsPane.Margin = new Thickness(-width  , m.Top, width, m.Bottom);
    }
    else
    {
        this.settingsPane.Margin = this.defauktMargin;
        this.selectionBounds = this.diagram.SelectionBounds;
    }
}

private void OnDiagramSelectionChanged(object sender, Telerik.Windows.Controls.SelectionChangedEventArgs e)
{
    this.settingsPane.Margin = this.defauktMargin;
    this.selectionBounds = this.diagram.SelectionBounds;
}

Did I miss anything?

Regards,
Kunal

[Zarko]

Hello Kunal,
I tried to do the same for the Height, Width and Rotation changes and it turns out it's very difficult to do this, so we'll consider a virtual method in the RadDiagram which will allow you to move the settings pane as desired.
I've attached a sample project with my code for the changes - the width and height are working fine but unfortunately I couldn't make the rotation work in all cases

Regards,
Zarko
Telerik

[Kunal Chowdhury]

Hi Zarko,

This looks good. Now Height, Width, Left and Top works perfectly. I uncommented the rotation code that you shared and that is better than the existing. I suggest your team implement this feature properly in RadDiagram in the coming days.

Thank you for the support.

Regards,
Kunal