Customize the style of focused node?

[Kristoffer]

When selecting a node, a dashed border is painted around it. How can I customize this border?

[Zarko]

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

[Kristoffer]

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>

[Zarko]

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

[Kristoffer]

This solution works. Thanks.

I'm wondering though, can this be done without using code-behind?

[Zarko]

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:

<diagramPrimitives:ManipulationAdorner ...
            BorderBrush="{Binding SelectedItem, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource myConv}}"
            ...>

and the converter:

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;
    }
}

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

[Kristoffer]

Thanks. This did the trick!

[Kristoffer]

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?

[Zarko]

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:

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

I hope I was able to help you and if you have further questions please feel free to ask.

Regards,
Zarko
Telerik