【WPF】树形结构TreeView的用法（MVVM） - 霍莉雪特 - 博客园
TreeView控件的用法还是有蛮多坑点的，最好记录一下。
参考项目：
静态的树形结构
如果树形结构的所有子节点都已经确定且不会改动，可以直接在控制层用C#代码来生成这个TreeView。
; "复制代码")
var rootItem = new OutlineTreeData
{
outlineTypeName = "David Weatherbeam",
Children= { new OutlineTreeData
{
outlineTypeName="Alberto Weatherbeam",
Children= { new OutlineTreeData
{
outlineTypeName="Zena Hairmonger",
Children= { new OutlineTreeData
{
outlineTypeName="Sarah Applifunk",
}
}
},new OutlineTreeData
{
outlineTypeName="Jenny van Machoqueen",
Children= { new OutlineTreeData
{
outlineTypeName="Nick van Machoqueen",
}, new OutlineTreeData
{
outlineTypeName="Matilda Porcupinicus",
}, new OutlineTreeData
{
outlineTypeName="Bronco van Machoqueen",
}
}
}
}
}, new OutlineTreeData
{
outlineTypeName="Komrade Winkleford",
Children= { new OutlineTreeData
{
outlineTypeName="Maurice Winkleford",
Children= { new OutlineTreeData
{
outlineTypeName="Divinity W. Llamafoot",
}
}
}, new OutlineTreeData
{
outlineTypeName="Komrade Winkleford, Jr.",
Children= { new OutlineTreeData
{
outlineTypeName="Saratoga Z. Crankentoe",
}, new OutlineTreeData
{
outlineTypeName="Excaliber Winkleford",
}
}
}
}
}
}
};
; "复制代码")
运行后能看到树形结构是下面的样子。
- *
获取TreeViewItem控件
前台页面xaml：
; "复制代码")
<!-- 树形结构 -->
<TreeView x:Name="treeView" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="10,-10,0,0" ItemsSource="{Binding ItemTreeDataList}" BorderThickness="0" Width="215" Height="210">
<TreeView.ItemContainerStyle>
<Style TargetType="{x:Type TreeViewItem}"> <Setter Property="IsExpanded" Value="{Binding IsExpanded, Mode=TwoWay}" />
<Setter Property="IsSelected" Value="{Binding IsSelected, Mode=TwoWay}" />
<Setter Property="FontWeight" Value="Normal" />
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="FontWeight" Value="Bold" />
</Trigger> </Style.Triggers>
</Style>
</TreeView.ItemContainerStyle>
<TreeView.ItemTemplate>
<HierarchicalDataTemplate ItemsSource="{Binding Children}">
<TextBlock x:Name="treeViewItemTB" Text="{Binding itemName}" Tag="{Binding itemId}"/>
</HierarchicalDataTemplate>
</TreeView.ItemTemplate></TreeView>
; "复制代码")
尝试过在初始化时获取TreeViewItem，发现都是为Null。
- TreeViewItem item= (TreeViewItem)(myWindow.treeView.ItemContainerGenerator.ContainerFromIndex(0)); // 无法获取，为Null！
- VisualTreeHelper.GetChild(); // 无法获取，为Null！
谷歌一下，看到这篇解答，下面这位跟我遇到的情况一样，用以上方法都无法获取TreeViewItem。
不过他给出的答案是通过点击来获取到被选中的TreeViewItem。
- *
给TreeView默认选中一个TreeViewItem
上面的办法通过点击TreeViewItem来从事件中获得这个控件，但是如果我们想生成TreeView后不靠手动点击，立马自动选中一个默认的TreeViewItem呢？注意此时控件还未渲染，通过ItemContainerGenerator无法获取到控件。
此时只能考虑使用MVVM的绑定机制来获取控件！因为如果修改数据后，UI的更新是延迟的，无法立刻获取到前台控件。
绑定：
xaml中TreeView的ItemsSource绑定到ViewModel中的ItemTreeDataList列表，该列表中的元素类型是自定义ItemTreeData实体类。在样式中绑定好IsExpanded和IsSelected属性。TreeViewItem模板是绑定到Children属性，该属性在ItemTreeData实体类中。
ViewModel：
; "复制代码")
// Item的树形结构
private ObservableCollection<ItemTreeData> itemTreeDataList; public ObservableCollection<ItemTreeData> ItemTreeDataList
{ get { return itemTreeDataList; } set { SetProperty(ref itemTreeDataList, value); }
}
; "复制代码")
ItemTreeData实体类：
; "复制代码")
public class ItemTreeData // 自定义Item的树形结构{ public int itemId { get; set; } // ID
public string itemName { get; set; } // 名称
public int itemStep { get; set; } // 所属的层级
public int itemParent { get; set; } // 父级的ID
private ObservableCollection<ItemTreeData> _children = new ObservableCollection<ItemTreeData >(); public ObservableCollection<ItemTreeData> Children { // 树形结构的下一级列表
get { return _children;
}
} public bool IsExpanded { get; set; } // 节点是否展开
public bool IsSelected { get; set; } // 节点是否选中
}
; "复制代码")
关于上面的层级/父级/下一级的概念，假设现在树形结构为以下结构，从上往下依此定义为根节点、零级节点、一级节点、二级节点。
; "复制代码")
/* * rootItem
* |----zeroTreeItem
* |----firstTreeItem
* |----secondTreeItem */
; "复制代码")
控制层在生成TreeView时通过绑定的属性来设置默认选中的Item，预先将三个层级的Item分别装在不同的列表中使用。
现在尝试把二级节点中的第一个Item作为默认选中的Item。关键代码如下：
; "复制代码")
// 构造轮廓选择的树形结构
private void InitTreeView()
{ // 添加树形结构
ItemTreeData item = GetTreeData();
myViewModel.ItemTreeDataList.Clear();
myViewModel.ItemTreeDataList.Add(item);
} // 构造树形结构
private ItemTreeData GetTreeData()
{ /* \* rootItem
\* |----zeroTreeItem
\* |----firstTreeItem
\* |----secondTreeItem */
// 根节点
ItemTreeData rootItem = new ItemTreeData();
rootItem.itemId = -1;
rootItem.itemName = " \-\- 请选择轮廓 \-\- ";
rootItem.itemStep = -1;
rootItem.itemParent = -1;
rootItem.IsExpanded = true; // 根节点默认展开
rootItem.IsSelected = false; for (int i = 0; i < itemViewModel.ZeroStepList.Count; i++) // 零级分类{
Items zeroStepItem = itemViewModel.ZeroStepList\[i\];
ItemTreeData zeroTreeItem = new ItemTreeData();
zeroTreeItem.itemId = zeroStepItem.itemId;
zeroTreeItem.itemName = zeroStepItem.itemName;
zeroTreeItem.itemStep = zeroStepItem.itemSteps;
zeroTreeItem.itemParent = zeroStepItem.itemParent; if (i == 0)
{
zeroTreeItem.IsExpanded = true; // 只有需要默认选中的第一个零级分类是展开的}
zeroTreeItem.IsSelected = false;
rootItem.Children.Add(zeroTreeItem); // 零级节点无条件加入根节点
for (int j = 0; j < itemViewModel.FirstStepList.Count; j++) // 一级分类{
Items firstStepItem = itemViewModel.FirstStepList\[j\]; if (firstStepItem.itemParent == zeroStepItem.itemId) //零级节点添加一级节点{
ItemTreeData firstTreeItem = new ItemTreeData();
firstTreeItem.itemId = firstStepItem.itemId;
firstTreeItem.itemName = firstStepItem.itemName;
firstTreeItem.itemStep = firstStepItem.itemSteps;
firstTreeItem.itemParent = firstStepItem.itemParent; if (j == 0)
{
firstTreeItem.IsExpanded = true; // 只有需要默认选中的第一个一级分类是展开的}
firstTreeItem.IsSelected = false;
zeroTreeItem.Children.Add(firstTreeItem); for (int k = 0; k < itemViewModel.SecondStepList.Count; k++) // 二级分类{
Items secondStepItem = itemViewModel.SecondStepList\[k\]; if (secondStepItem.itemParent == firstStepItem.itemId) // 一级节点添加二级节点{
ItemTreeData secondTreeItem = new ItemTreeData();
secondTreeItem.itemId = secondStepItem.itemId;
secondTreeItem.itemName = secondStepItem.itemName;
secondTreeItem.itemStep = secondStepItem.itemSteps;
secondTreeItem.itemParent = secondStepItem.itemParent; if (k == 0)
{ // 默认选中第一个二级分类
secondTreeItem.IsExpanded = true; // 已经没有下一级了，这个属性无所谓
secondTreeItem.IsSelected = true;
}
firstTreeItem.Children.Add(secondTreeItem);
}
}
}
}
} return rootItem;
}
; "复制代码")
通过初始化时给被绑定的属性赋值，使得TreeView默认选中了二级节点中的第一个TreeViewItem，效果如下图：
注意点：
- 只是修改目标节点的IsSelected = true还不够，还要把它的所有父节点（祖父节点）都设置IsExpanded = true才行！！！
- *
显示选中TreeViewItem的完整分类路径
需求是如上图，要得到字符串"I户型_1.5-1_a2"，即通过下划线连接得到“零级节点_一级节点_二级节点”，然后用一个TextBlock控件显示出来。注意这里不包含root根节点。
该功能可以写在树形结构的选项改变事件中。因为初始化TreeView时就选中了其中一个Item，所以初始化时也会调用到选项改变事件。
; "复制代码")
// 树形结构的选项改变事件
private void TreeView_SelectedItemChanged(object sender, RoutedPropertyChangedEventArgs<object> e)
{
ItemTreeData selectedItem = (ItemTreeData)(myWindow.treeView.SelectedItem); if (selectedItem != null)
{ // UI层找不到，只能在数据层找
List<string\> nameList = new List<string>(); int step = selectedItem.itemStep; // 可能值为：-1,0,1,2
int parentId = selectedItem.itemParent; // 临时保存遍历中每次使用的Id
for (int i = 0; i < step; i++) // 零级分类虽然有父节点root，但是数据层中没有相应的itemParent值（为-1）{
ItemTreeData parent = this.GetTreeDataById(parentId); if (parent != null)
{
nameList.Add(parent.itemName);
parentId = parent.itemParent;
}
} // 组拼字符串 = 零级名称 \+ 一级名称 \+ 二级名称
string text = ""; for (int i = nameList.Count; i > 0; i--) // 倒序遍历{ if (i == nameList.Count)
{
text = nameList\[i - 1\];
} else {
text = text + "_" \+ nameList\[i - 1\];
}
} if (string.IsNullOrEmpty(text))
{
myWindow.itemSelectedTB.Text = selectedItem.itemName;
} else {
myWindow.itemSelectedTB.Text = text + "_" + selectedItem.itemName;
}
}
} // 根据Id，获得树形结构中指定的Item
private ItemTreeData GetTreeDataById(int targetId)
{
ItemTreeData data = null; // 是否为根节点
ItemTreeData root = myViewModel.ItemTreeDataList\[0\]; if (root.itemId == targetId)
{
data = root; return data;
} // 搜索零级大类
foreach (ItemTreeData zeroStepData in root.Children)
{ if (zeroStepData.itemId == targetId)
{
data = zeroStepData; return data;
} // 搜索一级分类
foreach (ItemTreeData firstStepData in zeroStepData.Children)
{ if (firstStepData.itemId == targetId)
{
data = firstStepData; return data;
} // 搜索二级分类
foreach (ItemTreeData secondStepData in firstStepData.Children)
{ if (secondStepData.itemId == targetId)
{
data = secondStepData; return data;
}
}
}
} return data;
}
; "复制代码")
注意点：
- 同样是找不到TreeViewItem控件！UI层找不到，所以只能在数据层找它关联的ItemTreeData对象，从数据层中去获取itemName属性值。
- 因为每一级ItemTreeData对象中记录了它的父级ID，所以往根节点方向遍历父节点、祖父节点时，先加入到List中的是上一级的节点名。而需求是“零级节点_一级节点_二级节点”的顺序，所以在使用List时需要倒序遍历！
最后显示的完整分类如下：
原网址: 访问
创建于: 2024-06-19 18:46:23
目录: default
标签: 无
未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到
最新评论