用过一段时间的
Prism4
了,刚开始很不习惯,现在感觉这种松耦合机制是有它的道理。现在便是想整理一些东西出来,方便记忆吧。我们在实现MVVM模式的时候,前台View和后台ViewModel的交互就是通过绑定来实现的,其中控件触发事件的绑定有几种情况:
第一种,控件继承自ButtonBase、MenuItem类,比如:Button、RadioButton、Hyperlink、MenuItem……这种情况下,由于Prism已经帮我们实现了这些控件的Command属性,可以直接绑定Command属性来完成Click事件到ViewModel的绑定:
-
<Button Content=
"确认"
Command=
"{Binding LoginCommand}"
/>
LoginCommand便是ViewModel中的事件处理程序入口,它是一个实现了ICommand接口的命令:
-
private
DelegateCommand<
object
> _loginCommand;
-
public
ICommand LoginCommand
-
{
-
get
-
{
-
if
(_loginCommand ==
null
)
-
_loginCommand =
new
DelegateCommand<
object
>(OnLogin);
-
return
_loginCommand;
-
}
-
}
-
private
void
OnLogin(
object
obj)
-
{
-
-
}
这些控件除了Command属性外还可定义参数属性CommandParameter,用来传递参数给处理函数。
第二种,
不属于第一种类型的控件,比如,ListView、ListBox、DropDownList等等大部分没有Click事件的控件。这时候,当我们要实现SelectedItemChanged、SelectionChanged等常用事件的时候,需要通过继承CommandBehaviorBase<T>来自己定义这些事件,具体做法比较麻烦,有兴趣的朋友可以去看Prism的帮助文档,在第六章“Extending Prism Command Behaviors”这一节有讲述。
另外,有一种更方便的方法来实现这些操作,那便是使用Expression Blend附带的System.Windows.Interactivity.dll文件,它使用interaction trigger和InvokeCommandAction behavior来帮助我们直接绑定控件的事件。要使用这个DLL,当然先是在项目中引入dll文件,这个文件在安装完Blend4后会出现在:
C:\Program Files\Microsoft SDKs\Expression\Blend\.NETFramework\v4.0\Libraries\System.Windows.Interactivity.dll
需要注意的是,如果你的View、ViewModel不在启动项目中,记得在启动项目中也引用这个dll文件,不然会发生找不到程序集的错误。接下来在前台View中加入xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"的命名空间引用,这样就可以使用了:
-
<TreeView Name=
"TV_Test"
ItemsSource=
"{Binding TreeViewSource}"
>
-
<i:Interaction.Triggers>
-
<i:EventTrigger EventName=
"SelectedItemChanged"
>
-
<i:InvokeCommandAction Command=
"{Binding SelectedChangedCommand}"
CommandParameter=
"{Binding ElementName=TV_Test}"
/>
-
</i:EventTrigger>
-
</i:Interaction.Triggers>
-
</TreeView>
其中,“EventName”属性指定了响应的事件的全称,它可以为该控件所有的事件。CommandParameter传递参数,这个是一个可选属性,参数可以是字符串、或者是绑定的其它内容。后台的ViewModel与第一种情况一样:
-
private
DelegateCommand<TreeView> _selectedChangedCommand;
-
public
ICommand SelectedChangedCommand
-
{
-
get
{
-
return
_selectedChangedCommand ??
-
(_selectedChangedCommand =
new
DelegateCommand<TreeView>(SelectedChangedCommandExcute));
-
}
-
}
-
private
void
SelectedChangedCommandExcute(TreeView sender)
-
{
-
-
}
用过一段时间的Prism4了,刚开始很不习惯,现在感觉这种松耦合机制是有它的道理。现在便是想整理一些东西出来,方便记忆吧。我们在实现MVVM模式的时候,前台View和后台ViewModel的交互就是通过绑定来实现的,其中控件触发事件的绑定有几种情况: 第一种,控件继承自ButtonBase、MenuItem类,比如:Button、RadioButton、Hyperlink、MenuItem……这种...
前言:
TreeView
可以说是很常见的一个控件,大部分软件不管是客户端还是网页都会有个左侧树型结构的控件,用于承载树形数据,下面就
TreeView
在MVVM下的使用写两篇小记,一篇是
绑定
后台数据,一篇是选
中
事件
后获取
路由
节点信息。
说明:有关MVVM的介绍,可以导航到这篇文章了解下wpf mvvm小记
其
中
MVVM使用
prism
框架,这样就不需要自己重新去
实现
MVVM的功能了,
prism
中
都封装好了。
Prism
的简单介绍可以看笔者之前的文章了解下。
一、目录结构
二、测试
实现
功能
<Button x:Class="IM.UI.CommandEx.
Prism
CommandEx"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http...
using
Prism
.Events;
using RCSoft.Core.Infrastructure.Events.RCMessage;
using System.Windows;
namespace RCSoft.Core.NetGate.Views
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
C# WPF 创建
TreeView
,MVVM模式
绑定
数据库数据Html页面代码后台代码获取生成
TreeView
的数据MVVM
绑定
属性,由于数据量有点大这里我起了一个线程来生成树结构
在网上淘了很久自己研究了半天的时间终于做出来了,有很多不足之处,欢迎大家提意见
Html页面代码
这里很简单,
绑定
了后台的几个属性,
TreeView
的ItemsSource
绑定
到TreeNode后台和
TreeView
交互的属性
ChildNodes:节点
NodeName:节点名称
<
TreeView
Name="ch
<Style x:Key="Menu
TreeView
Item" TargetType="{x:Type
TreeView
Item}">
<Style.Triggers>
<Trigger Pr...
TreeView
ItemContainerStyle="{StaticResourceTheStyle}"Background="White"HorizontalAlignment="Stretch"BorderBrush="Transparent">
i:Interaction.Triggers>
i:EventTrigger
在 Vue 2 项目
中
使用
Prism
需要以下步骤:
1. 安装
Prism
:在项目目录
中
执行 `npm install
prism
js` 或 `yarn add
prism
js`。
2. 导入
Prism
:在需要使用
Prism
的组件
中
导入
Prism
,例如:`import
Prism
from '
prism
js'`。
3. 加载语言文件:在需要使用的语言文件
中
导入,例如:`import '
prism
js/components/
prism
-javascript'`。
4. 加载样式文件:在项目
中
加载
Prism
的样式文件,例如:`import '
prism
js/themes/
prism
.css'`。
5. 高亮代码:在模板
中
使用
Prism
的 `highlight` 方法高亮代码,例如:`<pre v-html="highlightedCode"></pre>`,在组件的 JS
中
,需要在 `mounted` 生命周期
中
调用
Prism
的highlight方法,例如`mounted() { this.highlightedCode =
Prism
.highlight(this.code,
Prism
.languages.javascript) }`
6.注意:对于需要高亮的内容在页面上最好是通过v-model
绑定
的变量来渲染,不然高亮不会自动更新