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

how to connect Custom Shapes in run time ?

3 Answers 158 Views

Diagram

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

3 Answers, 1 is accepted

Accepted

answered on 26 Dec 2012, 06:02 AM

Hi,

the default control template of a shape contains much more than what the 'how to' article displays. You can fetch this default template through Expression Blend or straight from the source code. In any case, in order to display the connectors you need the ConnectorsControl and some switches in the visual state manager like so:

<Style TargetType="local:CustomShape">

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

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

<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="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">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0"

Storyboard.TargetName="SelectedBorder"

Storyboard.TargetProperty="Visibility">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Visibility>Visible</Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<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="NormalContent"

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="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>

<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>

<Controls: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>

The samples we deliver with every release also amply demonstrate the way you should create custom shape, see this article as well.

Regards,
Francois
the Telerik team

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

answered on 01 Jan 2016, 01:28 PM

Hi, I was having the same problem with the connector on a custom shape so I updated my code with what you have above. I can connect from a custom shape to a regular shape, but when the custom shape is the target of the connection I get a runtime error: TargetInvocationException:

Inner Exception: {"'ActiveSelectedBorder' name cannot be found in the name scope of 'System.Windows.Controls.Grid'."}

Stack Trace: at System.Windows.Media.Animation.Storyboard.ResolveTargetName(String targetName, INameScope nameScope, DependencyObject element)
at System.Windows.Media.Animation.Storyboard.ClockTreeWalkRecursive(Clock currentClock, DependencyObject containingObject, INameScope nameScope, DependencyObject parentObject, String parentObjectName, PropertyPath parentPropertyPath, HandoffBehavior handoffBehavior, HybridDictionary clockMappings, Int64 layer)
at System.Windows.Media.Animation.Storyboard.ClockTreeWalkRecursive(Clock currentClock, DependencyObject containingObject, INameScope nameScope, DependencyObject parentObject, String parentObjectName, PropertyPath parentPropertyPath, HandoffBehavior handoffBehavior, HybridDictionary clockMappings, Int64 layer)
at System.Windows.Media.Animation.Storyboard.BeginCommon(DependencyObject containingObject, INameScope nameScope, HandoffBehavior handoffBehavior, Boolean isControllable, Int64 layer)
at System.Windows.VisualStateGroup.StartNewThenStopOld(FrameworkElement element, Storyboard[] newStoryboards)
at System.Windows.VisualStateManager.GoToStateInternal(FrameworkElement control, FrameworkElement stateGroupsRoot, VisualStateGroup group, VisualState state, Boolean useTransitions)
at System.Windows.VisualStateManager.GoToStateCommon(FrameworkElement control, FrameworkElement stateGroupsRoot, String stateName, Boolean useTransitions)
at System.Windows.VisualStateManager.GoToState(FrameworkElement control, String stateName, Boolean useTransitions)
at Telerik.Windows.Controls.Diagrams.RadDiagramShapeBase.UpdateVisualStates()
at Telerik.Windows.Controls.Diagrams.RadDiagramShapeBase.OnConnectorActivationChanged(Object sender, RadRoutedEventArgs e)

answered on 04 Jan 2016, 08:26 AM

Hi Brian,

The reported exception occurs because there is missing x:Name in the template. One of the Storyboard animations is looking for an element with x:Name set to "ActiveSelectedBorder", but there is no such name in the template's scope.

In order to resolve this I recommend you to extract the Style of the shape using Visual Studio, Microsoft Blend or our theme resource files. This way you will ensure that the Style is up to date with the version of UI for WPF which you are using.

Regards,
Martin
Telerik

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items