WPF Diagram: Open Settings Pane Programatically

[Mrugendra]

Hi,

 

We wish to auto open the settings pane whenever the user selects a particular shape. What is the standard way of achieving this?

We have added a event handler for the selection changed event, just need the method to trigger the settings pane open.

Thank you.

[Petar Mladenov]

Hello Mrugendra,

Generally the SettingsPane is defined in XAML as content of the ItemInformationAdorner which is adorner in Diagram surface designed to host controls attached to the selected diagram shapes. SettingsPane is consisted of settings button which is activated when you select the shapes and popup with SettingsPaneView control which defines the tabs with various settings you can apply to the shapes/connections. From your explanation , it seems to me that the button is not necessary for your and if this is the case you can simply position the SettingsPaneView control in the information adorner:

<telerik:RadDiagram x:Name="diagram" Grid.Row="1" Grid.Column="1" MinWidth="500" BorderThickness="1">
                <primitives:ItemInformationAdorner.AdditionalContent>
                    <Canvas HorizontalAlignment="Right" VerticalAlignment="Center" Margin="20 0 0 0">
                        <telerik:SettingsPaneView Diagram="{Binding ElementName=diagram}" Width="242" Height="287"/>
                    </Canvas>
                </primitives:ItemInformationAdorner.AdditionalContent>
            </telerik:RadDiagram>

Canvas position is required because by default the information adorner covers the shape and this is a possible way to offset it to the right of the shape. Let me know if the solution works well on your side. Also keep in mind that the default size of the settings pane view is different in the different telerik themes, so runtime change of the theme would require change in the sizes as well. Let us know if this is a requirement for you.

Regards,
Petar Mladenov
Progress Telerik

[Mrugendra]

Hello Petar,

Thank you for the detailed reply.  We do actually like the Toggle Button there allowing the user to show/hide the settings pane as required.  This also needs to be a popup since the diagram itself might be smaller.  So, ideally, we simply want a method that we can call in code to pop open the settings pane, and also, to a particular tab in the settings pane. 

So, for example, if the user clicks a TextShape, we want the settings pane to popup with "Text" tab in focus inside it. 

You can see in the image below, the canvas settings pane solution is not viable for small diagram widths.

[Petar Mladenov]

Hi Mrudendra,

Below is  possible solution with inheritance of SettingsPane and the event PreviewAdditionalContentActivatedto detect the type of items menu will show up for:

using Telerik.Windows.Controls.Diagrams.Extensions;
using Telerik.Windows.Controls;
using System.Linq;

namespace DiagramsTestApp
{
    public class CustomSettingsPane : SettingsPane
    {
        SettingsPaneView settingsPaneView;
        private RadTabControl tabControl;

        public override void OnApplyTemplate()
        {
            base.OnApplyTemplate();

            this.settingsPaneView = this.GetTemplateChild("SettingsPaneView") as SettingsPaneView;
            this.settingsPaneView.SizeChanged += this.SettingsPaneView_SizeChanged;
        }

        private void SettingsPaneView_SizeChanged(object sender, System.Windows.SizeChangedEventArgs e)
        {
            if (this.tabControl == null)
            {
                this.tabControl = this.settingsPaneView.ChildrenOfType<RadTabControl>().FirstOrDefault();
            }
            if (this.tabControl != null)
            {
                this.tabControl.Loaded += this.TabControl_Loaded;
                this.settingsPaneView.SizeChanged -= SettingsPaneView_SizeChanged;
            }
        }

        private void TabControl_Loaded(object sender, System.Windows.RoutedEventArgs e)
        {
            this.tabControl.SelectedIndex = this.TabIndexToLoad;
        }

