Articles in this section
Category / Section

How to host different UI elements as node content in the WPF Diagram (SfDiagram)?

3 mins read

All UI elements can be used as the content of the node in WPF Diagram (SfDiagram). It can be achieved by using the ContentTemplate, Shape, and Content properties of the Node and NodeViewModel classes.

Using the Content template

Any UI elements and custom path data can be used as content of the node using the ContentTemplate property.

XAML

<Window.Resources>
      <ResourceDictionary>
           <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/Syncfusion.SfDiagram.Wpf;component/Resources/BasicShapes.xaml" />
                <ResourceDictionary Source="/Syncfusion.SfDiagram.Wpf;component/Resources/BindingStyle.xaml" />
           </ResourceDictionary.MergedDictionaries>
 
           <DataTemplate x:Key="login_content">
                <Border Background="Transparent" BorderBrush="Gray" BorderThickness="0.5" Height="150">
                    <StackPanel Orientation="Vertical" Margin="2,2,2,2" Height="140" >
                        <TextBox Name="textbox" Height="40" Width="150"
HorizontalAlignment="Center" BorderBrush="#13c6ff"
Text="Textbox" Foreground="Black" Margin="5,5,5,5">
                        </TextBox>
                        <Border BorderBrush="#13c6ff" BorderThickness="1" Height="40" Width="150">
                            <ComboBox Name="combobox" Height="40" Width="150" Margin="5,5,5,5"
Background="Transparent" Style="{DynamicResource comboboxstyle1}">
                                <ComboBoxItem IsSelected="True" BorderBrush="Red" Background="AliceBlue">Combobox</ComboBoxItem>
                                <ComboBoxItem>Item #1</ComboBoxItem>
                                <ComboBoxItem>Item #2</ComboBoxItem>
                                <ComboBox.ItemContainerStyle>
                                    <Style TargetType="ComboBoxItem">
                                        <Setter Property="Background" Value="LightGray"/>
                                        <Setter Property="BorderBrush" Value="#13c6ff"></Setter>
                                    </Style>
                                </ComboBox.ItemContainerStyle>
                            </ComboBox>
                        </Border>
                        <Button Name="button" Background="#13c6ff" Content="Submit" BorderBrush="#13c6ff"
Foreground="White" Height="40" Width="150" Margin="5,5,5,5">
                        </Button>
                    </StackPanel>
                </Border>
           </DataTemplate>
 
           <DataTemplate x:Key="cloud_path">
                <Grid x:Name="cloud_storage" Height="97.972" Canvas.Left="61.237" Canvas.Top="21" Width="122.666">
                    <Path Data="F1M73.5,52.092C73.5,47.674,77.082,44.092,81.5,44.092L115.587,44.092C111.935,36.057 104.111,30.242 95.32,29.443 91.64,12.881 76.918,0 58.885,0 44.532,0 32.387,7.729 26.498,19.874 11.409,21.714 0,34.227 0,49.317 0,65.51 13.249,78.758 29.442,78.758L73.5,78.758z" Fill="#FF13C6FF" Margin="0,0,7.079,19.214"/>
                    <Path Data="F1M43.499,2.721L43.499,10.674C43.499,12.174,42.285,13.392,40.78,13.392L2.718,13.392C1.22,13.392,0,12.174,0,10.674L0,2.721C0,1.218,1.22,0,2.718,0L40.78,0C42.285,0,43.499,1.218,43.499,2.721 M32.409,6.696C32.409,8.399 33.793,9.782 35.494,9.782 37.193,9.782 38.579,8.399 38.579,6.696 38.579,4.991 37.193,3.607 35.494,3.607 33.793,3.607 32.409,4.991 32.409,6.696 M43.499,19.334L43.499,27.286C43.499,28.786,42.285,30.006,40.78,30.006L2.718,30.006C1.22,30.006,0,28.786,0,27.286L0,19.334C0,17.832,1.22,16.616,2.718,16.616L40.78,16.616C42.285,16.616,43.499,17.832,43.499,19.334 M43.499,36.248L43.499,44.202C43.499,45.706,42.286,46.924,40.78,46.924L2.718,46.924C1.22,46.924,0,45.706,0,44.202L0,36.248C0,34.748,1.22,33.53,2.718,33.53L40.78,33.53C42.286,33.53,43.499,34.748,43.499,36.248" Fill="#FF737373" Margin="79.167,51.049,0,0"/>
                </Grid>
           </DataTemplate>
      </ResourceDictionary>
</Window.Resources>
 
<Grid>
     <syncfusion:SfDiagram x:Name="diagram">
        <syncfusion:SfDiagram.Nodes>
            <syncfusion:DiagramCollection>
                <syncfusion:Node x:Name="login" UnitWidth="165" UnitHeight="200" OffsetX="150" OffsetY="100" 
HorizontalAlignment="Center" Background="Transparent" VerticalAlignment="Center" 
BorderBrush="Black" ContentTemplate="{StaticResource login_content}">
                </syncfusion:Node>
                <syncfusion:Node x:Name="cloud_stroage" UnitWidth="100" UnitHeight="100" OffsetX="770" OffsetY="300" IsHitTestVisible="True"
HorizontalAlignment="Center" VerticalAlignment="Center" Background="Transparent"
ContentTemplate="{StaticResource cloud_path}">
                </syncfusion:Node>
            </syncfusion:DiagramCollection>
        </syncfusion:SfDiagram.Nodes>
     </syncfusion:SfDiagram>
</Grid>

A screenshot of a cell phone

Description automatically generated

Using the Content

Any UI elements and images can be used as the content of the node using the Content property.

XAML

<syncfusion:Node x:Name="profile" UnitWidth="100" UnitHeight="100" OffsetX="150" OffsetY="500" IsHitTestVisible="True" HorizontalAlignment="Center" VerticalAlignment="Center" Background="Transparent" >
    <syncfusion:Node.Content>
        <StackPanel>
            <Image Source="/Image/user_image.png" Height="100" Width="100">
            </Image>
        </StackPanel>
    </syncfusion:Node.Content>
</syncfusion:Node>
 
<syncfusion:Node x:Name="profile_fooder" UnitWidth="100" UnitHeight="100" OffsetX="150" OffsetY="555" IsHitTestVisible="True" HorizontalAlignment="Center" VerticalAlignment="Center" Background="Transparent" >
    <syncfusion:Node.Content>
        <TextBlock Name="profile_textblock" Text="User Login" Foreground="Black" FontSize="15" HorizontalAlignment="Center" VerticalAlignment="Center">
        </TextBlock>
    </syncfusion:Node.Content>
</syncfusion:Node>

A person wearing a suit and tie smiling at the camera

Description automatically generated

Using the Shape

Shapes are available in the Diagram resource dictionary can be used as the content of the node using the Shape property.

<syncfusion:Node x:Name="application" UnitWidth="130" UnitHeight="130" OffsetX="150" OffsetY="300" IsHitTestVisible="True" HorizontalAlignment="Center" VerticalAlignment="Center" Background="Transparent" Shape="{StaticResource Ellipse}">
    <syncfusion:Node.Content>
        <TextBlock Name="application_textblock" Text="Application" Foreground="White" FontSize="15" HorizontalAlignment="Center" VerticalAlignment="Center">
        </TextBlock>
    </syncfusion:Node.Content>
</syncfusion:Node>

A close up of a logo

Description automatically generated

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 sign in to leave a comment
Access denied
Access denied