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

Customize the style of focused node?

8 Answers 100 Views
Diagram
This is a migrated thread and some comments may be shown as answers.
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

Sort by
0
Zarko
Telerik team
answered on 21 Dec 2012, 11:51 AM
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

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>
0
Zarko
Telerik team
answered on 05 Feb 2013, 02:08 PM
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

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?
0
Zarko
Telerik team
answered on 05 Feb 2013, 04:48 PM
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

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?
0
Zarko
Telerik team
answered on 04 Jun 2013, 01:55 PM
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

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Tags
Diagram
Asked by
Kristoffer
Top achievements
Rank 1
Answers by
Zarko
Telerik team
Kristoffer
Top achievements
Rank 1
Share this question
or