|
1 | | -# How to populate nodes with binding to a data in wpf treeview? |
2 | | -This repository describes how to populate nodes with binding to a data in wpf treeview |
| 1 | +# How to populate nodes with binding to a data in WPF TreeView |
| 2 | + |
| 3 | +This repository describes how to populate nodes with binding to a data in [WPF TreeView](https://www.syncfusion.com/wpf-controls/treeview) (SfTreeView) |
| 4 | + |
| 5 | +To create a tree view using data binding, set a hierarchical data collection to the [ItemsSource](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeView.SfTreeView.html#Syncfusion_UI_Xaml_TreeView_SfTreeView_ItemsSource) property. And set the child object name to the [ChildPropertyName](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeView.SfTreeView.html#Syncfusion_UI_Xaml_TreeView_SfTreeView_ChildPropertyName) property. |
| 6 | + |
| 7 | +``` xml |
| 8 | +<Window x:Class="NodeWithImageDemo.MainWindow" |
| 9 | + xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" |
| 10 | + xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" |
| 11 | + xmlns:d="http://schemas.microsoft.com/expression/blend/2008" |
| 12 | + xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" |
| 13 | + xmlns:local="clr-namespace:NodeWithImageDemo" |
| 14 | + xmlns:syncfusion="http://schemas.syncfusion.com/wpf" |
| 15 | + xmlns:Engine="clr-namespace:Syncfusion.UI.Xaml.TreeView.Engine;assembly=Syncfusion.SfTreeView.WPF" |
| 16 | + mc:Ignorable="d"> |
| 17 | + |
| 18 | + <Window.DataContext> |
| 19 | + <local:FileManagerViewModel/> |
| 20 | + </Window.DataContext> |
| 21 | + |
| 22 | + <Grid> |
| 23 | + <syncfusion:SfTreeView x:Name="sfTreeView" |
| 24 | + ChildPropertyName="SubFiles" |
| 25 | + ItemsSource="{Binding ImageNodeInfo}"> |
| 26 | + |
| 27 | + <syncfusion:SfTreeView.ItemTemplate> |
| 28 | + <DataTemplate> |
| 29 | + <Grid x:Name="grid"> |
| 30 | + <Grid Grid.Row="0"> |
| 31 | + <Grid.ColumnDefinitions> |
| 32 | + <ColumnDefinition Width="20" /> |
| 33 | + <ColumnDefinition Width="*" /> |
| 34 | + </Grid.ColumnDefinitions> |
| 35 | + <Grid> |
| 36 | + <Image Source="{Binding ImageIcon}" |
| 37 | + VerticalAlignment="Center" |
| 38 | + HorizontalAlignment="Center" |
| 39 | + Height="16" |
| 40 | + Width="16"/> |
| 41 | + </Grid> |
| 42 | + <Grid Grid.Column="1" |
| 43 | + Margin="1,0,0,0" |
| 44 | + VerticalAlignment="Center"> |
| 45 | + <TextBlock Text="{Binding ItemName}" |
| 46 | + Foreground="Black" |
| 47 | + FontSize="14" |
| 48 | + VerticalAlignment="Center" |
| 49 | + </Grid> |
| 50 | + </Grid> |
| 51 | + </Grid> |
| 52 | + </DataTemplate> |
| 53 | + </syncfusion:SfTreeView.ItemTemplate> |
| 54 | + </syncfusion:SfTreeView> |
| 55 | + </Grid> |
| 56 | +</Window> |
| 57 | +``` |
0 commit comments