Kristoffer
Top achievements
Rank 1
Kristoffer
asked on 20 Dec 2012, 11:22 AM
When selecting a node, a dashed border is painted around it. How can I customize this border?
8 Answers, 1 is accepted
0
Hello Kristoffer,
In order to change the style of ManipulationAdorner (that's the dashed border around the selected items) you'll have to edit the default template of the RadDiagram and the RadManipulationAdorner.
I've attached sample project so could you please examine it and if you have further questions feel free to ask.
All the best,
Zarko
the Telerik team
In order to change the style of ManipulationAdorner (that's the dashed border around the selected items) you'll have to edit the default template of the RadDiagram and the RadManipulationAdorner.
I've attached sample project so could you please examine it and if you have further questions feel free to ask.
All the best,
Zarko
the Telerik team
Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.
0
Kristoffer
Top achievements
Rank 1
answered on 31 Jan 2013, 01:26 PM
Thanks. I do have one more problem though.
I have the following ManipulationAdorner style. It does not work for obvious reasons. What I'm trying to do is to fetch the BorderBrush of the selected node in order to get a different selection color for different nodes (which have different BorderBrush colors). How can I get this working? Thanks!
<Style TargetType="primitives:ManipulationAdorner">
<Setter Property="BorderBrush" Value="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type views:MyChartShape}}, Path=BorderBrush}"/>
<Setter Property="BorderThickness" Value="1" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="primitives:ManipulationAdorner">
<Grid Visibility="{Binding Path=IsConnectionAdornerActive, Converter={StaticResource invertedBooleanToVisibilityConverter},RelativeSource={RelativeSource Mode=TemplatedParent}}">
<Rectangle Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="2" IsHitTestVisible="False" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I have the following ManipulationAdorner style. It does not work for obvious reasons. What I'm trying to do is to fetch the BorderBrush of the selected node in order to get a different selection color for different nodes (which have different BorderBrush colors). How can I get this working? Thanks!
<Style TargetType="primitives:ManipulationAdorner">
<Setter Property="BorderBrush" Value="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type views:MyChartShape}}, Path=BorderBrush}"/>
<Setter Property="BorderThickness" Value="1" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="primitives:ManipulationAdorner">
<Grid Visibility="{Binding Path=IsConnectionAdornerActive, Converter={StaticResource invertedBooleanToVisibilityConverter},RelativeSource={RelativeSource Mode=TemplatedParent}}">
<Rectangle Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="2" IsHitTestVisible="False" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
0
Hello Kristoffer,
The easiest way to achieve this is to use a DynamicResource and handle the SelectionChanged event of the RadDiagram. In the event handler you could put whatever logic you need and just change the dynamic resource.
I've updated the attached project so could you please examine it and if you have further questions feel free to ask.
Greetings,
Zarko
the Telerik team
The easiest way to achieve this is to use a DynamicResource and handle the SelectionChanged event of the RadDiagram. In the event handler you could put whatever logic you need and just change the dynamic resource.
I've updated the attached project so could you please examine it and if you have further questions feel free to ask.
Greetings,
Zarko
the Telerik team
Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.
0
Kristoffer
Top achievements
Rank 1
answered on 05 Feb 2013, 02:22 PM
This solution works. Thanks.
I'm wondering though, can this be done without using code-behind?
I'm wondering though, can this be done without using code-behind?
0
Hi Kristoffer,
You could try to bind the BorderBrush of the ManipulationAdorner to the SelectedItem of the RadDiagram and use a converter to convert the item to a SolidColorBrush:
and the converter:
Note: The SelectedItem may not always change - in case multi selection you have one SelectedItem which won't change when you deselect the other items.
This way you won't have code-behind but you'll have a converter.
I hope I was able to help you.
Kind regards,
Zarko
the Telerik team
You could try to bind the BorderBrush of the ManipulationAdorner to the SelectedItem of the RadDiagram and use a converter to convert the item to a SolidColorBrush:
<
diagramPrimitives:ManipulationAdorner
...
BorderBrush
=
"{Binding SelectedItem, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource myConv}}"
...>
public
class
MyConverter : IValueConverter
{
public
object
Convert(
object
value, Type targetType,
object
parameter, System.Globalization.CultureInfo culture)
{
var item = value
as
MyItem;
if
(item !=
null
)
{
if
(item.SomeProperty)
return
new
SolidColorBrush(Colors.Aquamarine);
else
return
new
SolidColorBrush(Colors.Green);
}
return
new
SolidColorBrush(Colors.Red); ;
}
public
object
ConvertBack(
object
value, Type targetType,
object
parameter, System.Globalization.CultureInfo culture)
{
return
value;
}
}
This way you won't have code-behind but you'll have a converter.
I hope I was able to help you.
Kind regards,
Zarko
the Telerik team
Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.
0
Kristoffer
Top achievements
Rank 1
answered on 06 Feb 2013, 09:31 AM
Thanks. This did the trick!
0
Kristoffer
Top achievements
Rank 1
answered on 03 Jun 2013, 10:03 AM
Hi again,
I noticed that the selection UI element is above the node's UI element. This implies a problem if I want to show the selection as a shadow or similar. I want the ManipulationAdorner to be placed at the back in the z-order (but preferably in front of other nodes). How can this be done?
I noticed that the selection UI element is above the node's UI element. This implies a problem if I want to show the selection as a shadow or similar. I want the ManipulationAdorner to be placed at the back in the z-order (but preferably in front of other nodes). How can this be done?
0
Hello Kristoffer,
You could place ManipulationAdorner under the shapes but it'll be under all shapes not only the currently selected, because the shapes are placed in the ItemsHost adorner and the ManipulationAdorner could be either beneath or on top of it:
I hope I was able to help you and if you have further questions please feel free to ask.
Regards,
Zarko
Telerik
You could place ManipulationAdorner under the shapes but it'll be under all shapes not only the currently selected, because the shapes are placed in the ItemsHost adorner and the ManipulationAdorner could be either beneath or on top of it:
<
Grid
x:Name
=
"MainPanel"
RenderTransformOrigin
=
"0.5,0.5"
>
<
diagramPrimitives:AdornerSurface
Background
=
"{x:Null}"
>
<
diagramPrimitives:ManipulationAdorner
x:Name
=
"ManipulationAdorner"
BorderBrush="{Binding SelectedItems.Count,
RelativeSource={RelativeSource TemplatedParent},
Converter={StaticResource myConv}}"
Position
=
"0,0"
RenderTransformOrigin
=
"0.5,0.5"
Style
=
"{StaticResource ManipulationAdornerStyle}"
Visibility
=
"Collapsed"
ZoomLevel
=
"{TemplateBinding Zoom}"
>
<
telerik:StyleManager.Theme
>
<
telerik:Office_BlackTheme
/>
</
telerik:StyleManager.Theme
>
</
diagramPrimitives:ManipulationAdorner
>
</
diagramPrimitives:AdornerSurface
>
<
telerik:DiagramSurface
x:Name
=
"ItemsHost"
Background
=
"Transparent"
/>
<
diagramPrimitives:AdornerSurface
Background
=
"{x:Null}"
>
<
Rectangle
x:Name
=
"SelectionRectangle"
Style
=
"{TemplateBinding SelectionRectangleStyle}"
/>
<
diagramPrimitives:ConnectionManipulationAdorner
x:Name
=
"ConnectionManipulationAdorner"
Position
=
"0,0"
RenderTransformOrigin
=
"0.5,0.5"
Visibility
=
"Collapsed"
>
<
diagramPrimitives:ConnectionManipulationAdorner.RenderTransform
>
<
RotateTransform
/>
</
diagramPrimitives:ConnectionManipulationAdorner.RenderTransform
>
<
telerik:StyleManager.Theme
>
<
telerik:Office_BlackTheme
/>
</
telerik:StyleManager.Theme
>
</
diagramPrimitives:ConnectionManipulationAdorner
>
<
diagramPrimitives:GroupsAdorner
x:Name
=
"GroupsAdorner"
HorizontalAlignment
=
"Stretch"
VerticalAlignment
=
"Stretch"
/>
<
diagramPrimitives:AlignmentAdorner
x:Name
=
"AlignmentAdorner"
HorizontalAlignment
=
"Stretch"
VerticalAlignment
=
"Stretch"
Position
=
"0,0"
RenderTransformOrigin
=
"0.5,0.5"
>
<
diagramPrimitives:AlignmentAdorner.RenderTransform
>
<
RotateTransform
/>
</
diagramPrimitives:AlignmentAdorner.RenderTransform
>
</
diagramPrimitives:AlignmentAdorner
>
<
diagramPrimitives:DrawingAdorner
x:Name
=
"DrawingAdorner"
HorizontalAlignment
=
"Stretch"
VerticalAlignment
=
"Stretch"
Position
=
"0,0"
RenderTransformOrigin
=
"0.5,0.5"
>
<
diagramPrimitives:DrawingAdorner.RenderTransform
>
<
RotateTransform
/>
</
diagramPrimitives:DrawingAdorner.RenderTransform
>
</
diagramPrimitives:DrawingAdorner
>
</
diagramPrimitives:AdornerSurface
>
</
Grid
>
Regards,
Zarko
Telerik
Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.