Losing ConnectorManipulators when setting ShapeStyle

8 posts, 1 answers
  1. Darlene
    Darlene avatar
    13 posts
    Member since:
    Jan 2012

    Posted 03 Aug 2012 Link to this post

    Hello,

    When I set the ShapeStyle property of a diagram, I lose the Connectors that appear on the edges that allow me to draw/create links.  Why is this and what can I do to bring them back?
    <telerik:RadDiagram ShapeStyle="{StaticResource RadDiagramShapeStyle1}">
    <Rect X="10" Y="20" Width="30" Height="40" />
    </telerik:RadDiagram>

    Ultimately I don't actually need to set Shape Style.  I use a Shape Template that meets my needs, but I have a big thick blue border (metro theme) around my shape that I just want to get rid of.

    Thank you,
    - Darlene
  2. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 07 Aug 2012 Link to this post

    Hi Darlene,

    Unfortunately I wasn't able to reproduce the issue, however I think I'm missing something from your scenario. Can you please elaborate a bit more on it - if you can send us a sample solution to demonstrate your custom style and a snapshot to indicate the thick blue border you need to remove, we'll gladly have a closer look at the issue.

    All the best,
    Tina Stancheva
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  3. DevCraft banner
  4. Darlene
    Darlene avatar
    13 posts
    Member since:
    Jan 2012

    Posted 07 Aug 2012 Link to this post

    Hi Tina,

    Here's a more complete example:
        <Window xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"  x:Class="WpfApplication3.MainWindow"
                xmlns:Telerik_Windows_Controls_Diagrams_Primitives="clr-namespace:Telerik.Windows.Controls.Diagrams.Primitives;assembly=Telerik.Windows.Controls.Diagrams"
                Title="MainWindow" Height="350" Width="525">
     
        <Window.Resources>
            <Style x:Key="RadDiagramShapeStyle1" TargetType="{x:Type telerik:RadDiagramShape}">
                <Setter Property="Foreground" Value="#FF999999"/>
                <Setter Property="Background" Value="Blue" />
                <Setter Property="BorderBrush" Value="#FF999999"/>
                <Setter Property="BorderThickness" Value="0"/>
                <Setter Property="StrokeThickness" Value="1"/>
                <Setter Property="Padding" Value="0"/>
                <Setter Property="StrokeDashArray" Value="1 0"/>
                <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
                <Setter Property="HorizontalContentAlignment" Value="Center"/>
                <Setter Property="VerticalContentAlignment" Value="Stretch"/>
                <Setter Property="Geometry" Value="M0,0L60,0 60,40 0,40z"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type telerik:RadDiagramShape}">
                            <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.TargetProperty="Visibility" Storyboard.TargetName="ActiveSelectedBorder">
                                                    <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.TargetProperty="Visibility" Storyboard.TargetName="ConnectorsControl">
                                                    <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.TargetProperty="Visibility" Storyboard.TargetName="SelectedBorder">
                                                    <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.TargetProperty="Visibility" Storyboard.TargetName="NormalContent">
                                                    <DiscreteObjectKeyFrame KeyTime="0">
                                                        <DiscreteObjectKeyFrame.Value>
                                                            <Visibility>Collapsed</Visibility>
                                                        </DiscreteObjectKeyFrame.Value>
                                                    </DiscreteObjectKeyFrame>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="EditContent">
                                                    <DiscreteObjectKeyFrame KeyTime="0">
                                                        <DiscreteObjectKeyFrame.Value>
                                                            <Visibility>Visible</Visibility>
                                                        </DiscreteObjectKeyFrame.Value>
                                                    </DiscreteObjectKeyFrame>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="TextBoxEditMode">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="NormalContent">
                                                    <DiscreteObjectKeyFrame KeyTime="0">
                                                        <DiscreteObjectKeyFrame.Value>
                                                            <Visibility>Collapsed</Visibility>
                                                        </DiscreteObjectKeyFrame.Value>
                                                    </DiscreteObjectKeyFrame>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="EditTextBox">
                                                    <DiscreteObjectKeyFrame KeyTime="0">
                                                        <DiscreteObjectKeyFrame.Value>
                                                            <Visibility>Visible</Visibility>
                                                        </DiscreteObjectKeyFrame.Value>
                                                    </DiscreteObjectKeyFrame>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <Grid>
                                    <Path x:Name="Geometry" Data="{TemplateBinding Geometry}" Fill="{TemplateBinding Background}" Opacity="{TemplateBinding Opacity}" Stretch="Fill" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="{TemplateBinding StrokeThickness}" StrokeDashArray="{TemplateBinding StrokeDashArray}"/>
                                    <Border x:Name="SelectedBorder" BorderBrush="#FFADD6FF" BorderThickness="1" Visibility="Collapsed"/>
                                    <Border x:Name="ActiveSelectedBorder" BorderBrush="#7FC92931" BorderThickness="2" Visibility="Collapsed"/>
                                    <ContentPresenter x:Name="NormalContent" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" telerik:DiagramBehaviors.TextElementForeground="{TemplateBinding Foreground}" telerik:DiagramBehaviors.TextWrapping="Wrap" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                                    <Telerik_Windows_Controls_Diagrams_Primitives:ConnectorsControl x:Name="ConnectorsControl" ItemContainerStyle="{TemplateBinding ConnectorStyle}" Visibility="Collapsed"/>
                                </Grid>
                                <Grid x:Name="PART_RotationalPart">
                                    <ContentPresenter x:Name="EditContent" ContentTemplate="{TemplateBinding EditTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Visibility="Collapsed" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                                    <TextBox x:Name="EditTextBox" AcceptsReturn="True" Visibility="Collapsed">
                                        <TextBox.Style>
                                            <Style TargetType="{x:Type TextBox}">
                                                <Setter Property="TextWrapping" Value="Wrap"/>
                                                <Setter Property="TextAlignment" Value="Center"/>
                                                <Setter Property="FontSize" Value="11"/>
                                                <Setter Property="FontFamily" Value="Segoe UI"/>
                                                <Setter Property="Foreground" Value="Black"/>
                                                <Setter Property="HorizontalAlignment" Value="Stretch"/>
                                                <Setter Property="VerticalAlignment" Value="Center"/>
                                                <Setter Property="Margin" Value="5"/>
                                                <Setter Property="Padding" Value="2"/>
                                                <Setter Property="Template">
                                                    <Setter.Value>
                                                        <ControlTemplate TargetType="{x:Type TextBox}">
                                                            <Grid x:Name="RootElement">
                                                                <Rectangle Fill="White" Stroke="#FF767676" StrokeDashArray="3 3" UseLayoutRounding="True"/>
                                                                <ScrollViewer x:Name="PART_ContentHost" BorderThickness="0" Background="Transparent" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}">
                                                                    <telerik:StyleManager.Theme>
                                                                        <telerik:MetroTheme/>
                                                                    </telerik:StyleManager.Theme>
                                                                </ScrollViewer>
                                                            </Grid>
                                                        </ControlTemplate>
                                                    </Setter.Value>
                                                </Setter>
                                            </Style>
                                        </TextBox.Style>
                                    </TextBox>
                                </Grid>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Window.Resources>
     
        <!-- Remove ShapeStyle to see the Connector handlers -->
        <telerik:RadDiagram telerik:StyleManager.Theme="Metro" ShapeStyle="{StaticResource RadDiagramShapeStyle1}">       
            <telerik:RadDiagram.ShapeTemplate>
                <DataTemplate>
                    <Border BorderThickness="1" BorderBrush="#FF999999" MinWidth="256" Background="#FFEEEEEE">
                        <TextBlock Text="{Binding }" />
                    </Border>
                </DataTemplate>
            </telerik:RadDiagram.ShapeTemplate>
             <Rect X="10" Y="20" Width="30" Height="40" />       
        </telerik:RadDiagram>
     
    </Window>

    I have a style, which I extract with Expression Blend and modified to remove the blue border. (Border is blue due to metro theme, would be orange with no theme)

    If the ShapeStyle attribute on the RadDiagram is not set, then I will get the connector handlers appearing on the edges (wanted).  But the blue border will also display (not wanted).

    So I set the ShapeStyle attribute to take care of the border.  Thus the border is eliminated (wanted).  But then the connector handlers won't appear (not wanted).

    How can I have the border gone and keep the connector handlers?  Thank you!
  5. Answer
    Francois Vanderseypen
    Francois Vanderseypen avatar
    46 posts
    Member since:
    Oct 2009

    Posted 07 Aug 2012 Link to this post

    Darlene, you simply need to add the ItemsSource to the ConnectorsControl. It sits in the original template but for some reason Expression Blend has dropped it or you have accidentally removed it.

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

    Hope this helps, Fr.
  6. Darlene
    Darlene avatar
    13 posts
    Member since:
    Jan 2012

    Posted 07 Aug 2012 Link to this post

    Hi Francois,

    Thank you for pointing that out - it solves the problem!

    If I drag a RadDiagramShape in Expression Blend (v4) onto the main area and right-click to Edit Template -> Edit a Copy, the ItemsSource property on the ConnectorsControl is not present.

    - Darlene
  7. Alaa
    Alaa avatar
    27 posts
    Member since:
    Jun 2014

    Posted 23 Feb 2015 in reply to Francois Vanderseypen Link to this post

    You solved my problem! Thanks a lot!
    I tried both, editing the template manually not by Blend , then by Blend. The Connectors were gone! So, then problem not produced only from Blend! It's the idea of giving the ConnectorsControl the ItemSource.
  8. Alaa
    Alaa avatar
    27 posts
    Member since:
    Jun 2014

    Posted 26 Feb 2015 Link to this post

    I have many DataTemplates for my selector, I need to put ConnectorsControl inside every DataTample 

    I put it in many ways(with RelativeSource then I tried to put it in a Style) but it couldn't see it and it gave me errors

        
           <pTelerik:ConnectorsControl x:Name="ConnectorsControl"<br>                                                ItemContainerStyle="{Binding ConnectorStyle, RelativeSource={RelativeSource TemplatedParent}}"<br>                                                ItemsSource="{Binding Connectors, RelativeSource={RelativeSource TemplatedParent}}"       <Style x:Key="ConnectionStyle" TargetType="pTelerik:ConnectorsControl">
                    <Setter Property="ItemContainerStyle" Value="{Binding ConnectorStyle}" />
                    <Setter Property="ItemsSource" Value="{Binding Connectors}" />
                    <Setter Property="Visibility" Value="Collapsed" />
                </Style><
    br>                                                Visibility="Collapsed" />




           <Style x:Key="ConnectionStyle" TargetType="pTelerik:ConnectorsControl"><br>                <Setter Property="ItemContainerStyle" Value="{Binding ConnectorStyle, , RelativeSource={RelativeSource TemplatedParent}}"}" /><br>                <Setter Property="ItemsSource" Value="{Binding Connectors, , RelativeSource={RelativeSource TemplatedParent}}"}" /><br>                <Setter Property="Visibility" Value="Collapsed" /><br>            </Style>


    Then inside the dataTemplate 
    <pTelerik:ConnectorsControl x:Name="ConnectorsControl"<br>                        Style="{StaticResource ConnectionStyle}" />








    System.Windows.Data Error: 40 : BindingExpression path error: 'ConnectorStyle' property not found on 'object' ''ContentPresenter' (Name='')'. BindingExpression:Path=ConnectorStyle; DataItem='ContentPresenter' (Name=''); target element is 'ConnectorsControl' (Name='ConnectorsControl'); target property is 'ItemContainerStyle' (type 'Style')
    System.Windows.Data Error: 40 : BindingExpression path error: 'Connectors' property not found on 'object' ''ContentPresenter' (Name='')'. BindingExpression:Path=Connectors; DataItem='ContentPresenter' (Name=''); target element is 'ConnectorsControl' (Name='ConnectorsControl'); target property is 'ItemsSource' (type 'IEnumerable')


    Any Help?
  9. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 03 Mar 2015 Link to this post

    Hi Alaa,

    ConnectorsControl is by default part of the RadDiagramShape's Template. In this common scenario , TemplateBinding works - 
    ItemContainerStyle="{Binding ConnectorStyle, RelativeSource={RelativeSource TemplatedParent}}"
    the framework (WPF or SL) looks for ConnectorStyle property in the RadDiagramShape.

    However, since you place the TemplateBinding in DataTemplate outside the Shape's ControlTempalte - the SL framewrok throws error because it cannot find ConnectorStyle property.

    However, if you use implicit styles with no-xaml binaries, you can set:
    ItemContainerStyle="{StaticResource RadDiagramConnectorStyle}"
    On the other hand, if you use normal XAML binaries, you can try to remove the mentioned setting at all and probably the connectors will be shown again with proper style.

    The bigger questions is - do you really need to use ConnectorsControl in DataTemplate for the Shapes. What is the reason behind this, aren't you able to use it normally - in the ControlTemplate of the Shape and set up the different shapes with properties ? Could you please elaborate a bit more on your scenario ? Perhaps we can think up some more elegant MVVM solution.


    Regards,
    Petar Mladenov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
DevCraft banner