这个帖子本来是不想写的,但是感觉网上类似的也没有,对于小白可能有点用,于是想着还是写一下吧。

写之前想说下,UWP其实并没有死掉,对于win10来说,以后的新设备肯定是支持UWP的,而且微软一直在完善win10所以做dotnet的同学可以偶尔玩玩UWP,像我就是,技术不咋地,但偶尔还会玩玩。

言归正传,这个treeview控件之前在1809前的版本是没有的,而且大家都唱衰uwp所以用uwp的人也很少,以至于这个控件也很少有人用。

我用这个控件主要是用来作为目录选项用的,我开发了一个第三方的Zaker这个资讯app,这个app算是我练手项目吧。

大家商店搜索zaker,带uwp的应该就是我的了。我就不放链接了,下面是图片。

最有边的就是treeview,大家感觉怎么样呢?

好了,首先我们要新建个UWP项目,空白的就行。新建完我们就需要安装一个库了。这个是Microsoft.UI.Xaml这个库是微软开源的winui,从名字能看出,Microsoft.UI.Xaml和Windows.UI.Xaml很像,是的,微软打算将UWP的UI和运行时分开维护,这样Winui也可以快速迭代了。

这个是WinUI源码的地址

下面是项目的结构图。

很简单的一个demo,我们要在mainpage准备一个Treeview控件,和三个数据模板,用来匹配treeview的不同级别的样式,比如一级的时候有图片和文字,而里面的没有图片只有文字。

在page的.resources里添加数据模板和模板选择器。

 <Page.Resources>
<DataTemplate x:Key="FolderTemplate"
x:DataType="data:Son">
<muxcontrols:TreeViewItem AutomationProperties.Name="{Binding title}"
ItemsSource="{Binding sons}"
Width="400"
IsExpanded="False">
<StackPanel Orientation="Horizontal">
<Image Width="28" Source="{Binding list_icon}"/>
<TextBlock Margin="0,0,10,0"/>
<TextBlock Text="{Binding title}" FontSize="28"/>
</StackPanel>
</muxcontrols:TreeViewItem>
</DataTemplate> <DataTemplate x:Key="FolderTemplate1"
x:DataType="data:Son">
<muxcontrols:TreeViewItem AutomationProperties.Name="{Binding title}"
ItemsSource="{Binding sons}"
Width="360"
IsExpanded="False">
<StackPanel Orientation="Horizontal">
<TextBlock Margin="0,0,10,0" />
<TextBlock Text="{Binding title}"
FontSize="28" />
</StackPanel>
</muxcontrols:TreeViewItem>
</DataTemplate> <DataTemplate x:Key="FileTemplate"
x:DataType="data:Son">
<muxcontrols:TreeViewItem AutomationProperties.Name="{Binding title}"
Width="320"
IsExpanded="False">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<StackPanel Orientation="Horizontal"
Width="320"
Grid.Column="1">
<TextBlock Margin="0,0,10,0" />
<TextBlock Text="{Binding title}"
FontSize="24" /> </StackPanel>
<Button Command="{Binding SwitchThemeCommand }"
CommandParameter="{Binding}"
HorizontalAlignment="Right"
Grid.Column="0"
Background="Transparent"
CornerRadius="4"
Content="{x:Bind BtnText,Mode=TwoWay}" />
</Grid> </muxcontrols:TreeViewItem>
</DataTemplate>
<local:ExplorerItemTemplateSelector
x:Key="ExplorerItemTemplateSelector"
FolderTemplate="{StaticResource FolderTemplate}"
FileTemplate="{StaticResource FileTemplate}"
FolderTemplate1="{StaticResource FolderTemplate1}" />
</Page.Resources>

