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