Loading...
Loading...
Compare original and translation side by side
<Page xmlns:treeView="using:Syncfusion.UI.Xaml.TreeView">
<Page.DataContext>
<local:FileViewModel />
</Page.DataContext>
<treeView:SfTreeView x:Name="treeView"
Width="400"
Height="500"
ChildPropertyName="SubFiles"
ItemsSource="{Binding Files}">
<treeView:SfTreeView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="📁" Margin="0,0,5,0" />
<TextBlock Text="{Binding FileName}"
VerticalAlignment="Center" />
</StackPanel>
</DataTemplate>
</treeView:SfTreeView.ItemTemplate>
</treeView:SfTreeView>
</Page>public class FileViewModel : INotifyPropertyChanged
{
public ObservableCollection<FileNode> Files { get; set; }
public FileViewModel()
{
Files = new ObservableCollection<FileNode>
{
new FileNode
{
FileName = "Documents",
SubFiles = new ObservableCollection<FileNode>
{
new FileNode { FileName = "Resume.docx" },
new FileNode { FileName = "CoverLetter.pdf" }
}
},
new FileNode
{
FileName = "Downloads",
SubFiles = new ObservableCollection<FileNode>()
}
};
}
public event PropertyChangedEventHandler PropertyChanged;
}
public class FileNode : INotifyPropertyChanged
{
private string _fileName;
private ObservableCollection<FileNode> _subFiles;
public string FileName
{
get => _fileName;
set { _fileName = value; OnPropertyChanged(); }
}
public ObservableCollection<FileNode> SubFiles
{
get => _subFiles;
set { _subFiles = value; OnPropertyChanged(); }
}
public event PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChanged([CallerMemberName] string name = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
}
}<Page xmlns:treeView="using:Syncfusion.UI.Xaml.TreeView">
<Page.DataContext>
<local:FileViewModel />
</Page.DataContext>
<treeView:SfTreeView x:Name="treeView"
Width="400"
Height="500"
ChildPropertyName="SubFiles"
ItemsSource="{Binding Files}">
<treeView:SfTreeView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="📁" Margin="0,0,5,0" />
<TextBlock Text="{Binding FileName}"
VerticalAlignment="Center" />
</StackPanel>
</DataTemplate>
</treeView:SfTreeView.ItemTemplate>
</treeView:SfTreeView>
</Page>public class FileViewModel : INotifyPropertyChanged
{
public ObservableCollection<FileNode> Files { get; set; }
public FileViewModel()
{
Files = new ObservableCollection<FileNode>
{
new FileNode
{
FileName = "Documents",
SubFiles = new ObservableCollection<FileNode>
{
new FileNode { FileName = "Resume.docx" },
new FileNode { FileName = "CoverLetter.pdf" }
}
},
new FileNode
{
FileName = "Downloads",
SubFiles = new ObservableCollection<FileNode>()
}
};
}
public event PropertyChangedEventHandler PropertyChanged;
}
public class FileNode : INotifyPropertyChanged
{
private string _fileName;
private ObservableCollection<FileNode> _subFiles;
public string FileName
{
get => _fileName;
set { _fileName = value; OnPropertyChanged(); }
}
public ObservableCollection<FileNode> SubFiles
{
get => _subFiles;
set { _subFiles = value; OnPropertyChanged(); }
}
public event PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChanged([CallerMemberName] string name = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
}
}<treeView:SfTreeView ItemsSource="{Binding Items}"
ChildPropertyName="Children">
<treeView:SfTreeView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<FontIcon Glyph="{Binding Icon}"
FontSize="16"
Margin="0,0,8,0" />
<TextBlock Text="{Binding Name}" />
</StackPanel>
</DataTemplate>
</treeView:SfTreeView.ItemTemplate>
</treeView:SfTreeView><treeView:SfTreeView ItemsSource="{Binding Items}"
ChildPropertyName="Children">
<treeView:SfTreeView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<FontIcon Glyph="{Binding Icon}"
FontSize="16"
Margin="0,0,8,0" />
<TextBlock Text="{Binding Name}" />
</StackPanel>
</DataTemplate>
</treeView:SfTreeView.ItemTemplate>
</treeView:SfTreeView><treeView:SfTreeView SelectionMode="Multiple"
CheckBoxMode="Recursive">
<!-- When parent checked, all children auto-check -->
</treeView:SfTreeView><treeView:SfTreeView SelectionMode="Multiple"
CheckBoxMode="Recursive">
<!-- 父节点选中时,所有子节点自动选中 -->
</treeView:SfTreeView><treeView:SfTreeView LoadOnDemand="True"
LoadOnDemandCommand="{Binding LoadChildrenCommand}">
<!-- Children load only when node expands -->
</treeView:SfTreeView><treeView:SfTreeView LoadOnDemand="True"
LoadOnDemandCommand="{Binding LoadChildrenCommand}">
<!-- 仅当节点展开时才加载子节点 -->
</treeView:SfTreeView>// Single selection
treeView.SelectedItem = viewModel.RootNode.Children[0];
// Multiple selection
treeView.SelectedItems.Add(node1);
treeView.SelectedItems.Add(node2);
// Select all nodes
treeView.SelectAll();// 单选
treeView.SelectedItem = viewModel.RootNode.Children[0];
// 多选
treeView.SelectedItems.Add(node1);
treeView.SelectedItems.Add(node2);
// 选中所有节点
treeView.SelectAll();<treeView:SfTreeView ItemHolding="OnItemHolding">
<!-- Show context menu on right-click/long-press -->
</treeView:SfTreeView>private void OnItemHolding(object sender, ItemHoldingEventArgs e)
{
var flyout = new MenuFlyout();
flyout.Items.Add(new MenuFlyoutItem { Text = "Rename" });
flyout.Items.Add(new MenuFlyoutItem { Text = "Delete" });
flyout.ShowAt(e.Element);
}<treeView:SfTreeView ItemHolding="OnItemHolding">
<!-- 右键/长按展示上下文菜单 -->
</treeView:SfTreeView>private void OnItemHolding(object sender, ItemHoldingEventArgs e)
{
var flyout = new MenuFlyout();
flyout.Items.Add(new MenuFlyoutItem { Text = "重命名" });
flyout.Items.Add(new MenuFlyoutItem { Text = "删除" });
flyout.ShowAt(e.Element);
}| Property | Type | Description |
|---|---|---|
| ItemsSource | object | Hierarchical data collection to bind |
| ChildPropertyName | string | Property name containing child items |
| SelectionMode | SelectionMode | Selection behavior (None, Single, Multiple, Extended) |
| SelectedItem | object | Currently selected item |
| SelectedItems | ObservableCollection | Collection of selected items |
| AllowEditing | bool | Enable inline editing |
| AllowDragging | bool | Enable drag-and-drop |
| AutoExpandMode | AutoExpandMode | Auto-expand behavior (None, AllNodes, RootNodes) |
| IsAnimationEnabled | bool | Enable expand/collapse animations |
| CheckBoxMode | CheckBoxMode | Checkbox behavior (None, Recursive) |
| LoadOnDemand | bool | Enable lazy loading of child nodes |
| 属性 | 类型 | 描述 |
|---|---|---|
| ItemsSource | object | 待绑定的层级数据集合 |
| ChildPropertyName | string | 存储子项的属性名称 |
| SelectionMode | SelectionMode | 选择行为(None、Single、Multiple、Extended) |
| SelectedItem | object | 当前选中项 |
| SelectedItems | ObservableCollection | 选中项集合 |
| AllowEditing | bool | 启用行内编辑 |
| AllowDragging | bool | 启用拖拽功能 |
| AutoExpandMode | AutoExpandMode | 自动展开行为(None、AllNodes、RootNodes) |
| IsAnimationEnabled | bool | 启用展开/折叠动画 |
| CheckBoxMode | CheckBoxMode | 复选框行为(None、Recursive) |
| LoadOnDemand | bool | 启用子节点懒加载 |
| Method | Description |
|---|---|
| ExpandAll() | Expands all nodes in the tree |
| CollapseAll() | Collapses all nodes |
| ExpandNode(TreeViewNode) | Expands specific node |
| CollapseNode(TreeViewNode) | Collapses specific node |
| SelectAll() | Selects all nodes |
| ClearSelection() | Clears all selections |
| BringIntoView(TreeViewNode) | Scrolls to make node visible |
| 方法 | 描述 |
|---|---|
| ExpandAll() | 展开树中所有节点 |
| CollapseAll() | 折叠所有节点 |
| ExpandNode(TreeViewNode) | 展开指定节点 |
| CollapseNode(TreeViewNode) | 折叠指定节点 |
| SelectAll() | 选中所有节点 |
| ClearSelection() | 清除所有选中状态 |
| BringIntoView(TreeViewNode) | 滚动到指定节点使其可见 |
| Event | Description |
|---|---|
| SelectionChanged | Fired when selection changes |
| ItemTapped | Fired when node is tapped |
| ItemDoubleTapped | Fired when node is double-tapped |
| NodeExpanding | Fired before node expands |
| NodeExpanded | Fired after node expands |
| NodeCollapsing | Fired before node collapses |
| NodeCollapsed | Fired after node collapses |
| ItemBeginEdit | Fired when editing starts |
| ItemEndEdit | Fired when editing ends |
| 事件 | 描述 |
|---|---|
| SelectionChanged | 选中状态变更时触发 |
| ItemTapped | 节点被点击时触发 |
| ItemDoubleTapped | 节点被双击时触发 |
| NodeExpanding | 节点展开前触发 |
| NodeExpanded | 节点展开后触发 |
| NodeCollapsing | 节点折叠前触发 |
| NodeCollapsed | 节点折叠后触发 |
| ItemBeginEdit | 编辑开始时触发 |
| ItemEndEdit | 编辑结束时触发 |
| Issue | Solution |
|---|---|
| Nodes not expanding | Check ChildPropertyName matches property name exactly |
| Selection not working | Set SelectionMode to Single or Multiple |
| Data not updating | Implement INotifyPropertyChanged on data models |
| Children not loading | Set NotificationSubscriptionMode to CollectionChanged |
| Poor performance | Enable OnDemand mode and LoadOnDemand |
| Editing not enabled | Set AllowEditing="True" and define EditTemplate |
| Drag-drop not working | Set both AllowDragging and AllowDrop to true |
| 问题 | 解决方案 |
|---|---|
| 节点无法展开 | 检查ChildPropertyName是否与属性名称完全匹配 |
| 选择功能失效 | 将SelectionMode设置为Single或Multiple |
| 数据不更新 | 在数据模型上实现INotifyPropertyChanged |
| 子节点加载失败 | 将NotificationSubscriptionMode设置为CollectionChanged |
| 性能不佳 | 启用OnDemand模式和LoadOnDemand |
| 编辑功能未启用 | 设置AllowEditing="True"并定义EditTemplate |
| 拖拽功能失效 | 同时将AllowDragging和AllowDrop设置为true |
getting-started.mdgetting-started.md