WPF如何用TreeView制作好友列表、播放列表

前言

  TreeView这个控件对于我来说是用得比较多的,以前做的小聊天软件(好友列表)、音乐播放器(播放列表)、类库展示器(树形类结构)等都用的是TreeView,下面以一个好友列表为例,说明一下制作过程,这个过程可以搬迁到其他类似的场景中去(树形结构的场景)。

结果展示

  

制作过程

  一:新建一个WPF工程,我命名为TreeViewDemo。(这步不解释)

  二:准备图片,就是系统头像。在工程中新建一个Heads文件夹,并且添加系统头像图片,最后不要忘记需要把生成方式改为Resource、不复制,这样才能用标准的Pack URI的方式来读取到图片。(我喜欢用Pack Uri,因为比较通用,安全)  下载头像

  三:好了,资源图片准备好了以后,来定义数据类,在这里我们需要用到两个类,一个代表好友,一个代表好友列表(对应的音乐播放器就是音乐和音乐列表)。

  1.Friend(好友)

class Friend
{
public Friend(FriendList list)
{
this.List = list;
}
//头像的路径
public String HeadPath { set; get; }
//好友名字
public String Name { set; get; }
//签名
public String Autograph { set; get; } public FriendList List { set; get; } }

  2.FriendList(好友列表)

class FriendList
{
public FriendList(String name)
{
this.ListName = name;
}
public String ListName { set; get; } private ObservableCollection<Friend> _friends = new ObservableCollection<Friend>();
public ObservableCollection<Friend> Friends
{
private set{}
get
{
return _friends;
}
} public void AddFriend(Friend newFriend)
{
_friends.Add(newFriend);
} public void RemoveFriend(Friend friend)
{
_friends.Remove(friend);
}
}

  四:这一步是重点,就是在一个TreeView的节点中,如何去区分Friend和FriendList呢?我使用模板,我分别为Friend和FriendList定义属于它们各自的模板,一起定义在一个字典中,新建一个字典,我命名为GlobeDictionary。这里应该要用的是数据模板(DataTemplate),系统有一个数据模板叫HierarchicalDataTemplate,这个模板专门用于有头部和子数据的数据结构的,用在这个TreeView中刚好合适。

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:TreeViewDemo"> <HierarchicalDataTemplate DataType="{x:Type local:FriendList}" ItemsSource="{Binding Path=Friends,UpdateSourceTrigger=PropertyChanged, Mode=OneWay}" x:Key="ListTemple" >
<Border x:Name="bord" Margin="-1,-1,0,-1">
<TextBlock Text="{Binding Path=ListName, Mode=TwoWay}" HorizontalAlignment="Left" Width="" Padding="" FontSize=""></TextBlock>
</Border>
</HierarchicalDataTemplate>
<HierarchicalDataTemplate DataType="{x:Type local:Friend}" x:Key="FriendTemple">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width=""></ColumnDefinition>
<ColumnDefinition Width=""></ColumnDefinition>
</Grid.ColumnDefinitions>
<Image Source="{Binding Path=HeadPath}" ></Image>
<StackPanel Orientation="Horizontal" Grid.Column="" Margin="6,2,2,2">
<StackPanel Orientation="Vertical">
<TextBlock Text="{Binding Path=Name}" Height="" HorizontalAlignment="Left" ></TextBlock>
<TextBlock Text="{Binding Path=Autograph}" Height="" HorizontalAlignment="Left"></TextBlock>
</StackPanel>
</StackPanel>
</Grid>
</HierarchicalDataTemplate> </ResourceDictionary>

  (注意:因为需要再这里引用自定义类,所以命名空间local的引入一定要正确,冲上面的定义可以看出,好友列表只显示名字,好友就用Grid来组织一个类QQ的布局,头像,签名等。)

  五:主界面。

  主界面比较简单,在这个Demo中,只使用TreeView控件。

<Window x:Class="TreeViewDemo.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:TreeViewDemo"
Title="MainWindow" Height="" Width="">
<Grid>
<TreeView x:Name="ListTV" ></TreeView>
</Grid>
</Window>

  

  六:有了躯壳,我们填入灵魂(数据绑定和数据模板应用)。

  模板有两个,直接填充TreeView的ItemTemplate属性是不行的,但是WPF中有一个思想很重要(Selector、Converter等),在TreeView中有一个属性ItemTemplateSelector。所以,新建一个Selector类,继承DataTemplateSelector:

