change the content of tab in SettingsPane depending on the Shape

[Alaa]

Hello,

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

[Martin Ivanov]

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">
        <Setter.Value>
            <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}" />
                </telerik:RadTabItem>
            .......
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

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>
<DataTemplate x:Key="customTabContentTemplate2">
    <TextBlock Text="{Binding}" Background="#007ACC" Margin="15" />
</DataTemplate>
<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.

Regards,
Martin
Telerik

 

 

[Thomas]

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?

[Martin Ivanov]

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.

Regards,
Martin
Telerik