还有一个模板选择器 这个模板选择器,大家如果有做过wpf应该能知道,我也没有深入了解,简单里的理解 就是一个类,然后根本数据本身的结构返回不同的模板,这样可以根据数据进行适当的展示。

  public class ExplorerItemTemplateSelector : DataTemplateSelector
{
public DataTemplate FolderTemplate { get; set; }
public DataTemplate FolderTemplate1 { get; set; }
public DataTemplate FileTemplate { get; set; } protected override DataTemplate SelectTemplateCore(object item)
{
var explorerItem = (Son)item;
//var explorerItem = explorer.Content as Son;
if (!string.IsNullOrEmpty(explorerItem.list_icon))
{
return FolderTemplate;
}
else if (string.IsNullOrEmpty(explorerItem.list_icon) && explorerItem.sons != null && explorerItem.sons.Count > 0)
{
return FolderTemplate1;
}
else
{
return FileTemplate;
}
// return FolderTemplate;
// return explorerItem.sons!=null ? FolderTemplate : FileTemplate;
}
}

准备好了数据模板,就差这个treeview本尊了,下面上代码:

 <Grid>
<muxcontrols:TreeView Name="TreeView1"
Margin="0,12,0,0"
Width="800"
HorizontalAlignment="Center"
VerticalAlignment="Top"
SelectionMode="None"
ItemTemplateSelector="{StaticResource ExplorerItemTemplateSelector}"
>
</muxcontrols:TreeView>
</Grid>

有的同学肯定会疑惑这个muxcontrols是个什么玩意,其实就一个引入命名空间的表示,下面里就能看出来。



大家看了上面的动图,可能会有疑问,这个已订阅的ui更新是怎么实现的,然后这个事件是怎么触发的,大家在数据模板里,应该能看到一个绑定的指令。

在后台的属性里有个继承了INotifyPropertyChanged的类,在里面有个指令绑定,大家看代码

  private ICommand _switchThemeCommand;

        public ICommand SwitchThemeCommand
{
get
{
if (_switchThemeCommand == null)
{
_switchThemeCommand = new RelayCommand<Son>(
(param) =>
{
var par = param as Son;
IsAdded = !IsAdded;
if (isAdded == true)
{ } else
{ }
BtnText = "已添加o";
// ElementTheme = param;
// await ThemeSelectorService.SetThemeAsync(param);
});
} return _switchThemeCommand;
}
}

大家可以在这里面处理一些逻辑,具体的大家可以搜搜这个按钮绑定指令的用法。

treeview商店有个官方的app是展示demo

Xaml-Controls-Gallery是app的名字如图是演示

这个是这个项目的源码地址,是微软维护的

帖子写到这就算是结束了,最后的最后当然是上我的demo的源码地址了。

这个是我的demo代码,写的有点丑大家将就下

UWP使用TreeView的更多相关文章

  1. [UWP]浅谈按钮设计

    一时兴起想谈谈UWP按钮的设计. 按钮是UI中最重要的元素之一,可能也是用得最多的交互元素.好的按钮设计可以有效提高用户体验,构造让人眼前一亮的UI.而且按钮通常不会影响布局,小小的按钮无论怎么改也不 ...

  2. [UWP]新控件ColorPicker

    1. 前言 Fall Creators Update中提供了一个新得ColorPicker控件,解决了以前选择颜色只能用Combo Box的窘境. 2. 一个简单的例子 <ColorPicker ...

  3. UWP 律师查询 MVVM

    APP简介 律师查询是基于聚合数据的律师查询接口做的,这个接口目前处于停用状态,但是,由于我是之前申请的,所以,还可以用,应该是无法再申请了. 效果图 开发 一.HttpHelper 既然是请求接口的 ...

  4. 领域驱动和MVVM应用于UWP开发的一些思考

    领域驱动和MVVM应用于UWP开发的一些思考 0x00 起因 有段时间没写博客了,其实最近本来是根据梳理的MSDN上的资料(UWP开发目录整理)有条不紊的进行UWP学习的.学习中有了心得体会或遇到了问 ...

  5. UWP中实现自定义标题栏

    UWP中实现自定义标题栏 0x00 起因 在UWP开发中,有时候我们希望实现自定义标题栏,例如在标题栏中加入搜索框.按钮之类的控件.搜了下资料居然在一个日文网站找到了一篇介绍这个主题的文章: http ...

  6. UWP中新加的数据绑定方式x:Bind分析总结

    UWP中新加的数据绑定方式x:Bind分析总结 0x00 UWP中的x:Bind 由之前有过WPF开发经验,所以在学习UWP的时候直接省略了XAML.数据绑定等几个看着十分眼熟的主题.学习过程中倒是也 ...

  7. MVVM框架从WPF移植到UWP遇到的问题和解决方法

    MVVM框架从WPF移植到UWP遇到的问题和解决方法 0x00 起因 这几天开始学习UWP了,之前有WPF经验,所以总体感觉还可以,看了一些基础概念和主题,写了几个测试程序,突然想起来了前一段时间在W ...

  8. UWP学习目录整理

    UWP学习目录整理 0x00 可以忽略的废话 10月6号靠着半听半猜和文字直播的补充看完了微软的秋季新品发布会,信仰充值成功,对UWP的开发十分感兴趣,打算后面找时间学习一下.谁想到学习的欲望越来越强 ...

  9. UWP开发必备:常用数据列表控件汇总比较

    今天是想通过实例将UWP开发常用的数据列表做汇总比较,作为以后项目开发参考.UWP开发必备知识点总结请参照[UWP开发必备以及常用知识点总结]. 本次主要讨论以下控件: GridView:用于显示数据 ...

随机推荐

  1. Razor_02 第一个应用程序+Model+EF 添加

    第一个应用程序+Model+EF 添加 小试牛刀 今天 也试了试 边说边写,但是 有时候 编辑器不给力,或者网路不给力,倒是浪费大家时间,所以今天录制完了就裁切了 部分视频,如果有不清楚的地方,可以留 ...

  2. H265码流分析

    H265相比较于H264,除了包含SPS.PPS外,还多包含一个VPS:在NALU header上,H.264的HALU header是一个字节,而H.265则是两个字节. 以OX4001为例,头信息 ...

  3. 剑指offer 20:顺时针打印矩阵

    题目描述 输入一个矩阵,按照从外向里以顺时针的顺序依次打印出每一个数字,例如,如果输入如下4 X 4矩阵: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 则依次打印出数 ...

  4. WC 个人项目 ( node.js 实现 )

    基于 node.js 的 wordCounter 个人项目 GitHub 项目地址:https://github.com/KofeChen/node.js-WordCounter 实现功能: 能够匹配 ...

  5. C# 集合的交集 差集 并集 去重

    C# 集合的交集 差集 并集 去重 两个对象list,直接比较是不行的,因为他们存的地址不一样 需要重写GetHashCode()与Equals(object obj)方法告诉电脑 class Stu ...

  6. Python控制流程

    if  elif    else的用法 三目运算符的用法 while 和 for 两种循环 break 和 continue 的用法 条件判断 if elif else if 和 elif 后面填的判 ...

  7. VSCode 如何同步设置

    微软新推出的 VSCode 是一款开源.轻量.良心的开发工具,一经问世,迅速受到全球广泛开发者的好评与青睐,威风之下有干掉 Sublime Text 的趋势.然而有不少 VSCode 使用者吐槽其不能 ...

  8. CodeForces - 1228C(质因数分解+贡献法)

    题意 https://vjudge.net/problem/CodeForces-1228C 首先先介绍一些涉及到的定义: 定义prime(x)表示x的质因子集合.举例来说,prime(140)={2 ...

  9. python函数内容

    在刚接触python的时候就有个疑问,什么是函数? python语言的函数和数学语言的函数有区别吗? 什么是函数 数学函数:给定一个数集A,假设其中的元素为x.现对A中的元素x施加对应法则f,记作f( ...

  10. 12. final修饰符

    一.final修饰符概述 1. final可以修饰类.变量和方法 2. final修饰的类.变量和方法不可改变 3. 不允许为final变量重新赋值,子类不允许覆盖父类的final方法,final类不 ...