We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Platform: WPF |
Control: SfDiagram |
Published Date: October 8, 2018 |
Last Revised Date: April 24, 2020

All UI elements can be used as the content of the node. 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

 

 

2X faster development

The ultimate WPF UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon