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