Articles in this section
Category / Section

How to customize the appearance of the selector in WPF Diagram (SfDiagram)?

2 mins read

WPF Diagram (SfDiagram) has a predefined style for selector but you can customize the selector style by creating a new Selector with a custom style. This new custom selector will be returned by overriding the virtual SfDiagram.GetSelectorForItemOverride method.

XAML

<Style x:Key="TopLeftCornerResizerThumpTemplate" TargetType="{x:Type Syncfusion:DiagramThumb}">
    <Setter Property="IsTabStop" Value="false"/>
    <Setter Property="Background" Value="Orange"/>
    <Setter Property="Width" Value="25"/>
    <Setter Property="Height" Value="25"/>
    <Setter Property="Margin" Value="0 -5 0 0"/>
    <Setter Property="Opacity" Value="0.6"/>
    <Setter Property="Template">
         <Setter.Value>
              <ControlTemplate TargetType="{x:Type Syncfusion:DiagramThumb}">
                   <Grid>
                        <Rectangle Fill="Transparent"/>
                        <Border Height="2" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}"  Margin="0 -3 0 0" x:Name="PART_ReseizerThumb" CornerRadius="7" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0" />
                        <Rectangle  x:Name="PART_ResizerBorder" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}"
                  VerticalAlignment="{TemplateBinding VerticalAlignment}" Fill="Orange" Stroke="OrangeRed"  StrokeThickness="1" Margin="7"/>
                   </Grid>
              </ControlTemplate>
         </Setter.Value>
    </Setter>
</Style>
 
<Style TargetType="{x:Type Syncfusion:Selector}" x:Key="CustomSelectorStyle">
    <Setter Property="Template">
         <Setter.Value>
              <ControlTemplate>
                   <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                        <Syncfusion:SelectorPanel>
                             <Syncfusion:SelectorPanel.Resources>
                                  <Style x:Key="pathStyle" TargetType="{x:Type Shape}">
                                      <Setter Property="StrokeThickness" Value="1"/>
                                      <Setter Property="Stroke" Value="{StaticResource PathStrokeThemeBrush}"/>
                                  </Style>
                             </Syncfusion:SelectorPanel.Resources>
                             <Rectangle Style="{StaticResource pathStyle}" Stretch="Fill" StrokeDashArray="2, 2"/>
                             <Line X1="0" X2="0" Y1="0" Y2="0" StrokeThickness="0" Visibility="Collapsed" StrokeDashArray="2, 2" Style="{StaticResource pathStyle}"/>
                             <Syncfusion:DiagramThumb x:Name="PART_TopLeft" ControlPointType="TopLeftResizer" Style="{StaticResource TopLeftCornerResizerThumpTemplate}" HorizontalAlignment="Left" VerticalAlignment="Top"/>
                             <Syncfusion:DiagramThumb x:Name="PART_Top" ControlPointType="TopResizer" Style="{StaticResource NullType}" HorizontalAlignment="Center" VerticalAlignment="Top"/>
                             <Syncfusion:DiagramThumb x:Name="PART_TopRight" ControlPointType="TopRightResizer" Style="{StaticResource TopLeftCornerResizerThumpTemplate}" HorizontalAlignment="Right" VerticalAlignment="Top"/>
                             <Syncfusion:DiagramThumb x:Name="PART_Left" ControlPointType="LeftResizer" Style="{StaticResource NullType}" HorizontalAlignment="Left" VerticalAlignment="Center"/>
                             <Syncfusion:DiagramThumb x:Name="PART_Right" ControlPointType="RightResizer" Style="{StaticResource NullType}" HorizontalAlignment="Right" VerticalAlignment="Center"/>
                             <Syncfusion:DiagramThumb x:Name="PART_BottomLeft" ControlPointType="BottomLeftResizer" Style="{StaticResource TopLeftCornerResizerThumpTemplate}" HorizontalAlignment="Left" VerticalAlignment="Bottom"/>
                             <Syncfusion:DiagramThumb x:Name="PART_Bottom"  ControlPointType="BottomResizer" Style="{StaticResource NullType}" HorizontalAlignment="Center" VerticalAlignment="Bottom"/>
                             <Syncfusion:DiagramThumb x:Name="PART_BottomRight" ControlPointType="BottomRightResizer" Style="{StaticResource TopLeftCornerResizerThumpTemplate}" HorizontalAlignment="Right" VerticalAlignment="Bottom"/>
                             <Syncfusion:DiagramThumb Width="0" Height="0" Visibility="Collapsed" ControlPointType="Pivot" x:Name="PART_Pivot"/>
                             <Syncfusion:DiagramThumb Width="0" Height="0" Visibility="Collapsed" ControlPointType="Rotator" x:Name="PART_Rotator"/>
                        </Syncfusion:SelectorPanel>
                   </Border>
              </ControlTemplate>
         </Setter.Value>
    </Setter>
</Style>

C#

public class Diagram : SfDiagram
{
  public Diagram()
  {
    this.SFSelector.Style = this.Resources["CustomSelectorStyle"] as Style;
  }
  //Apply Selectors
  public Selector SFSelector = new Selector();
  protected override Selector GetSelectorForItemOverride(object item)
  {
    return SFSelector;
  }
}

 

CustomSelectorStyle

View sample in GitHub.

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied