how to connect Custom Shapes in run time ?

4 posts, 1 answers
  1. Gaurav
    Gaurav avatar
    35 posts
    Member since:
    Nov 2012

    Posted 24 Dec 2012 Link to this post

    Hi 
    I read This link to create and and use my own shapes in RADDIAGRAM it,s working fine , except the fact that i am not able to connect that shape to any other shape in run time ... Is that default property that custom shapes can not have connectors or i have to some extra work to achieve that ??
  2. Answer
    Francois
    Admin
    Francois avatar
    10 posts

    Posted 26 Dec 2012 Link to this post

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

  3. UI for WPF is Visual Studio 2017 Ready
  4. Brian
    Brian avatar
    1 posts
    Member since:
    Oct 2012

    Posted 01 Jan in reply to Francois Link to this post

    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)

  5. Martin
    Admin
    Martin avatar
    1099 posts

    Posted 04 Jan Link to this post

    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
Back to Top