Is it possible to make the settings pane float?

5 posts, 2 answers
  1. Kunal Chowdhury
    Kunal Chowdhury avatar
    23 posts
    Member since:
    May 2010

    Posted 25 Oct 2013 Link to this post

    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
  2. Answer
    Zarko
    Admin
    Zarko avatar
    755 posts

    Posted 29 Oct 2013 Link to this post

    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
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for SILVERLIGHT.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
  3. DevCraft banner
  4. Kunal Chowdhury
    Kunal Chowdhury avatar
    23 posts
    Member since:
    May 2010

    Posted 05 Nov 2013 Link to this post

    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
  5. Answer
    Zarko
    Admin
    Zarko avatar
    755 posts

    Posted 07 Nov 2013 Link to this post

    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
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for SILVERLIGHT.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
  6. Kunal Chowdhury
    Kunal Chowdhury avatar
    23 posts
    Member since:
    May 2010

    Posted 07 Nov 2013 Link to this post

    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
Back to Top
DevCraft banner