Syncfusion AI Assistant

How can I help you?

Getting Started with WPF Tree Navigator (SfTreeNavigator)

21 Apr 20263 minutes to read

This section explains the steps required to add the Wpf SfTreeNavigator control with its basic features.

Namespace : Syncfusion.Windows.Controls.Navigation

Assembly : Syncfusion.SfTreeNavigator.WPF (in Syncfusion.SfTreeNavigator.WPF.dll)

Adding WPF SfTreeNavigator via xaml

  1. Create a Wpf desktop app for C# and .NET 6.
  2. Add reference to Syncfusion.SfTreeNavigator.Wpf NuGet.
  3. Import the control namespace Syncfusion.Windows.Controls.Navigation in XAML or C# code.
  4. Initialize the SfTreeNavigator control.
<Page
    x:Class="GettingStarted.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:GettingStarted"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:syncfusion="using:Syncfusion.UI.Xaml.Chat"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid>
      <navigation:SfTreeNavigator Header="Enterprise Toolkit" >
          <navigation:SfTreeNavigatorItem Header="WinRT (XAML)">
          <navigation:SfTreeNavigatorItem Header="Chart"/>
          <navigation:SfTreeNavigatorItem Header="Tools"/>
          </navigation:SfTreeNavigatorItem>
          <navigation:SfTreeNavigatorItem Header="Metro Studio"/>
      </navigation:SfTreeNavigator>
    </Grid>
</Page>

Adding WPF SfTreeNavigator via C#

  1. Create a Wpf desktop app for C# and .NET 6.
  2. Add reference to Syncfusion.SfTreeNavigator.Wpf NuGet.
  3. Import the control namespace Syncfusion.Windows.Controls.Navigation in XAML or C# code.
  4. Initialize the SfTreeNavigator control.
using Syncfusion.Windows.Controls.Navigation;

namespace GettingStarted
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            this.InitializeComponent();
            // Creating an instance of the SfTreeNavigator control
            SfTreeNavigator sfToolkit = new SfTreeNavigator();
            SfTreeNavigatorItem winrt = new SfTreeNavigatorItem() {Header = "WinRT (XAML)"};
            SfTreeNavigatorItem metroStudio = new SfTreeNavigatorItem() {Header = "Metro Studio"};
            SfTreeNavigatorItem winrt_chart = new SfTreeNavigatorItem() {Header = "Chart"};
            SfTreeNavigatorItem winrt_tools = new SfTreeNavigatorItem() {Header = "Tools"};

            winrt.Items.Add(winrt_chart);
            winrt.Items.Add(winrt_tools);

            sfToolkit.Items.Add(winrt);
            sfToolkit.Items.Add(metroStudio);
        }
    }
}

NOTE

You can refer the Tree Navigator demo in the Essential Studio WPF SampleBrowser to view its features.

Theme

Tree Navigator supports various built-in themes. Refer to the below links to apply themes for the Tree Navigator,

Setting theme to WPF Tree Navigator