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