SettingsPaneView Attached Properties
The SettingsPaneView represents the default content of the RadDiagram SettingsPane. The bindings in the diagram's SettingsPane are created with custom code used through attached properties. This is necessary because the pane is opened in a Popup which is in a different visual tree and the normal XAML bindings between the application's tree and the Popup's tree might not work as expected. The SettingsPaneView exposes the following attached properties.
SettingsPaneView.EditorItemType : An enumeration property that determines on which item types this binding should be applied. It contains the following flags: None, Shapes, Connections, Custom, All
SettingsPaneView.EditorPropertyName: A string property that represents the property of the currently edited shape. For example, if you set the property to the "CustomText" string, the logic in the property changed callback of the attached property will use reflection to find a property with the same name defined in the shape object.
SettingsPaneView.EditorValue: A string property that defines the value of which property of the current control should be taken and applied on the currently edited shape.
SettingsPaneView.ContainerEditItemType: An enumeration property that determines on which item types this binding should be applied. It contains the following flags: None, Shapes, Connections, Custom, All
SettingsPaneView.ContainerEditProperty: An enumeration property that determines if the type set in ContainerEditItemType should be disabled or hidden. It contains the following flags: IsEnabled, Visibility
SettingsPaneView.CurrentEditType: An enumeration property property that gets or sets the currently edited type.
In the following sections we will demonstrate how you can use the EditorItemType, EditorPropertyName and EditorValue attached properties. In the examples we will add custom RadTabItem to the SettingsPaneView and bind its visibility property to a property of a business object. So that this RadTabItem is visible for specific shapes. First, we need to create a Diagram and populate it with some shapes in an MVVM scenario.
Example 1: Creating ViewModels
public class Model : NodeViewModelBase { public Model() { Visibility = Visibility.Collapsed; } public Visibility Visibility { get; set; } }
public class Link : LinkViewModelBase
public class DiagramGraphSource : ObservableGraphSourceBase
this.AddNode(shape1);
this.AddNode(shape2);
}
}
Example 2: Defining RadDiagram in XAML
<telerik:RadDiagram x:Name="diagram" xmlns:primitives="clr-namespace:Telerik.Windows.Controls.Diagrams.Primitives;assembly=Telerik.Windows.Controls.Diagrams">
<telerik:RadDiagram.ShapeTemplate>
<DataTemplate>
<TextBlock Text="{Binding Content, Mode=TwoWay}" />
</DataTemplate>
</telerik:RadDiagram.ShapeTemplate>
<telerik:RadDiagram.ShapeEditTemplate>
<DataTemplate>
<TextBox Text="{Binding Content, Mode=TwoWay}" />
</DataTemplate>
</telerik:RadDiagram.ShapeEditTemplate>
<primitives:ItemInformationAdorner.AdditionalContent>
<telerik:SettingsPane Diagram="{Binding ElementName=diagram}" SettingsPaneViewWidth="410"/>
</primitives:ItemInformationAdorner.AdditionalContent>
<telerik:RadDiagram.ShapeStyle>
<Style TargetType="telerik:RadDiagramShape" BasedOn="{StaticResource RadDiagramShapeStyle}">
<Setter Property="Position" Value="{Binding Position, Mode=TwoWay}" />
</Style>
</telerik:RadDiagram.ShapeStyle>
</telerik:RadDiagram>
Example 3: Setting GraphSource property
public MainWindow()
{
InitializeComponent();
this.diagram.GraphSource = new DiagramGraphSource();
}
Now we can add an additional RadTabItem to the SettingsPaneView. In order to do that we need to extract and edit the default template of the SettingsPaneView. Example 4 contains the default template of the SettingsPaneView based on the Office2016 theme and the custom RadTabItem.
Example 4: Modified template of the SettingsPaneView
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
xmlns:telerik1="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"
xmlns:primitives="clr-namespace:Telerik.Windows.Controls.Diagrams.Primitives;assembly=Telerik.Windows.Controls.Diagrams"
xmlns:extensions="clr-namespace:Telerik.Windows.Controls.Diagrams.Extensions;assembly=Telerik.Windows.Controls.Diagrams.Extensions"
xmlns:local="clr-namespace:SettingsPane_Tool">
<sys:String x:Key="GlyphClose"></sys:String>
<FontFamily x:Key="TelerikWebUI">/Telerik.Windows.Controls;component/Themes/Fonts/TelerikWebUI.ttf#TelerikWebUI</FontFamily>
<ItemsPanelTemplate x:Key="PaneTabControlItemsPanel">
<telerik:RadUniformGrid Rows="1"/>
</ItemsPanelTemplate>
<DropShadowEffect x:Key="DiagramEffect" BlurRadius="3" Opacity="0.1" ShadowDepth="3"/>
<telerik1:InvertedBooleanConverter x:Key="InvertedBooleanConverter"/>
<Style TargetType="extensions:SettingsPaneView" BasedOn="{StaticResource SettingsPaneStyle}">
<Setter Property="Background" Value="{telerik1:Office2016Resource ResourceKey=PrimaryBrush}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="extensions:SettingsPaneView">
<Border Background="{TemplateBinding Background}" BorderBrush="{telerik1:Office2016Resource ResourceKey=BasicBrush}" BorderThickness="1">
<telerik:RadTabControl x:Name="TabControl"
Effect="{StaticResource DiagramEffect}"
DropDownDisplayMode="Collapsed"
FontWeight="Normal"
BorderBrush="{telerik1:Office2016Resource ResourceKey=BasicBrush}"
BorderThickness="0"
ItemsPanel="{StaticResource PaneTabControlItemsPanel}"
ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<telerik:RadTabItem Header="{telerik:LocalizableResource Key=SettingsPane_HomeTab}" Padding="0" Margin="4 4 0 0">
<extensions:SettingsPaneHomeControl/>
</telerik:RadTabItem>
<telerik:RadTabItem
Header="{telerik:LocalizableResource Key=SettingsPane_SizeTab}"
Padding="0"
extensions:SettingsPaneView.ContainerEditProperty="IsEnabled"
extensions:SettingsPaneView.ContainerEditItemType="Shapes"
Margin="0 4 0 0">
<extensions:SettingsPaneSizeControl/>
</telerik:RadTabItem>
<telerik:RadTabItem Header="{telerik:LocalizableResource Key=SettingsPane_StyleTab}" Padding="0" Margin="0 4 0 0">
<extensions:SettingsPaneStyleControl x:Name="SettingsPaneStyleControl"/>
</telerik:RadTabItem>
<telerik:RadTabItem Header="{telerik:LocalizableResource Key=SettingsPane_TextTab}" Padding="0" Margin="0 4 4 0">
<extensions:SettingsPaneTextControl/>
</telerik:RadTabItem>
<telerik:RadTabItem Header="Custom Tab"
extensions:SettingsPaneView.EditorPropertyName="DataContext.IsVisible"
extensions:SettingsPaneView.EditorItemType="Shapes,Custom"
extensions:SettingsPaneView.EditorValue="{Binding Path=Visibility,Mode=TwoWay, RelativeSource={RelativeSource Self}}"
/>
<telerik:RadTabControl.AdditionalContent>
<telerik:RadToggleButton
FontFamily="{StaticResource TelerikWebUI}"
Content="{StaticResource GlyphClose}"
FontSize="16"
FontWeight="Normal"
FontStyle="Normal"
IsChecked="{Binding IsActive, Mode=TwoWay, Converter={StaticResource InvertedBooleanConverter}, RelativeSource={RelativeSource TemplatedParent}}"
IsBackgroundVisible="False"
BorderThickness="0"
Foreground="{telerik1:Office2016Resource ResourceKey=MarkerInvertedBrush}"
Focusable="False"
Margin="2 2 4 2"/>
</telerik:RadTabControl.AdditionalContent>
</telerik:RadTabControl>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
Example 5: Add custom RadTabItem and set the SettingsPaneView attached properties
<telerik:RadTabItem Header="Custom Tab"
extensions:SettingsPaneView.EditorPropertyName="DataContext.IsVisible"
extensions:SettingsPaneView.EditorItemType="Shapes,Custom"
extensions:SettingsPaneView.EditorValue="{Binding Path=Visibility,Mode=TwoWay, RelativeSource={RelativeSource Self}}"/>
