Getting Started with WPF SfTreeNavigator

18 Nov 20184 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.dll

Adding WPF SfTreeNavigator via XAML

  1. Create a WPF desktop app for C#.
  2. Add a reference to the Syncfusion.SfTreeNavigator.Wpf NuGet package.
  3. Import the namespace Syncfusion.Windows.Controls.Navigation in XAML or C# code.
  4. Add an SfTreeNavigator instance to your view (for example, inside MainWindow.xaml).
<Window
    x:Class="GettingStarted.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:navigation="clr-namespace:Syncfusion.Windows.Controls.Navigation;assembly=Syncfusion.SfTreeNavigator.WPF"
    mc:Ignorable="d"
    Title="Getting Started" Height="450" Width="800">
    <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>
</Window>

Adding WPF SfTreeNavigator via C#

  1. Create a WPF desktop app for C# and .NET 6.
  2. Add a reference to the Syncfusion.SfTreeNavigator.Wpf NuGet package.
  3. Import the namespace Syncfusion.Windows.Controls.Navigation in XAML or C# code.
  4. Add an SfTreeNavigator instance to your window’s content.
using System.Windows;
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() { Header = "Enterprise Toolkit" };
            SfTreeNavigatorItem winrt = new SfTreeNavigatorItem() { Header = "WinRT (XAML)" };
            SfTreeNavigatorItem metroStudio = new SfTreeNavigatorItem() { Header = "Metro Studio" };
            SfTreeNavigatorItem winrtChart = new SfTreeNavigatorItem() { Header = "Chart" };
            SfTreeNavigatorItem winrtTools = new SfTreeNavigatorItem() { Header = "Tools" };

            winrt.Items.Add(winrtChart);
            winrt.Items.Add(winrtTools);

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

            this.Content = sfToolkit;
        }
    }
}

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