class FriendOrListTemplateSelector : DataTemplateSelector
{
public override DataTemplate SelectTemplate(object item, DependencyObject container)
{
ResourceDictionary directory = new ResourceDictionary();
directory.Source = new Uri("pack://Application:,,,/GlobeDictionary.xaml", UriKind.RelativeOrAbsolute);//使用pack uri载入模板字典
if (item != null && item is FriendList)
{
return directory["ListTemple"] as DataTemplate;
}
return directory["FriendTemple"] as DataTemplate;
}
}

  首先使用pack uri加载位于当前exe程序集中的字典资源(如果加载不了,请将字典生成方式改为Resource),然后根据传入的数据类型来返回对应的DataTemplate,这样就能有效的自动选择模板。

  模板能自动选择了,另外数据怎么提供呢,我们使用在WPF中最常用的DataContext绑定来填充ItemsSource。下面看主界面的完整代码。

<Window x:Class="TreeViewDemo.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:TreeViewDemo"
Title="MainWindow" Height="" Width="">
<Grid>
<Grid.Resources>
<local:FriendOrListTemplateSelector x:Key="Myselector"></local:FriendOrListTemplateSelector>
</Grid.Resources>
<TreeView x:Name="ListTV"
ItemsSource="{Binding Path=DataContext, Mode=TwoWay,RelativeSource={RelativeSource Mode=Self}}"
ItemTemplateSelector="{StaticResource Myselector}" >
</TreeView>
</Grid>
</Window>

  这里的命名空间local是FriendOrListTemplateSelector所在的命名空间中,请填写对。最后在主界面的代码中加入数据,测试一下。

public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
ObservableCollection<FriendList> Root = new ObservableCollection<FriendList>();
FriendList listOne = new FriendList("高中同学");
Friend friend1 = new Friend(listOne) { Autograph = "今天很开心,遇到了XX", HeadPath = "Heads/h1.png", Name = "天煞" };
Friend friend2 = new Friend(listOne) { Autograph = "非一般的感觉", HeadPath = "Heads/h2.png", Name = "Basx" };
Friend friend3 = new Friend(listOne) { Autograph = "WER", HeadPath = "Heads/h3.png", Name = "Paul" };
Friend friend4 = new Friend(listOne) { Autograph = "~终于完成作业了~~!", HeadPath = "Heads/h4.png", Name = "孤星月" };
listOne.AddFriend(friend1);
listOne.AddFriend(friend2);
listOne.AddFriend(friend3);
listOne.AddFriend(friend4);
FriendList listTwo = new FriendList("大一");
Friend friend5 = new Friend(listOne) { Autograph = "你的存在", HeadPath = "Heads/h5.png", Name = "菲菲" };
listTwo.AddFriend(friend5);
Root.Add(listOne);
Root.Add(listTwo);
this.ListTV.DataContext = Root;
}
}

  大功告成~!

总结

  过程比较简单,但是最重要的是学习其方法,有几点通用的知识需要注意的:

    1.Xaml中需要使用自定义类的时候,需要在头部xmlns中添加一项,并且确保命名空间是对的。

    2.Pack URI的使用,任何资源的引用都可以使用Pack URI,下面举两个例子:

      *pack://Application:,,,/路径/路径/文件名(带后缀)    <-这种方式是引用当前程序集的Resouce资源的。

      *pack://Application:,,,/引用的程序集名称;component/路径/路径/文件名(带后缀)<-这种方式是引用其他程序集的Resouce资源的。

    3.选择器(Selecter),转换器(Converter)等的思想要深入理解。

    4.数据模板是为数据定制外观,例如这里就为Friend和FriendList定制了外观了。

                                                完整Demo下载

