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?
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
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
0
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
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:
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!
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.
Hope this helps, Fr.
<
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
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.
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
Then inside the dataTemplate
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?
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
Hi Alaa,
ConnectorsControl is by default part of the RadDiagramShape's Template. In this common scenario , TemplateBinding works -
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:
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
ConnectorsControl is by default part of the RadDiagramShape's Template. In this common scenario , TemplateBinding works -
ItemContainerStyle="{Binding ConnectorStyle, RelativeSource={RelativeSource TemplatedParent}}"
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}"
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.