        public int TabIndexToLoad
        {
            get;
            set;
        }
    }
}

 <telerik:RadDiagram x:Name="diagram" Grid.Row="1" Grid.Column="1" MinWidth="500" BorderThickness="1"
                                AdditionalContentActivated="diagram_AdditionalContentActivated_1">
                <primitives:ItemInformationAdorner.AdditionalContent>
                    <local:CustomSettingsPane Diagram="{Binding ElementName=diagram}" x:Name="settingsPane"/>
                </primitives:ItemInformationAdorner.AdditionalContent>
            </telerik:RadDiagram>

        private void diagram_AdditionalContentActivated_1(object sender, AdditionalContentActivatedEventArgs e)
        {
            if (e.ContextItems.Any(x => x is RadDiagramTextShape))
            {
                this.settingsPane.TabIndexToLoad = 3;
            }
            else
            {
                this.settingsPane.TabIndexToLoad = 0;
            }
        }

Regards,
Petar Mladenov
Progress Telerik

[Mrugendra]

Hello Petar,

Thank you for your reply and the effort.  This particular solution has some issues. For one, the layout of the settings pane seems to go haywire (the box becomes smaller as compared to the telerik:settingsPane) and our requirement of having an auto-popup whenever you select a text shape is not addressed.

We managed to get close to a solution using the AdditionalContentActivated event and locating the template items. Its  a roundabout way using threads (we had to free up the UI thread to let the control load)

 

 private void diagram_AdditionalContentActivated(object sender, AdditionalContentActivatedEventArgs e){
            if (e.ContextItems.Any(x => x is RadDiagramTextShape))
            {
                   ShowTextSettingsPane();        
            }
}

private void ShowTextSettingsPane()
        {
            System.Threading.Tasks.Task.Run(() =>
            {
                System.Threading.Thread.Sleep(100);
                var t = diagram_settings.Template;
                var chld = (RadToggleButton)t.FindName("ToggleButton", diagram_settings);
                if (chld != null)
                {
                     //Trigger show settings pane on the toggle button.
                    chld.Dispatcher.Invoke(() => chld.IsChecked = true);
                    
                    //Select the  desired tab.
                    diagram_settings.Dispatcher.Invoke(() =>
                    {
                        SettingsPaneView vw = (SettingsPaneView)diagram_settings.Template.FindName("SettingsPaneView", diagram_settings);
                        if (vw != null)
                        {
                            var tmp = vw.Template;
                            var tabC = (RadTabControl)tmp.FindName("TabControl", vw);
                            if (tabC != null)
                            {
                                tabC.SelectedIndex = tabC.Items.Count - 1;
                            }
                        }
                    });
                }
            });
        }

I like your approach, if we can solve the layout issue and add the ability to trigger the settings pane into view automatically whenever a TextShape is selected, that would be wonderful. 

[Petar Mladenov]

Hi Mrugendra,

The sizes issues should be applicable to SettingsPaneView control used as a standalone control (without SettingsPane) because the SettingsPane default styles define the view control sizes via styles and the properties SettingsPaneViewWidth and SettingsPaneViewHeight. I can see on your picture you have set label telerik:SettingsPane but the control on the picture is SettingsPaneView (because it does not have an arrow on the left.

Regarding the toggle button, in your previous reply you said " We do actually like the Toggle Button there allowing the user to show/hide the settings pane as required." and I decided you need the toggle button.

Here is another way of auto opening the view control with no manual clicking on the toggle button ( no changes in the previous version of CustomSettingsPane):

     private void diagram_AdditionalContentActivated_1(object sender, AdditionalContentActivatedEventArgs e)
        {
            if (e.ContextItems.Any(x => x is RadDiagramTextShape))
            {
                ShowTextSettingsPane(3);
            }
        }

        private void ShowTextSettingsPane(int index)
        {
            this.settingsPane.TabIndexToLoad = index;

            this.Dispatcher.BeginInvoke(new Action(() =>
            {
                this.settingsPane.IsActive = true;
            }), System.Windows.Threading.DispatcherPriority.Loaded);
        }

                   AdditionalContentActivated="diagram_AdditionalContentActivated_1">
                <primitives:ItemInformationAdorner.AdditionalContent>
                    <local:CustomSettingsPane Diagram="{Binding ElementName=diagram}" x:Name="settingsPane" />
                </primitives:ItemInformationAdorner.AdditionalContent>
            </telerik:RadDiagram>

Regards,
Petar Mladenov
Progress Telerik