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

Losing ConnectorManipulators when setting ShapeStyle

7 Answers 157 Views
Diagram
This is a migrated thread and some comments may be shown as answers.
Darlene
Top achievements
Rank 1
Darlene asked on 03 Aug 2012, 06:29 PM
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

7 Answers, 1 is accepted

Sort by
0
Tina Stancheva
Telerik team
answered on 07 Aug 2012, 04:07 PM
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.

0
Darlene
Top achievements
Rank 1
answered on 07 Aug 2012, 04:59 PM
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!
0
Accepted
Francois Vanderseypen
Top achievements
Rank 2
answered on 07 Aug 2012, 06:05 PM
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.
0
Darlene
Top achievements
Rank 1
answered on 07 Aug 2012, 06:39 PM
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
0
Alaa
Top achievements
Rank 1
answered on 23 Feb 2015, 08:47 AM
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.
0
Alaa
Top achievements
Rank 1
answered on 26 Feb 2015, 11:44 AM
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?
0
Petar Mladenov
Telerik team
answered on 03 Mar 2015, 07:53 AM
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.

 
Tags
Diagram
Asked by
Darlene
Top achievements
Rank 1
Answers by
Tina Stancheva
Telerik team
Darlene
Top achievements
Rank 1
Francois Vanderseypen
Top achievements
Rank 2
Alaa
Top achievements
Rank 1
Petar Mladenov
Telerik team
Share this question
or