Category / Section
How to use ContentTemplateSelector based on the Content of the Node?
2 mins read
In WPF Diagram (SfDiagram), we used only the Content and ContentTemplate in the template of Diagram elements. If you need to use ContentTemplateSelector, then you need to override the style of the Diagram element. We have prepared a simple sample to achieve how to use ContentTemplateSelector based on the content of the Node.
XAML
<DataTemplate x:Key="numberTemplate">
<Grid>
<Rectangle Stroke="Black" />
<TextBlock Margin="5" Foreground="Black"
Text="{Binding}" FontSize="18"/>
</Grid>
</DataTemplate>
<DataTemplate x:Key="largeTemplate">
<Grid>
<Ellipse Stroke="Black" StrokeThickness="4"/>
<TextBlock Margin="15" Text="{Binding}" FontSize="24"
Foreground="Black" FontWeight="Bold" />
</Grid>
</DataTemplate>
<local:InheritanceDataTemplateSelector x:Key="inheritanceDataTemplateSelector"
NumberTemplate="{StaticResource numberTemplate}"
LargeNumberTemplate="{StaticResource largeTemplate}"/>
<util:PathConverter x:Key="PathConverter"/>
<Style TargetType="Syncfusion:Node">
<Setter Property="ShapeStyle" Value="{Binding Path=ShapeStyle}" />
<Setter Property="Shape" Value="{Binding Path=Shape,Converter={StaticResource PathConverter}}" />
<Setter Property="Content" Value="{Binding Path=Content}" />
<Setter Property="ContentTemplate" Value="{Binding Path=ContentTemplate}" />
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
<Setter Property="ZIndex" Value="{Binding Path=ZIndex}"/>
<Setter Property="Pivot" Value="{Binding Path=Pivot}"/>
<Setter Property="ContentTemplateSelector" Value="{StaticResource inheritanceDataTemplateSelector}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Syncfusion:Node">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<Grid>
<Path x:Name="Path"
Data="{Binding RelativeSource={RelativeSource Mode=TemplatedParent},Path=Shape , Converter={StaticResource PathConverter}}"
RenderTransformOrigin="{TemplateBinding Pivot}"
Style="{TemplateBinding ShapeStyle}"/>
<ContentPresenter x:Name="ContentPresenter"
Content="{TemplateBinding Content}"
RenderTransformOrigin="{TemplateBinding Pivot}"
ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
ContentTemplate="{TemplateBinding ContentTemplate}"/>
<Syncfusion:AnnotationPanel x:Name="PART_Annotations"/>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