WPF如何用TreeView制作好友列表、播放列表的更多相关文章

  1. WPF如何用TreeView制作好友列表、播放列表(转)

    WPF如何用TreeView制作好友列表.播放列表 前言 TreeView这个控件对于我来说是用得比较多的,以前做的小聊天软件(好友列表).音乐播放器(播放列表).类库展示器(树形类结构)等都用的是T ...

  2. java在线聊天项目 swt可视化窗口Design 好友列表窗口

    熟练使用各种布局方式 FlowLayout 流布局 left center right等 BorderLayout 边框布局 east west sorth north center Absolute ...

  3. Windows UIA自动化测试框架学习--获取qq好友列表

    前段时间应公司要求开发一款针对现有WPF程序的自动化测试工具,在网上查资料找了一段时间,发现用来做自动化测试的框架还是比较多的,比如python的两个模块pywinauto和uiautomation, ...

  4. JTree实现好友列表

    最近学习了一下JTree的使用方法: 先来看一下树的实例: 构建一个树, DefaultMutableTreeNode root = new DefaultMutableTreeNode(" ...

  5. OS开发UI篇—使用UItableview完成一个简单的QQ好友列表

    本文转自:http://www.cnblogs.com/wendingding/p/3763330.html 一.项目结构和plist文件 二.实现代码 1.说明: 主控制器直接继承UITableVi ...

  6. XMPP框架下微信项目总结(5)花名册获取(好友列表)

    ---->概念 ---->添加花名册 ps:添加花名册,启动: 客户端发送请求到服务器获取好友列表信息,同时在项目中创建数据表,并保存好友列表到数据表中. ---->获取服务器保存好 ...

  7. 一步一步来做WebQQ机器人-(四)(获取好友列表和群列表)

    × 本篇主要是: 获取好友列表,群列表 我会尽量详细一点,尽我所知的分享一些可能大家已经掌握的或者还不清楚的经验 利于大家阅读,文章样式不再复杂化,根据内容取固定色 目前总进度大概65% 全系列预计会 ...

  8. iOS开发UI篇—使用UItableview完成一个简单的QQ好友列表(一)

    iOS开发UI篇—使用UItableview完成一个简单的QQ好友列表(一) 一.项目结构和plist文件 二.实现代码 1.说明: 主控制器直接继承UITableViewController // ...

  9. iOS开发UI篇—使用UItableview完成一个简单的QQ好友列表(二)

    一.实现效果             二.实现代码 1.数据模型部分 YYQQGroupModel.h文件 // // YYQQGroupModel.h // 02-QQ好友列表(基本数据的加载) / ...

随机推荐

  1. SAP 订单状态跟踪

    *&--------------------------------------------------------------------- *& Program name:  *& ...

  2. Error: pathspec &#39;*&#39; did not match any file(s) known to git.

    git切换分支报错 error: pathspec 'develop' did not match any file(s) known to git. 解决办法如下: plumm@MACY-PC MI ...

  3. document.body / document.ducumentElement /等获取高度和宽度的区别 ----转载

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  4. 处理链方式执行APD处理

    于在处理链的标准处理类型中没有针对APD的处理类型,所以如果APD处理过程设计好后,需要在处理链中安排计划,每天自动运行,就需要用到特殊的处理方法.步骤如下:     1.在se38中运行程序RSAN ...

  5. Engine中如何更改lyr文件数据源的相对路径

    以下是使用relativebase存储layerfile的代码,如果需要修改数据源只要修改ILayer即可: string folderpath = @E:相对路径; string layerfile ...

  6. [转]Linux进程间通信——使用信号

    转载于:http://blog.csdn.net/ljianhui/article/details/10128731         经典!!! Linux进程间通信——使用信号 一.什么是信号 用过 ...

  7. [HDOJ4612]Warm up(双连通分量,缩点,树直径)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4612 所有图论题都要往树上考虑 题意:给一张图,仅允许添加一条边,问能干掉的最多条桥有多少. 必须解决 ...

  8. cf Round 601

    A.The Two Routes(BFS) 给出n个城镇,有m条铁路,铁路的补图是公路,汽车和火车同时从1出发,通过每条路的时间为1,不能同时到达除了1和n的其它点,问他们到达n点最少要用多长时间. ...

  9. 在qt下获取屏幕分辨率

    1,在Windows下可以使用 GetSystemMetrics(SM_CXSCREEN);GetSystemMetrics(SM_CYSCREEN) 获取.   2,在Linux下可以使用XDisp ...

  10. 推荐一些C#相关的网站、资源和书籍 (转载自http://www.cnblogs.com/jiangxiaofan/p/3808316.html)

    推荐一些C#相关的网站.资源和书籍 (转载自http://blog.csdn.net/chinacsharper/article/details/17514923)   一.网站 1.http://m ...