change the content of tab in SettingsPane depending on the Shape

4 posts, 0 answers
  1. Alaa
    Alaa avatar
    28 posts
    Member since:
    Jun 2014

    Posted 08 Dec 2014 Link to this post


    I have many different custom shapes.  
    I've added a new tab to the SettingsPane. How can I change the content of this tab depending on the custom shape that the user has dropped it or selected?
    Any event for SettingsPane can help me?
    I need event fires when I press  the SettingsPane button!
    I tried (PreviewAdditionalContentActivated) and (AdditionalContentActivated) but both are fired when I dropped any shape now when I press the SettingsPane icon.

    Thank you
  2. Martin Ivanov
    Martin Ivanov avatar
    1442 posts

    Posted 11 Dec 2014 Link to this post

    Hi Alaa,

    Indeed, the PreviewAdditionalContentActivated and AdditionalContentActivated events are fired when the shape is selected. Currently, there is no event that indicates when the setting's pane open button is clicked, however, even if such event was exposed there is no easy way to get the popup with the settings of the pane.

    A possible approach could be to define a Styles for the SettingsPaneView element for each shape type and in the AdditionalContentActivated check the type. Then based on it set the corresponding style to the settings panel Style property. However, if you have many different shapes you will need to have many Style which is not very convenient.

    Another approach that might be more suitable for your scenario is to define a ContentPresenter in your additional tab and based on the shape's type set different ContentTemplate through a ContentTemplateSelector.

    Here is an example in code that demonstrates an approach with the default RadDiagramShape and checking their Content property:
    <Style TargetType="extensions:SettingsPaneView" >
        <Setter Property="Template">
                <ControlTemplate TargetType="extensions:SettingsPaneView">         
                    <telerik:RadTabItem Header="Custom Tab">
                        <ContentPresenter extensions:SettingsPaneView.EditorPropertyName="Content"
                                          extensions:SettingsPaneView.EditorItemType="Shapes, Custom"
                                          extensions:SettingsPaneView.EditorValue="{Binding Content, Mode=TwoWay, RelativeSource={RelativeSource Self}}"
                                          ContentTemplateSelector="{StaticResource selector}" />
    Keep in mind that as the popup with the settings pane view is in another visual tree you cannot bind the elements inside of it to the selected shape. This is why we provide attached properties that can be used to create the bindings.  The SettingsPaneView.EditorPropertyName is the property from the selected shape that you want get. The SettingsPaneView.Editor is the value that you want to set. The SettingsPaneView.EditorItemType is the type of the diagram item (shape, connection, etc.)

    <DataTemplate x:Key="customTabContentTemplate1">
        <TextBlock Text="{Binding}" Background="Bisque" Margin="5" />
    <DataTemplate x:Key="customTabContentTemplate2">
        <TextBlock Text="{Binding}" Background="#007ACC" Margin="15" />
    <local:MyContentTemplateSelector x:Key="selector" Template1="{StaticResource customTabContentTemplate1}" Template2="{StaticResource customTabContentTemplate2}" />

    public class MyContentTemplateSelector : DataTemplateSelector
        public DataTemplate Template1 { get; set; }
        public DataTemplate Template2 { get; set; }
        public override System.Windows.DataTemplate SelectTemplate(object item, System.Windows.DependencyObject container)
            if (item.ToString() == "Shape1") { return this.Template1; }
            return this.Template2;

    For your convenience I attached a project demonstrating custom shapes and the above described approach. Please give it a try and let me know if it works for you.


    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

  3. Thomas
    Thomas avatar
    1 posts
    Member since:
    Feb 2015

    Posted 01 Jul 2016 Link to this post

    Hi Martin,

    I am doing the same as above with a DataTemplateSelector to populate my SettingsPane for each shape. The only difference is I have created UserControls as the ContentControl for each DataTemplate in my DataTemplateSelector.

    So one of my DataTemplates in my DataTemplateSelector would look something like:

            public DataTemplate Something{ get; set; }
            public ContentControl SomethingContent { get { return Microsoft.Practices.ServiceLocation.ServiceLocator.Current.GetInstance<SomethingUserControl>(); } }

    I am using MEF and Prism so each of these ContentControls is a UserControl that is an Export. So I have a Singleton. Now I created another Module that implements the same thing as above. When I open a Module in my application and open the SettingsPane, then I open another Module and open the SettingPane that is supposed to be the same as the first Module's, both Modules ViewModels for these two UserControls get updated because of FirePropertyChanged that I am using. This is because the properties have the same names, and when I closed the first module, my UserControls for the DataTemplateSelector are never Removed or Destructed.

    I am not really sure how I can implement the DataTemplateSelector and be able to Remove or Destruct my UserControls when I close the Module so that this no longer happens. I would rather not share ViewModels between my two projects in my application. Do you have any suggestions for implemetation?

  4. Martin Ivanov
    Martin Ivanov avatar
    1442 posts

    Posted 04 Jul 2016 Link to this post

    Hi Thomas,

    I am not sure that I fully understand your case. Can you please share an isolated version of your implementation that demonstrates the described scenario? This will help me in better understanding it and think of a possible solution.

    If you prefer you can open a new support ticket from your account which will allow you to send a runnable project.

    Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
Back to Top