This is a migrated thread and some comments may be shown as answers.

Setting ShapeStyle to RadDiagram

15 Answers 489 Views

Diagram

This is a migrated thread and some comments may be shown as answers.

15 Answers, 1 is accepted

answered on 04 Oct 2018, 08:54 AM

diagram-style-selector-example.zip

Hello Sami,

I am glad to hear that you found the style selector. As for the exception, note that the ShapeStyleSelector property of the diagram will be applied both to RadDiagramShape and RadDiagramContainerShape elements. However, you will need to make sure that the SelectStyle() method returns the proper Style for the corresponding shape. You can check the type of the element where the style will be applied via the 'container' parameter of the method. For example:

public override Style SelectStyle(object item, DependencyObject container)

{

if (container is RadDiagramShape)

{

return this.MyShapeStyle;

}

else

{

return this.MyContainerShapeStyle;

}

I also attached a project showing this approach. I hope it helps.

Regards,
Martin Ivanov
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.

answered on 04 Oct 2018, 10:35 AM

Hi Martin,

Thanks. I'm trying to extend the Class Diagram example by changing it to MVVM. I created a model object for Class (called BaseModel) and this is linked to the graphical presentation of the Class. In the SelectStyle I just return the BaseModelStyle which is the ClassShape of the Class Diagram example (see below). Now I debugged the SetStyle method and the item is correctly BaseModel and the container is Shape with width and height of 0. In that sense the BaseModelStyle should work, however I still get the Exception.

public override Style SelectStyle(object item, DependencyObject container)

{

if (item is BaseModel)

return this.BaseModelStyle;

return this.BaseModelStyle; // Testing only with the BaseModelStyle

}

<Style x:Key="ClassShape" TargetType="local:ClassShape">

<Setter Property="IsCollapsible" Value="True" />

<Setter Property="IsResizingEnabled" Value="False" />

<Setter Property="MinHeight" Value="100" />

<Setter Property="MinWidth" Value="100" />

<Setter Property="Padding" Value="15 5" />

<Setter Property="Width" Value="150" />

<Setter Property="Height" Value="Auto" />

<Setter Property="HorizontalContentAlignment" Value="Left" />

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="local:ClassShape">

<Grid x:Name="RootPanel">

<VisualStateManager.VisualStateGroups>

<VisualStateGroup x:Name="MouseStates">

<VisualState x:Name="Normal" />

<VisualState x:Name="MouseOver" />

</VisualStateGroup>

<VisualStateGroup x:Name="CollapsedStates">

<VisualState x:Name="Expanded" />

<VisualState x:Name="Collapsed" />

</VisualStateGroup>

<VisualStateGroup x:Name="ActiveConectionStates">

<VisualState x:Name="NormalActiveConnectionState" />

<VisualState x:Name="ActiveConnectionInsideShape">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0"

Storyboard.TargetName="ActiveSelectedBorder"

Storyboard.TargetProperty="Visibility">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Visibility>Visible</Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

<VisualStateGroup x:Name="ConnectorsAdornerVisibilityStates">

<VisualState x:Name="ConnectorsAdornerCollapsed" />

<VisualState x:Name="ConnectorsAdornerVisible">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0"

Storyboard.TargetName="ConnectorsControl"

Storyboard.TargetProperty="Visibility">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Visibility>Visible</Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

<VisualStateGroup x:Name="SelectionStates">

<VisualState x:Name="Selected" />

<VisualState x:Name="SelectedInGroup" />

<VisualState x:Name="Unselected" />

<VisualState x:Name="SelectedAsGroup" />

</VisualStateGroup>

<VisualStateGroup x:Name="EditMode">

<VisualState x:Name="NormalMode" />

<VisualState x:Name="NormalEditMode">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0"

Storyboard.TargetName="TextContent"

Storyboard.TargetProperty="Visibility">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Visibility>Collapsed</Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Duration="0"

Storyboard.TargetName="EditContent"

Storyboard.TargetProperty="Visibility">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Visibility>Visible</Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="TextBoxEditMode">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0"

Storyboard.TargetName="TextContent"

Storyboard.TargetProperty="Visibility">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Visibility>Collapsed</Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Duration="0"

Storyboard.TargetName="EditTextBox"

Storyboard.TargetProperty="Visibility">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Visibility>Visible</Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

<VisualStateGroup x:Name="DropStates">

<VisualState x:Name="DropNormal" />

<VisualState x:Name="DropComplete" />

<VisualState x:Name="DragOver" />

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

<Grid.RowDefinitions>

<RowDefinition Height="Auto" />

<RowDefinition Height="*" />

<RowDefinition Height="Auto" />

</Grid.RowDefinitions>

<Border x:Name="ContainerBorder"

Grid.RowSpan="2"

Background="{TemplateBinding Background}"

BorderBrush="{TemplateBinding BorderBrush}"

BorderThickness="{TemplateBinding BorderThickness}"

CornerRadius="8" />

<Grid x:Name="NormalContent" MinHeight="50">

<Grid.ColumnDefinitions>

<ColumnDefinition />

<ColumnDefinition Width="Auto" />

</Grid.ColumnDefinitions>

<Border Grid.ColumnSpan="2"

BorderBrush="{TemplateBinding BorderBrush}"

BorderThickness="1 1 1 0"

CornerRadius="8 8 0 0">

<Border.Background>

<LinearGradientBrush StartPoint="0, 0.5" EndPoint="1, 0.5">

<LinearGradientBrush.GradientStops>

<GradientStop Color="#FFD4DDEF" />

<GradientStop Offset="1" Color="#FFFFFFFF" />

</LinearGradientBrush.GradientStops>

</LinearGradientBrush>

</Border.Background>

</Border>

<StackPanel x:Name="TextContent"

Margin="{TemplateBinding Padding}"

HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"

VerticalAlignment="{TemplateBinding VerticalContentAlignment}">

<TextBlock FontSize="12"

FontWeight="Bold"

Text="{TemplateBinding Content}" />

<TextBlock x:Name="TypeName"

Grid.Row="1"

Margin="5 0 0 0"

FontSize="9"

Text="" />

</StackPanel>

<Grid x:Name="PART_RotationalPart">

<ContentPresenter x:Name="EditContent"

HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"

VerticalAlignment="{TemplateBinding VerticalContentAlignment}"

Content="{TemplateBinding Content}"

ContentTemplate="{TemplateBinding EditTemplate}"

Visibility="Collapsed" />

<TextBox x:Name="EditTextBox" Visibility="Collapsed">

<TextBox.Style>

<Style TargetType="{x:Type TextBox}">

<Setter Property="TextWrapping" Value="Wrap" />

<Setter Property="TextAlignment" Value="Center" />

<Setter Property="HorizontalAlignment" Value="Stretch" />

<Setter Property="VerticalAlignment" Value="Center" />

<Setter Property="Margin" Value="4" />

<Setter Property="FontSize" Value="11" />

<Setter Property="FontFamily" Value="Segoe UI" />

<Setter Property="Foreground" Value="Black" />

<Setter Property="Padding" Value="2" />

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="{x:Type TextBox}">

<Grid x:Name="RootElement" UseLayoutRounding="True">

<Rectangle Fill="White"

Stroke="#FF767676"

StrokeDashArray="3 3" />

<ScrollViewer x:Name="PART_ContentHost"

HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"

VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"

Background="Transparent"

BorderThickness="0"

Foreground="{TemplateBinding Foreground}"

Padding="{TemplateBinding Padding}">

<telerik:StyleManager.Theme>

<telerik:Office_BlackTheme />

</telerik:StyleManager.Theme>

</ScrollViewer>

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

</TextBox.Style>

</TextBox>

</Grid>

<telerik:RadToggleButton x:Name="ToggleCollapseButton"

Grid.Column="1"

Width="18"

MinHeight="18"

Margin="3"

VerticalAlignment="Center"

Focusable="False"

InnerCornerRadius="0"

IsBackgroundVisible="False"

IsTabStop="False"

Padding="3">

<Primitives:ToggleButtonExtensions.CheckedContent>

<Path Data="M0,0L1,0 4,3 7,0 8,0 4,4z" Fill="Black" />

</Primitives:ToggleButtonExtensions.CheckedContent>

<Primitives:ToggleButtonExtensions.UncheckedContent>

<Path Data="M4,0L8,4 7,4 4,1 1,4 0,4z" Fill="Black" />

</Primitives:ToggleButtonExtensions.UncheckedContent>

<telerik:RadToggleButton.Visibility>

<Binding Path="IsCollapsible" RelativeSource="{RelativeSource TemplatedParent}">

<Binding.Converter>

<telerik:BooleanToVisibilityConverter />

</Binding.Converter>

</Binding>

</telerik:RadToggleButton.Visibility>

<Path Data="M4,0L8,4 7,4 4,1 1,4 0,4z" Fill="Black" />

</telerik:RadToggleButton>

</Grid>

<ContentControl x:Name="CollapsedContent"

Grid.Row="1"

HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"

VerticalAlignment="{TemplateBinding VerticalContentAlignment}"

Content="{TemplateBinding CollapsedContent}"

ContentTemplate="{TemplateBinding CollapsedContentTemplate}"

Foreground="{TemplateBinding Foreground}">

<ContentControl.Visibility>

<Binding Path="IsCollapsed" RelativeSource="{RelativeSource TemplatedParent}">

<Binding.Converter>

<telerik:BooleanToVisibilityConverter />

</Binding.Converter>

</Binding>

</ContentControl.Visibility>

</ContentControl>

<Border x:Name="ActiveSelectedBorder"

BorderBrush="#7FC92931"

BorderThickness="2"

Grid.RowSpan="2"

Margin="-2"

CornerRadius="8"

Visibility="Collapsed" />

<Primitives:ConnectorsControl x:Name="ConnectorsControl"

Grid.RowSpan="3"

ItemContainerStyle="{TemplateBinding ConnectorStyle}"

ItemsSource="{TemplateBinding Connectors}"

Visibility="Collapsed" />

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

<Style TargetType="local:PropertyContainer">

<Setter Property="IsCollapsible" Value="True" />

<Setter Property="MinHeight" Value="24" />

<Setter Property="UseDefaultConnectors" Value="False" />

<Setter Property="Width" Value="Auto" />

<Setter Property="Height" Value="Auto" />

<Setter Property="MinWidth" Value="100" />

<Setter Property="IsResizingEnabled" Value="False" />

<Setter Property="IsRotationEnabled" Value="False" />

<Setter Property="IsDraggingEnabled" Value="False" />

<Setter Property="HorizontalContentAlignment" Value="Left" />

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="local:PropertyContainer">

<Grid x:Name="RootPanel" Margin="1 0">

<Grid.RowDefinitions>

<RowDefinition Height="Auto" />

<RowDefinition Height="*" />

<RowDefinition Height="Auto" />

</Grid.RowDefinitions>

<VisualStateManager.VisualStateGroups>

<VisualStateGroup x:Name="MouseStates">

<VisualState x:Name="Normal" />

<VisualState x:Name="MouseOver" />

</VisualStateGroup>

<VisualStateGroup x:Name="CollapsedStates">

<VisualState x:Name="Expanded" />

<VisualState x:Name="Collapsed" />

</VisualStateGroup>

<VisualStateGroup x:Name="ActiveConectionStates">

<VisualState x:Name="NormalActiveConnectionState" />

<VisualState x:Name="ActiveConnectionInsideShape" />

</VisualStateGroup>

<VisualStateGroup x:Name="ConnectorsAdornerVisibilityStates">

<VisualState x:Name="ConnectorsAdornerCollapsed" />

<VisualState x:Name="ConnectorsAdornerVisible" />

</VisualStateGroup>

<VisualStateGroup x:Name="SelectionStates">

<VisualState x:Name="Selected" />

<VisualState x:Name="SelectedInGroup" />

<VisualState x:Name="Unselected" />

<VisualState x:Name="SelectedAsGroup" />

</VisualStateGroup>

<VisualStateGroup x:Name="EditMode">

<VisualState x:Name="NormalMode" />

<VisualState x:Name="NormalEditMode" />

<VisualState x:Name="TextBoxEditMode" />

</VisualStateGroup>

<VisualStateGroup x:Name="DropStates">

<VisualState x:Name="DropNormal" />

<VisualState x:Name="DropComplete" />

<VisualState x:Name="DragOver" />

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

<Grid x:Name="NormalContent"

Height="{x:Static local:Constants.RowHeight}"

Background="LightGray">

<Grid.ColumnDefinitions>

<ColumnDefinition Width="Auto" />

<ColumnDefinition />

</Grid.ColumnDefinitions>

<telerik:RadToggleButton x:Name="ToggleCollapseButton"

Width="18"

MinHeight="18"

Margin="3"

VerticalAlignment="Center"

Focusable="False"

InnerCornerRadius="0"

IsBackgroundVisible="False"

IsTabStop="False"

Padding="3">

<Primitives:ToggleButtonExtensions.CheckedContent>

<Path Data="M0,0L1,0 4,3 7,0 8,0 4,4z" Fill="Black" />

</Primitives:ToggleButtonExtensions.CheckedContent>

<Primitives:ToggleButtonExtensions.UncheckedContent>

<Path Data="M4,0L8,4 7,4 4,1 1,4 0,4z" Fill="Black" />

</Primitives:ToggleButtonExtensions.UncheckedContent>

<telerik:RadToggleButton.Visibility>

<Binding Path="IsCollapsible" RelativeSource="{RelativeSource TemplatedParent}">

<Binding.Converter>

<telerik:BooleanToVisibilityConverter />

</Binding.Converter>

</Binding>

</telerik:RadToggleButton.Visibility>

<Path Data="M4,0L8,4 7,4 4,1 1,4 0,4z" Fill="Black" />

</telerik:RadToggleButton>

<TextBlock Grid.Column="1"

Margin="{TemplateBinding Padding}"

HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"

VerticalAlignment="{TemplateBinding VerticalContentAlignment}"

FontSize="12"

FontWeight="Bold"

Text="{TemplateBinding Content}" />

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

<Style TargetType="local:PropertyShape">

<Setter Property="Height" Value="{x:Static local:Constants.RowHeight}" />

<Setter Property="VerticalAlignment" Value="Center" />

<Setter Property="IsEditable" Value="True" />

<Setter Property="IsInEditMode" Value="True" />

<Setter Property="MinWidth" Value="100" />

<Setter Property="IsDraggingEnabled" Value="False" />

<Setter Property="Width" Value="Auto" />

<Setter Property="IsSelected" Value="True" />

<Setter Property="Padding" Value="10 0" />

<Setter Property="IsResizingEnabled" Value="False" />

<Setter Property="IsRotationEnabled" Value="False" />

<Setter Property="VerticalContentAlignment" Value="Center" />

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="local:PropertyShape">

<Grid Margin="1 0" Background="White">

<VisualStateManager.VisualStateGroups>

<VisualStateGroup x:Name="MouseStates">

<VisualState x:Name="Normal" />

<VisualState x:Name="MouseOver" />

</VisualStateGroup>

<VisualStateGroup x:Name="ActiveConectionStates">

<VisualState x:Name="NormalActiveConnectionState" />

<VisualState x:Name="ActiveConnectionInsideShape">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0"

Storyboard.TargetName="ActiveSelectedBorder"

Storyboard.TargetProperty="Visibility">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Visibility>Visible</Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

<VisualStateGroup x:Name="ConnectorsAdornerVisibilityStates">

<VisualState x:Name="ConnectorsAdornerCollapsed" />

<VisualState x:Name="ConnectorsAdornerVisible">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0"

Storyboard.TargetName="ConnectorsControl"

Storyboard.TargetProperty="Visibility">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Visibility>Visible</Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

<VisualStateGroup x:Name="SelectionStates">

<VisualState x:Name="Selected" />

<VisualState x:Name="SelectedInGroup" />

<VisualState x:Name="Unselected" />

<VisualState x:Name="SelectedAsGroup" />

</VisualStateGroup>

<VisualStateGroup x:Name="EditMode">

<VisualState x:Name="NormalMode" />

<VisualState x:Name="NormalEditMode" />

<VisualState x:Name="TextBoxEditMode">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0"

Storyboard.TargetName="NormalContent"

Storyboard.TargetProperty="Visibility">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Visibility>Collapsed</Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Duration="0"

Storyboard.TargetName="EditTextBox"

Storyboard.TargetProperty="Visibility">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Visibility>Visible</Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

<Grid>

<Border x:Name="ActiveSelectedBorder"

BorderBrush="#7FC92931"

BorderThickness="2"

Visibility="Collapsed" />

<TextBlock x:Name="NormalContent"

Margin="{TemplateBinding Padding}"

HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"

VerticalAlignment="{TemplateBinding VerticalContentAlignment}"

Text="{TemplateBinding Content}" />

<Primitives:ConnectorsControl x:Name="ConnectorsControl"

ItemContainerStyle="{TemplateBinding ConnectorStyle}"

ItemsSource="{TemplateBinding Connectors}"

Visibility="Collapsed" />

</Grid>

<Grid x:Name="PART_RotationalPart">

<TextBox x:Name="EditTextBox"

Margin="{TemplateBinding Padding}"

VerticalAlignment="{TemplateBinding VerticalContentAlignment}"

Visibility="Collapsed" />

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

<selectors:NodeStyleSelector x:Key="CustomShapeStyleSelector"

BaseModelStyle="{StaticResource ClassShape}"/>

answered on 09 Oct 2018, 10:01 AM

Hello Sami,

The SelectStyle() method will be fired for both RadDiagramShape objects (in your case the PropertyShape) and RadDiagramContainerShape (the ClassShape). Please make sure that based on the shape passed in SelectStyle() the method returns different style (targeting ProeprtyShape or ClassShape). If this doesn't help I would ask you send me some runnable code that I can try on my side and see what happens.

Regards,
Martin Ivanov
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.

answered on 11 Oct 2018, 08:35 AM

WpfApp5.zip

Hello Sami,

The connectors of the custom shape are missing because the custom template of the shape doesn't now include them. In order to achieve your requirement you will need to add the ConnectorsControl in the template and implement logic that shows it when the shape is selected. You can do that as in the original template of the shape - using visual states or data triggers. I've prepared a small example showing this approach. I hope it helps.

Additionally, I am pasting the modified shape style (based on the code from the documentation).

<Style TargetType="local:CustomShape">

<Setter Property="BorderThickness" Value="4" />

<Setter Property="BorderBrush" Value="#6C666666" />

<Setter Property="Width" Value="355" />

<Setter Property="Height" Value="160" />

<Setter Property="HorizontalAlignment" Value="Center" />

<Setter Property="Margin" Value="0" />

<Setter Property="Background">

<Setter.Value>

<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">

<GradientStop Color="White" />

<GradientStop Offset="1" Color="#FFEDF4FF" />

</LinearGradientBrush>

</Setter.Value>

</Setter>

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="local:CustomShape">

<Grid>

<VisualStateManager.VisualStateGroups>

<VisualStateGroup x:Name="ConnectorsAdornerVisibilityStates">

<VisualState x:Name="ConnectorsAdornerCollapsed" />

<VisualState x:Name="ConnectorsAdornerVisible">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0"

Storyboard.TargetName="ConnectorsControl"

Storyboard.TargetProperty="Visibility">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Visibility>Visible</Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup

</VisualStateManager.VisualStateGroups>

<Border Margin="{TemplateBinding Margin}"

HorizontalAlignment="{TemplateBinding HorizontalAlignment}"

BorderBrush="{TemplateBinding BorderBrush}"

BorderThickness="{TemplateBinding BorderThickness}"

CornerRadius="3">

<Border Background="{TemplateBinding Background}"

BorderBrush="#E6FBFDFF"

BorderThickness="1"

CornerRadius="1">

<StackPanel>

<Grid Margin="40 5" VerticalAlignment="Center">

<TextBlock FontFamily="Segoe UI"

FontSize="14"

Text="MIX RADIO" />

<TextBlock HorizontalAlignment="Right"

FontFamily="Segoe UI"

FontSize="14"

Text="108.8 FM" />

</Grid>

<Border Height="90"

BorderBrush="#6C666666"

BorderThickness="0 1">

<Border.Background>

<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">

<GradientStop Offset="0" Color="#65FFFFFF" />

<GradientStop Offset="0.965" Color="#66E7E5E5" />

<GradientStop Offset="0.609" Color="#9DD9D9D9" />

<GradientStop Offset="0.826" Color="#A5D9D9D9" />

</LinearGradientBrush>

</Border.Background>

<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">

<TextBlock x:Name="BufferingPercentageLabel"

Margin="0 0 0 15"

HorizontalAlignment="Center"

FontFamily="Segoe UI"

FontSize="13">

<TextBlock.Foreground>

<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">

<GradientStop Offset="1" Color="Black" />

<GradientStop Color="#FF727272" />

</LinearGradientBrush>

</TextBlock.Foreground>

</TextBlock>

<telerik:RadProgressBar x:Name="BufferingProgressBar"

Width="270"

Height="30"

Maximum="100"

Minimum="0"

Value="60" />

</StackPanel>

</Border>

<Border Padding="0 5">

<Border.Background>

<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">

<GradientStop Offset="0.07" Color="#7FFFFFFF" />

<GradientStop Offset="0.965" Color="#7EE7E5E5" />

<GradientStop Offset="0.61" Color="#FFD9D9D9" />

<GradientStop Offset="0.826" Color="#FFD9D9D9" />

</LinearGradientBrush>

</Border.Background>

<StackPanel HorizontalAlignment="Center" Orientation="Horizontal">

<TextBlock Margin="0 0 0 15"

HorizontalAlignment="Center"

VerticalAlignment="Center"

FontFamily="Segoe UI"

FontSize="13"

Text="VOTE">

<TextBlock.Foreground>

<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">

<GradientStop Offset="1" Color="Black" />

<GradientStop Color="#FF727272" />

</LinearGradientBrush>

</TextBlock.Foreground>

</TextBlock>

<telerik:RadRating x:Name="Rating"

Margin="15 0"

HorizontalAlignment="Center"

Value="3" />

</StackPanel>

</Border>

</StackPanel>

</Border>

<primitives:ConnectorsControl x:Name="ConnectorsControl" ItemsSource="{TemplateBinding Connectors}" Visibility="Collapsed" ItemContainerStyle="{TemplateBinding ConnectorStyle}"/>

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

Regards,
Martin Ivanov
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.

answered on 12 Oct 2018, 12:31 PM

Just one quick question still. How do I link the custom shape into my Style Selector? I tried following:

<Style x:Key="DataSourceShape" TargetType="local:CustomShape">

<Setter Property="BorderThickness" Value="4" />

<Setter Property="BorderBrush" Value="#6C666666" />

<Setter Property="Width" Value="200" />

etc...

</Style>

<basemodel:NodeStyleSelector x:Key="CustomShapeStyleSelector">

<basemodel:NodeStyleSelector.BaseModelStyle>

<Style TargetType="local:CustomShape">

</Style>

</basemodel:NodeStyleSelector.BaseModelStyle>

</basemodel:NodeStyleSelector>

answered on 15 Oct 2018, 06:50 AM

Hello Sami,

You can assign the style using the StaticResource keyword.

<Style x:Key="DataSourceShape" TargetType="local:CustomShape">

<Setter Property="BorderThickness" Value="4" />

<Setter Property="BorderBrush" Value="#6C666666" />

<Setter Property="Width" Value="200" />

etc...

</Style>

<basemodel:NodeStyleSelector x:Key="CustomShapeStyleSelector" BaseModelStyle="{StaticResource DataSourceShape}" />

Regards,
Martin Ivanov
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.

answered on 15 Oct 2018, 06:50 PM

Hello Martin,

Almost there.. With following declaration I was able to get the connector "dots" visible around the shape. However, when I try to drag a line from the dot, the connector line is not visible. My guess is that the problem is related to the ConnectorsControl definition. Do you have any idea what could go wrong?

Btw. I had to change the TargetType to telerik:RadDiagramShape, as otherwise I get an error that my CustomShape is not type of RadDiagramShape, when I add it to the diagram (see my earlier comment about the StyleSelector)... I'm not sure if using RadDiagramShape has any downsides so I'm sticking with it for now.

<Style x:Key="DataSourceShape" TargetType="telerik:RadDiagramShape">

<Setter Property="BorderThickness" Value="4" />

<Setter Property="BorderBrush" Value="#6C666666" />

<Setter Property="Width" Value="200" />

<Setter Property="Height" Value="160" />

<Setter Property="HorizontalAlignment" Value="Center" />

<Setter Property="Margin" Value="0" />

<Setter Property="IsResizingEnabled" Value="False" />

<Setter Property="Background">

<Setter.Value>

<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">

<GradientStop Color="White" />

<GradientStop Offset="1" Color="#FFEDF4FF" />

</LinearGradientBrush>

</Setter.Value>

</Setter>

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="telerik:RadDiagramShape">

<Grid>

<VisualStateManager.VisualStateGroups>

<VisualStateGroup x:Name="ConnectorsAdornerVisibilityStates">

<VisualState x:Name="ConnectorsAdornerCollapsed"/>

<VisualState x:Name="ConnectorsAdornerVisible">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="ConnectorsControl" Storyboard.TargetProperty="Visibility">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Visibility>Visible</Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

<Border Margin="{TemplateBinding Margin}"

HorizontalAlignment="{TemplateBinding HorizontalAlignment}"

BorderBrush="{TemplateBinding BorderBrush}"

BorderThickness="{TemplateBinding BorderThickness}"

CornerRadius="3">

<Border Background="{TemplateBinding Background}"

BorderBrush="#E6FBFDFF"

BorderThickness="1"

CornerRadius="1">

<StackPanel>

<Grid Margin="40 5" VerticalAlignment="Center">

<TextBlock FontFamily="Segoe UI"

FontSize="14"

Text="{Binding Name}" />

</Grid>

<Border

BorderBrush="#6C666666"

BorderThickness="0 1">

<Border.Background>

<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">

<GradientStop Offset="0" Color="#65FFFFFF" />

<GradientStop Offset="0.965" Color="#66E7E5E5" />

<GradientStop Offset="0.609" Color="#9DD9D9D9" />

<GradientStop Offset="0.826" Color="#A5D9D9D9" />

</LinearGradientBrush>

</Border.Background>

<StackPanel HorizontalAlignment="Left" VerticalAlignment="Center" Margin="0 7 0 10">

<ItemsControl ItemsSource="{Binding Properties}">

<ItemsControl.ItemTemplate>

<DataTemplate>

<TextBlock Margin="5 0 0 5" HorizontalAlignment="Left"

FontFamily="Segoe UI" FontSize="13" Text="{Binding}">

<TextBlock.Foreground>

<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">

<GradientStop Offset="1" Color="Black" />

<GradientStop Color="#FF727272" />

</LinearGradientBrush>

</TextBlock.Foreground>

</TextBlock>

</DataTemplate>

</ItemsControl.ItemTemplate>

</ItemsControl>

</StackPanel>

</Border>

<Border Padding="0 10">

<Border.Background>

<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">

<GradientStop Offset="0.07" Color="#7FFFFFFF" />

<GradientStop Offset="0.965" Color="#7EE7E5E5" />

<GradientStop Offset="0.61" Color="#FFD9D9D9" />

<GradientStop Offset="0.826" Color="#FFD9D9D9" />

</LinearGradientBrush>

</Border.Background>

<StackPanel HorizontalAlignment="Left" Orientation="Horizontal">

<ItemsControl ItemsSource="{Binding Outputs}">

<ItemsControl.ItemTemplate>

<DataTemplate>

<TextBlock Margin="5 0 0 5" HorizontalAlignment="Left"

FontFamily="Segoe UI" FontSize="13" Text="{Binding}">

<TextBlock.Foreground>

<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">

<GradientStop Offset="1" Color="Black" />

<GradientStop Color="#FF727272" />

</LinearGradientBrush>

</TextBlock.Foreground>

</TextBlock>

</DataTemplate>

</ItemsControl.ItemTemplate>

</ItemsControl>

</StackPanel>

</Border>

</StackPanel>

</Border>

<Primitives:ConnectorsControl x:Name="ConnectorsControl" ItemsSource="{TemplateBinding Connectors}" Visibility="Collapsed" ItemContainerStyle="{TemplateBinding ConnectorStyle}"/>

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

answered on 16 Oct 2018, 07:11 AM

Hello Sami,

I've tested your Style with my last project but the connection is shown properly when you start dragging from a shape's connector. If you use NoXaml dlls this could be the core of this issue. Please check the Xaml vs. NoXaml and Styling the Controls help articles.

As for the error I can't tell why this happens without seeing your complete set up. What I could suggest you is to share code snippets showing the diagram set up, the custom shape, the style selector and the population with shapes. This way I can assemble a runnable project and test it on my side. Another thing that you can try is to open a support ticket from your telerik.com account. There you can attach a runnable project showing the issues. Note that if you download a trial version of UI for WPF you get also the support service during the trial period.

Regards,
Martin Ivanov
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.

answered on 16 Oct 2018, 07:36 PM

Hi Martin,

Thanks for your help. I'll try to give snippets regarding my code, hopefully you can reproduce the error. Btw. I checked and I'm using the standard DLL's (not the no XAML ones). All in all, it is bit weird that I'm not able to get the line connectors. Anyhow here are the snippets regarding the CustomShape version which gives the type conversion error when the shape is added to the diagram. I add a test model to the diagram using the method in MainWindow.

ModelSource:

public class ModelSource : IGraphSource

{

public ObservableCollection<BaseModel> Blocks { get; private set; }

public ObservableCollection<Connection> Connections { get; private set; }

public ModelSource()

{

this.Blocks = new ObservableCollection<BaseModel>();

this.Connections = new ObservableCollection<Connection>();

}

IEnumerable<ILink> IGraphSource.Links

{

get { return this.Connections; }

}

IEnumerable IGraphSource.Items

{

get { return this.Blocks; }

}

NodeStyleSelector:

public class NodeStyleSelector : StyleSelector

{

public Style BaseModelStyle { get; set; }

public override Style SelectStyle(object item, DependencyObject container)

{

if (item is BaseModel)

return this.BaseModelStyle;

return this.BaseModelStyle; // Testing only with the BaseModelStyle

}

BaseModel

public class BaseModel : NodeViewModelBase

{

public string Name { get; set; }

public List<BaseProperty> Inputs { get; set; }

public List<BaseProperty> Outputs { get; set; }

public List<BaseProperty> Properties { get; set; }

public List<Connection> Connections { get; set; }

public BaseModel()

{

Properties = new List<BaseProperty>();

Connections = new List<Connection>();

Inputs = new List<BaseProperty>();

Outputs = new List<BaseProperty>();

}

public void AddInput(BaseProperty input)

{

Inputs.Add(input);

}

public void AddOutput(BaseProperty output)

{

Outputs.Add(output);

}

public void AddProperty(BaseProperty prop)

{

Properties.Add(prop);

}

public void AddConnection(Connection conn)

{

Connections.Add(conn);

}

MainWindow.xaml

<Window

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:local="clr-namespace:BasicUiTest"

xmlns:basemodel="clr-namespace:BasicUiTest.model"

xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"

xmlns:Primitives="clr-namespace:Telerik.Windows.Controls.Diagrams.Primitives;assembly=Telerik.Windows.Controls.Diagrams"

x:Class="BasicUiTest.MainWindow"

Title="MainWindow" Height="500" Width="840">

<Window.Resources>

<Style x:Key="DataSourceShape" TargetType="local:CustomShape">

<Setter Property="BorderThickness" Value="4" />

<Setter Property="BorderBrush" Value="#6C666666" />

<Setter Property="Width" Value="200" />

<Setter Property="Height" Value="160" />

<Setter Property="HorizontalAlignment" Value="Center" />

<Setter Property="Margin" Value="0" />

<Setter Property="IsResizingEnabled" Value="False" />

<Setter Property="Background">

<Setter.Value>

<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">

<GradientStop Color="White" />

<GradientStop Offset="1" Color="#FFEDF4FF" />

</LinearGradientBrush>

</Setter.Value>

</Setter>

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="local:CustomShape">

<Grid>

<VisualStateManager.VisualStateGroups>

<VisualStateGroup x:Name="ConnectorsAdornerVisibilityStates">

<VisualState x:Name="ConnectorsAdornerCollapsed"/>

<VisualState x:Name="ConnectorsAdornerVisible">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="ConnectorsControl" Storyboard.TargetProperty="Visibility">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Visibility>Visible</Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

<Border Margin="{TemplateBinding Margin}"

HorizontalAlignment="{TemplateBinding HorizontalAlignment}"

BorderBrush="{TemplateBinding BorderBrush}"

BorderThickness="{TemplateBinding BorderThickness}"

CornerRadius="3">

<Border Background="{TemplateBinding Background}"

BorderBrush="#E6FBFDFF"

BorderThickness="1"

CornerRadius="1">

<StackPanel>

<Grid Margin="40 5" VerticalAlignment="Center">

<TextBlock FontFamily="Segoe UI"

FontSize="14"

Text="{Binding Name}" />

</Grid>

<Border

BorderBrush="#6C666666"

BorderThickness="0 1">

<Border.Background>

<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">

<GradientStop Offset="0" Color="#65FFFFFF" />

<GradientStop Offset="0.965" Color="#66E7E5E5" />

<GradientStop Offset="0.609" Color="#9DD9D9D9" />

<GradientStop Offset="0.826" Color="#A5D9D9D9" />

</LinearGradientBrush>

</Border.Background>

<StackPanel HorizontalAlignment="Left" VerticalAlignment="Center" Margin="0 7 0 10">

<ItemsControl ItemsSource="{Binding Properties}">

<ItemsControl.ItemTemplate>

<DataTemplate>

<TextBlock Margin="5 0 0 5" HorizontalAlignment="Left"

FontFamily="Segoe UI" FontSize="13" Text="{Binding}">

<TextBlock.Foreground>

<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">

<GradientStop Offset="1" Color="Black" />

<GradientStop Color="#FF727272" />

</LinearGradientBrush>

</TextBlock.Foreground>

</TextBlock>

</DataTemplate>

</ItemsControl.ItemTemplate>

</ItemsControl>

</StackPanel>

</Border>

<Border Padding="0 10">

<Border.Background>

<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">

<GradientStop Offset="0.07" Color="#7FFFFFFF" />

<GradientStop Offset="0.965" Color="#7EE7E5E5" />

<GradientStop Offset="0.61" Color="#FFD9D9D9" />

<GradientStop Offset="0.826" Color="#FFD9D9D9" />

</LinearGradientBrush>

</Border.Background>

<StackPanel HorizontalAlignment="Left" Orientation="Horizontal">

<ItemsControl ItemsSource="{Binding Outputs}">

<ItemsControl.ItemTemplate>

<DataTemplate>

<TextBlock Margin="5 0 0 5" HorizontalAlignment="Left"

FontFamily="Segoe UI" FontSize="13" Text="{Binding}">

<TextBlock.Foreground>

<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">

<GradientStop Offset="1" Color="Black" />

<GradientStop Color="#FF727272" />

</LinearGradientBrush>

</TextBlock.Foreground>

</TextBlock>

</DataTemplate>

</ItemsControl.ItemTemplate>

</ItemsControl>

</StackPanel>

</Border>

</StackPanel>

</Border>

<Primitives:ConnectorsControl x:Name="ConnectorsControl" ItemsSource="{TemplateBinding Connectors}" Visibility="Collapsed" ItemContainerStyle="{TemplateBinding ConnectorStyle}"/>

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

<basemodel:NodeStyleSelector x:Key="CustomShapeStyleSelector" BaseModelStyle="{StaticResource DataSourceShape}" />

</Window.Resources>

<Grid>

<telerik:RadRibbonView xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

ApplicationName="Cloudberry"

Title="Document 1">

<telerik:RadRibbonView.QuickAccessToolBar>

<telerik:QuickAccessToolBar>

<telerik:RadRibbonButton telerik:RadToolTipService.ToolTipContent="Save"/>

<telerik:RadRibbonButton telerik:RadToolTipService.ToolTipContent="Undo"/>

<telerik:RadRibbonButton telerik:RadToolTipService.ToolTipContent="Print"/>

</telerik:QuickAccessToolBar>

</telerik:RadRibbonView.QuickAccessToolBar>

<telerik:RadRibbonView.Backstage>

<telerik:RadRibbonBackstage>

<telerik:RadRibbonBackstageItem Header="Save" IsSelectable="False" />

<telerik:RadRibbonBackstageItem Header="Open" IsSelectable="False" />

<telerik:RadRibbonBackstageItem Header="Recent">

<StackPanel Margin="10">

<TextBlock Text="Recent files:" Margin="0 0 0 5" />

<telerik:RadListBox>

<telerik:RadListBoxItem Content="Document 1" />

<telerik:RadListBoxItem Content="Document 2" />

<telerik:RadListBoxItem Content="Document 3" />

<telerik:RadListBoxItem Content="Document 4" />

</telerik:RadListBox>

</StackPanel>

</telerik:RadRibbonBackstageItem>

</telerik:RadRibbonBackstage>

</telerik:RadRibbonView.Backstage>

<telerik:RadRibbonTab Header="Home">

<telerik:RadRibbonGroup Header="Clipboard">

<telerik:RadRibbonButton Text="Copy" />

</telerik:RadRibbonGroup>

<telerik:RadRibbonGroup Header="Font"/>

</telerik:RadRibbonTab>

<telerik:RadRibbonTab Header="Model">

<telerik:RadRibbonGroup Header="Datasources">

<telerik:RadRibbonDropDownButton Text="Image" LargeImage="icons/camera-l.png" Size="Large">

<telerik:RadRibbonDropDownButton.DropDownContent>

<telerik:RadContextMenu BorderThickness="0">

<telerik:RadMenuItem Header="Installed Camera...">

<telerik:RadMenuItem.Icon>

<Image Source="Icons/16/paste.png" />

</telerik:RadMenuItem.Icon>

</telerik:RadMenuItem>

<telerik:RadMenuItem Header="Network Source...">

<telerik:RadMenuItem.Icon>

<Image Source="Icons/16/pastespecial.png" />

</telerik:RadMenuItem.Icon>

</telerik:RadMenuItem>

<telerik:RadMenuItem Header="Image Database">

<telerik:RadMenuItem.Icon>

<Image Source="Icons/16/pastespecial.png" />

</telerik:RadMenuItem.Icon>

<telerik:RadMenuItem Header="ImageNet Database" />

<telerik:RadMenuItem Header="MNIST Database" Click="AddMNistDatabase" />

</telerik:RadMenuItem>

</telerik:RadContextMenu>

</telerik:RadRibbonDropDownButton.DropDownContent>

</telerik:RadRibbonDropDownButton>

</telerik:RadRibbonGroup>

</telerik:RadRibbonView>

<Grid x:Name="diagramRootPanel">

<Grid.Resources>

<telerik:HierarchicalGalleryItemsCollection x:Key="ToolboxSource"/>

<telerik:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />

</Grid.Resources>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="*"/>

<ColumnDefinition Width="Auto"/>

</Grid.ColumnDefinitions>

<Grid x:Name="diagramHostPanel" Grid.Column="0" Margin="10,162,0.4,-0.2">

<Grid.RowDefinitions>

<RowDefinition Height="20"/>

<RowDefinition Height="*"/>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="20"/>

<ColumnDefinition Width="*"/>

</Grid.ColumnDefinitions>

<telerik:RadDiagram x:Name="diagram" SelectionMode="Extended" Grid.Column="1" Grid.Row="1"

ShapeStyleSelector="{StaticResource CustomShapeStyleSelector}">

<Primitives:ItemInformationAdorner.AdditionalContent>

<telerik:SettingsPane Diagram="{Binding ElementName=diagram}"/>

</Primitives:ItemInformationAdorner.AdditionalContent>

</telerik:RadDiagram>

<telerik:RadDiagramRuler Diagram="{Binding ElementName=diagram}" Placement="Left" Grid.Row="1"/>

</Grid>

</Window>

MainWindow.xaml.cs

public partial class MainWindow : Window

{

public MainWindow()

{

InitializeComponent();

this.diagram.GraphSource = new ModelSource();

}

private void AddMNistDatabase(object sender, Telerik.Windows.RadRoutedEventArgs e)

{

BaseModel mnistDatabase = createModel();

ModelSource source = (ModelSource) this.diagram.GraphSource;

source.Blocks.Add(mnistDatabase);

}

private BaseModel createModel()

{

BaseModel model = new BaseModel();

model.Name = "MODEL";

NumericalProperty width = new NumericalProperty("A", 28);

NumericalProperty height = new NumericalProperty("B", 28);

BooleanProperty normalize = new BooleanProperty("C", true);

model.AddProperty(width);

model.AddProperty(height);

model.AddProperty(normalize);

StringProperty output = new StringProperty("Output", "Double");

model.AddOutput(output);

return model;

}

Accepted

answered on 22 Oct 2018, 11:22 AM

WpfApp11.zip

Hello Sami,

I've prepare a small example and reproduced the error which tells that the CustomShape is not type of RadDiagramShape. This happens because in order to use the custom shape in a data binding scenario you will need also to create a custom diagram and override its IsItemItsOwnShapeContainerOverride and GetShapeContainerForItemOverride methods.

public class CustomDiagram : RadDiagram

{

protected override bool IsItemItsOwnShapeContainerOverride(object item)

{

return item is CustomShape;

}

protected override Telerik.Windows.Diagrams.Core.IShape GetShapeContainerForItemOverride(object item)

{

return new CustomShape();

}

Then replace the RadDiagram definition in XAML with the CustomDiagram class.

<local:CustomDiagram />

As for the missing connection, this doesn't work because the RadDiagram doesn't support the IGraphSource interface directly. The control relies on that at least the IObservableGraphSource interface is implemented by the graph source. To resolve this, implement the IObservableGraphSource interface on your side. Actually, I would recommend you to work with one of the the higher implementations of the interface - ObservableGraphSourceBase or SerializableGraphSourceBase.

I've attached a small example showing those approaches. I hope it helps.

Regards,
Martin Ivanov
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Setting ShapeStyle to RadDiagram

15 Answers, 1 is accepted