Customize the style of focused node?

9 posts, 0 answers
  1. Kristoffer
    Kristoffer avatar
    30 posts
    Member since:
    Oct 2012

    Posted 20 Dec 2012 Link to this post

    When selecting a node, a dashed border is painted around it. How can I customize this border?
  2. Zarko
    Admin
    Zarko avatar
    755 posts

    Posted 21 Dec 2012 Link to this post

    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.

  3. UI for WPF is Visual Studio 2017 Ready
  4. Kristoffer
    Kristoffer avatar
    158 posts
    Member since:
    Dec 2012

    Posted 31 Jan 2013 Link to this post

    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>
  5. Zarko
    Admin
    Zarko avatar
    755 posts

    Posted 05 Feb 2013 Link to this post

    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.

  6. Kristoffer
    Kristoffer avatar
    158 posts
    Member since:
    Dec 2012

    Posted 05 Feb 2013 Link to this post

    This solution works. Thanks.

    I'm wondering though, can this be done without using code-behind?
  7. Zarko
    Admin
    Zarko avatar
    755 posts

    Posted 05 Feb 2013 Link to this post

    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.

  8. Kristoffer
    Kristoffer avatar
    158 posts
    Member since:
    Dec 2012

    Posted 06 Feb 2013 Link to this post

    Thanks. This did the trick!
  9. Kristoffer
    Kristoffer avatar
    158 posts
    Member since:
    Dec 2012

    Posted 03 Jun 2013 Link to this post

    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?
  10. Zarko
    Admin
    Zarko avatar
    755 posts

    Posted 04 Jun 2013 Link to this post

    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.

Back to Top
UI for WPF is Visual Studio 2017 Ready