【DevExpress】WPF DevExpressMVVM 24.1版本开发指南

DevExpressMVVM WPF 环境安装

前言
重要Bug（必看）
环境安装
控件目录
- Theme 主题
- LoginWindow 登陆窗口
- INavigationService 导航服务
- DockLayout Dock类型的画面布局
- TreeView 树状列表
- - 注意引用类型的时候```ImageSource```是```PresentationCore```程序集的博主找了好久，一直告诉我Select返回类型不一致
  - 注意：官方Demo有个坑，也是博主没看清，博主发现官方给的Demo初始化的时候，所有的节点都默认展开，最后发现例子里有这么一段
- GridControl 数据网格控件（等于DataGrid）
- - 注意：注意如果需要修改请使用FieldName的形式，如果用Binding绑定的话无法用控件本身的修改
  - - 去掉标题栏上面的Seach按钮```ShowGroupPanel="False"```，去掉左侧指示器```ShowIndicator="False"```
- LoadingDecorator 数据加载等待遮罩层
- GridControl 分页方式
- FlowLayoutControl 流式布局（拖拽）
- GridControl.ComboBox 数据网格中添加下拉列表
- Converter 显示转换
- GridControl.Group 数据网格分组
- GridControl 滚动动画（丝滑）
持续更新中...

前言

博主也是刚使用DevExpress所以哪里有问题和不足的地方欢迎大家提出来！
近一年博主都会做这个技术文档的更新，所以大家可以持续关注一下，如果完结的话博主会写出来！
优点：控件真是不错，各种集成，特别适合报表，工业，工具，系统等方向软件，功能强大，扩展丰富
缺点：开发文档全英文，对于英文不好的小伙伴不太友好，网络资源少（版本不一样解决方案不一样），导致开发需要摸索，建议搭配翻译软件看文档吧（官方网站有，自己去文档库下载）

重要Bug（必看）

1、在23.2和24.1都存在的一个bug，GridControl如果做动态更新，就不要使用DevExpressMvvm自带的[GenerateProperty]去声明数据源，而是采用ViewModel继承INotifyPropertyChanged的方式去声明，否则无法动态加载。
2、还是上述问题，但是！可能其他控件也存在相同的问题，情景是：AViewModel.cs去更新BViewModel.cs中的一个数据源，由于DevExpressMvvm没有依赖注入的技术支持，再加上博主没有使用Prism的事件聚合器，所以将BViewModel.cs定义为单例模式，通过A去调用B中的方法，从而改变B中的某个数据源，数据修改成功了，但是没有办法回显在画面上ItemsSourceChanged都没有触发，最后发现通过一个事件去调用方法则可以，例如画面定义一个Button然后绑定一个Click Command事件中就可以修改B中要改得数据源，具体原因不得而知！（由于这个问题博主已经将各个控件做成的UserControl合在一起了，等有时间在研究吧）
3、不确定是不是BUG，在GridControl中添加图片模板，模板内图片设置不上Source

<Image Source="{Binding Url}" />

改

<Image Source="{Binding Row.Url}" />

环境安装

直接官网安装https://www.evget.com/product/2346
建议使用同版本的，否则可能会有一点东西不一样，那探索起来简直是太棒了！

安装之后会有一个Demo Center 24.1 里面有大量Demo，但是进行了一部分DemoBase基类的集成，虽然不太影响阅读，但是阅读感不太好

控件目录

接下来是博主开发中涉及使用到的一些控件，有同样的小伙伴可以根据菜单直接进行查看！

Theme 主题

博主主要是要实现一种主题，不进行切换，但是根据网上资料设置好久都没成功，最后在文档中看到了预设主题的这么一个说明，上代码！

using DevExpress.Xpf.Core;
using System.Windows;namespace UIEditor
{/// <summary>/// Interaction logic for App.xaml/// </summary>public partial class App : Application{static App(){CompatibilitySettings.UseLightweightThemes = true;}protected override void OnStartup(StartupEventArgs e){ApplicationThemeHelper.ApplicationThemeName = LightweightTheme.VS2019Light.Name;base.OnStartup(e);}}
}

主要需要重写OnStartup启动方法

LoginWindow 登陆窗口

博主做了一个登陆画面，思维一直锁在了导航里，其实对于Window也用不上导航，直接Show主界面，Close当前登录框就可以了，上代码！

LoginView.xaml

<dx:ThemedWindowx:Class="UIEditor.Views.Login"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:ViewModels="clr-namespace:UIEditor.ViewModels"xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"xmlns:dxmvvm="http://schemas.devexpress.com/winfx/2008/xaml/mvvm"xmlns:dxwui="http://schemas.devexpress.com/winfx/2008/xaml/windowsui"xmlns:dxwuin="http://schemas.devexpress.com/winfx/2008/xaml/windowsui/navigation"Title="Login"Width="280"Height="320"><dx:ThemedWindow.DataContext><ViewModels:LoginViewModel /></dx:ThemedWindow.DataContext><Grid VerticalAlignment="Center"><dxwui:NavigationFrame><dxmvvm:Interaction.Behaviors><dxwuin:FrameNavigationService /></dxmvvm:Interaction.Behaviors></dxwui:NavigationFrame><StackPanel><TextBlockMargin="0,0,0,40"HorizontalAlignment="Center"Text="UI编辑器" /><TextBox Width="190" Margin="0,0,0,20" /><dxe:PasswordBoxEditWidth="190"Margin="0,0,0,20"VerticalAlignment="Center"NullText="请输入密码"NullValue="" /><ButtonWidth="190"Command="{Binding LoginCommand}"Content="登陆" /></StackPanel></Grid>
</dx:ThemedWindow>

注意dxwui,dxwuin是导航使用的，博主没删是等着下次用的时候直接过来粘贴大家不要管，直接看Button中Command="{Binding LoginCommand}"方法就可以了

LoginViewModel.cs

 [GenerateCommand]public void Login(){MainWindow mainWindow = new MainWindow();mainWindow.Show();Application.Current.MainWindow.Close();}

大家应该注意到我只在ViewModel层声明了一个Login方法，DevExpress MVVM直接给我生成了一个LoginCommand，具体什么做法大家可以看一下底层，所以这也是DevExpress MVVM的强大之处，挺方便的

INavigationService 导航服务

由于DevExpress MVVM没提供 IoC依赖注入，博主也懒得弄了，所以在服务注入的时候需要换个方法，上代码！

XXXViewModel.cs

private INavigationService NavigationService { get { return this.GetService<INavigationService>(); } }[GenerateCommand]
public void Login()
{NavigationService.Navigate("MainWindow", null, this);
}

直接在ViewModel声明服务使用就可以了

XXXView.xaml

  <dxwui:NavigationFrame><dxmvvm:Interaction.Behaviors><dxwuin:FrameNavigationService /></dxmvvm:Interaction.Behaviors></dxwui:NavigationFrame>

需要粘一个这个用于导航就可以了（目前博主还没到真正使用导航的时候，如果有问题需要大家自己在研究一下）

DockLayout Dock类型的画面布局

博主要做一个仿照Vs2022的编译器所以会有控件布局拖拽的需求，于是看到DevExpree存在这个布局控件，于是使用了一下，实现简单，效果哇塞！上效果！
在这里插入图片描述
这样一个小窗口，可以按住控件的标题栏就行拖拽，与Vs2022一致，上代码！

<dx:ThemedWindowx:Class="UIEditor.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:Views="clr-namespace:UIEditor.Views"xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"xmlns:dxa="http://schemas.devexpress.com/winfx/2008/xaml/accordion"xmlns:dxdo="http://schemas.devexpress.com/winfx/2008/xaml/docking"xmlns:dxdove="http://schemas.devexpress.com/winfx/2008/xaml/docking/visualelements"xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"xmlns:dxmvvm="http://schemas.devexpress.com/winfx/2008/xaml/mvvm"Title="UI编辑器"Width="1000"Height="800"dx:ThemeManager.ThemeName="VS2019Light"TitleAlignment="Center"><Grid><dxdo:DockLayoutManager Margin="2"><dxdo:LayoutGroup><dxdo:LayoutPanelCaption="UI列表"ItemWidth="*"                                                    //这个是用来做控件按百分比占宽度的Visibility="Collapsed"><Views:MainView /></dxdo:LayoutPanel><dxdo:LayoutGroup ItemWidth="*" Orientation="Vertical">                     //这个是讲DockLayout中的内容在分为几块，主要用来初始化的时候展示布局的<dxdo:LayoutPanel AllowClose="False" Caption="层级列表"><Views:LevelView /></dxdo:LayoutPanel><dxdo:LayoutPanel Caption="资源列表" Visibility="Collapsed"><Views:UIListView /></dxdo:LayoutPanel></dxdo:LayoutGroup><dxdo:LayoutPanelCaption="Untiy程序"ItemWidth="3.5*"Visibility="Collapsed"><Views:UIListView /></dxdo:LayoutPanel><dxdo:LayoutPanelAllowClose="False"                                   //禁止关闭模块了，有需要的可以删掉这个Caption="属性区"ItemWidth="3*"><Views:PropertyView /></dxdo:LayoutPanel></dxdo:LayoutGroup></dxdo:DockLayoutManager></Grid>
</dx:ThemedWindow>

TreeView 树状列表

博主要实现可以根据Type类型实现Icon不同，并且可修改Node节点名称的，大家先看一下代码吧！

注意引用类型的时候`ImageSource`是`PresentationCore`程序集的博主找了好久，一直告诉我Select返回类型不一致

XXXView.xaml

<UserControlx:Class="UIEditor.Views.LevelView"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:ViewModels="clr-namespace:UIEditor.ViewModels"xmlns:commn="clr-namespace:UIEditor.Common"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:dxdb="http://schemas.devexpress.com/winfx/2008/xaml/demobase/internal"xmlns:dxg="http://schemas.devexpress.com/winfx/2008/xaml/grid"xmlns:dxmvvm="http://schemas.devexpress.com/winfx/2008/xaml/mvvm"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"d:DesignHeight="300"d:DesignWidth="300"mc:Ignorable="d"><UserControl.DataContext><ViewModels:LevelViewModel /></UserControl.DataContext><UserControl.Resources><commn:SolutionNodeImageSelector x:Key="_solutionNodeImageSelector" /></UserControl.Resources><Grid><dxg:TreeViewControlAllowEditing="True"AllowRecursiveNodeChecking="True"ChildNodesPath="Children"ItemsSource="{Binding Nodes}"NodeImageSelector="{StaticResource _solutionNodeImageSelector}"     // 节点图片选择器（根据英文名读的，英文菜鸡博主）主要是这个SearchPanelNullText="请输入名称进行检索"ShowBorder="False"ShowLoadingPanel="True"ShowNodeImages="True"ShowSearchPanel="True"TreeViewFieldName="Name" /></Grid>
</UserControl>

SolutionNodeImageSelector.cs

using DevExpress.Xpf.Core;
using DevExpress.Xpf.Grid;
using DevExpress.Xpf.Grid.TreeList;
using System;
using System.Collections.Generic;
using System.Windows;
using System.Windows.Media;
using UIEditor.Models;
using UIEditor.Models.Enum;namespace UIEditor.Common
{public class SolutionNodeImageSelector : TreeListNodeImageSelector{static SolutionNodeImageSelector(){ImageCache = new Dictionary<NodeType, ImageSource>();}static readonly Dictionary<NodeType, ImageSource> ImageCache;public override ImageSource Select(TreeListRowData rowData){LevelNode solutionNode = (rowData.Row as LevelNode);if (solutionNode == null)return null;return GetImageByTypeNode(solutionNode.TypeNode);}public static ImageSource GetImageByTypeNode(NodeType typeNode){if (ImageCache.ContainsKey(typeNode))return ImageCache[typeNode];var extension = new SvgImageSourceExtension() { Uri = new Uri(GetImagePathByTypeNode(typeNode)), Size = new Size(16, 16) };var image = (ImageSource)extension.ProvideValue(null);ImageCache.Add(typeNode, image);return image;}public static string GetImagePathByTypeNode(NodeType typeNode){return "pack://application:,,,/UIEditor;component/Images/SolutionExplorer/" + typeNode.ToString() + ".svg";}}
}

这是模板代码，没什么可以说的，官方Demo给的，直接改一下GetImagePathByTypeNode返回的地址就好
最后是Model和Enum
Model.cs (也是官方Demo的)

using System.Collections.Generic;
using UIEditor.Models.Enum;namespace UIEditor.Models
{public class LevelNode {public NodeType TypeNode { get; set; }public string Name { get; set; }public string TypeName { get; set; }public string FileName { get; set; }List<LevelNode> _children;public IEnumerable<LevelNode> Children { get { return _children; } }public string DisplayName { get { return string.IsNullOrEmpty(TypeName) ? Name : string.Format("{0} : {1}", Name, TypeName); } }public string SearchString { get; set; }public string SearchName { get; set; }public void AddChildren(LevelNode child) {if(_children == null)_children = new List<LevelNode>();_children.Add(child);}}
}

Enum.cs （图片要和Enum同名，要不就在模板里写一下切换吧）

/// <summary>
/// 层级树状类型字典
/// </summary>
public enum NodeType
{Image,Text,Color
}

注意：官方Demo有个坑，也是博主没看清，博主发现官方给的Demo初始化的时候，所有的节点都默认展开，最后发现例子里有这么一段

Loaded="{DXEvent Handler='@Self.ExpandNode(0);@Self.ExpandNode(1)'}"

ExpandNode这个坑货，直接展开节点

GridControl 数据网格控件（等于DataGrid）

这个目前没什么需要注意的，可能就是实现跟DataGrid不太一样，博主是要在一个Cell添加多个图片，贴出来大家自己看一下吧，以这个为范例大家自由发挥

XXXView.xaml

    <dxg:GridControlGrid.Row="1"ItemsSource="{Binding Properties, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"ShowBorder="False"><dxg:GridColumnWidth="80"FieldName="ActionCode"Header="动作编码" /><dxg:GridColumnWidth="80"FieldName="Total"Header="最大数量"IsSmart="True" /><dxg:GridColumnWidth="80"FieldName="Quantity"Header="实际数量"IsSmart="True" /><dxg:GridColumnWidth="*"CellTemplate="{StaticResource _ImageTemplate}"Header="图片" /><dxg:GridControl.View><dxg:TableView AllowPaging="True" /></dxg:GridControl.View></dxg:GridControl>

_ImageTemplate（直接定义在xaml开头也行，定义一个模板文件也行）

 <UserControl.Resources><DataTemplate x:Key="_ImageTemplate"><StackPanel Orientation="Horizontal"><ItemsControl ItemsSource="{Binding Row.Images}"><ItemsControl.ItemTemplate><DataTemplate><StackPanel><Image Source="{Binding Url}" /><TextBlock Text="{Binding Size}" /><TextBlock Text="{Binding Name}" /></StackPanel></DataTemplate></ItemsControl.ItemTemplate><ItemsControl.ItemsPanel><ItemsPanelTemplate><WrapPanel /></ItemsPanelTemplate></ItemsControl.ItemsPanel></ItemsControl></StackPanel></DataTemplate></UserControl.Resources>

ViewModel没什么东西无非就是定义一个数据源，弄两个实体，太多了就不贴出来了，有问题可以留言

注意：注意如果需要修改请使用FieldName的形式，如果用Binding绑定的话无法用控件本身的修改

去掉标题栏上面的Seach按钮`ShowGroupPanel="False"`，去掉左侧指示器`ShowIndicator="False"`

上个效果图：
在这里插入图片描述

LoadingDecorator 数据加载等待遮罩层

用于画面加载数据的等待效果，需要进行线程处理，防止UI线程阻塞，话不多说，上代码！

<dx:LoadingDecorator IsSplashScreenShown="{Binding LoadingFlag}"><dx:LoadingDecorator.SplashScreenTemplate>                                                    // 如果不需要自定义东西 这层直接删掉，默认文字是Loading<DataTemplate><dx:WaitIndicator Content="正在加载文件目录..." DeferedVisibility="True" /></DataTemplate></dx:LoadingDecorator.SplashScreenTemplate>中间放处理逻辑
</dx:LoadingDecorator>

LoadingFlag就是一个bool值
如果不需要特殊效果SplashScreenTemplate这层就可以直接删掉，如果需要特殊处理，可以根据博主给出的代码，去文档里看，有官方Demo

在贴一个防止线程阻塞的方法

  LoadingFlag = true;var files = await Task.Run(() =>{return this.GetPngImage(folderPath); // 这里面是耗时的逻辑处理});Properties = new ObservableCollection<PropertyModel>(files);

GridControl 分页方式

话不多说直接上代码！

<dxg:GridControl><dxg:GridControl.View><dxg:TableView AllowPaging="True" /></dxg:GridControl.View>
</dxg:GridControl>

主要是AllowPaging这个属性就是是否开启分页
至于扩展自己去官方上看吧，链接: Devexpress WPF控件文档中心>>数据分页

FlowLayoutControl 流式布局（拖拽）

这个布局可以像StackPanel指定内部布局方式，主要是可以实现布局内控件"拖拽排序"功能，话不多说，上代码！
View.xaml

<DataTemplate x:Key="_ImageTemplate"><dxlc:FlowLayoutControlAllowItemMoving="True"AnimateItemMoving="True"Background="White"ItemsSource="{Binding Row.Images}"Orientation="Horizontal"ShowLayerSeparators="True"><dxlc:FlowLayoutControl.ItemTemplate><DataTemplate><StackPanel Width="75" VerticalAlignment="Bottom"><Image Source="{Binding Url}" /><TextBlockHorizontalAlignment="Center"VerticalAlignment="Bottom"Text="{Binding Size}" /><TextBlock VerticalAlignment="Bottom" Text="{Binding Name}" /></StackPanel></DataTemplate></dxlc:FlowLayoutControl.ItemTemplate></dxlc:FlowLayoutControl>
</DataTemplate>

这个没什么好说的，StackPanel层就是内容，可以自行修改，StackPanel可以不要，其他的扩展属性，请去文档或者官方查看

GridControl.ComboBox 数据网格中添加下拉列表

在GridControl中添加一个ComboBox 可以使用ComboBoxEditSettings，具体的上代码！
博主一开始进入一个误区，就是如何知道选择的是哪行的ComboBox值那，后来发现是套在GridColumn中的，只要GridColumn中的FieIdName和ComboBoxEditSettings的ValueMember是同类型值就可以联动修改…一开始人傻了找好久…

View.xaml

xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"
xmlns:dxg="http://schemas.devexpress.com/winfx/2008/xaml/grid"<dxg:GridColumnWidth="120"FieldName="ActionCode"Header="动作类型"><dxg:GridColumn.EditSettings><dxe:ComboBoxEditSettingsDisplayMember="Name"    // 指定显示字段IsTextEditable="False"ItemsSource="{Binding ActionTypes}"ValueMember="ActionCode" />   // 指定选中后的返回值</dxg:GridColumn.EditSettings>
</dxg:GridColumn>

ViewModel就不粘出来了，无非就是定义一个ActionTypes集合

Converter 显示转换

这个大家用的应该很多了，但是DevExpress提供了一个简便写法
View.xaml

xmlns:dxmvvm="http://schemas.devexpress.com/winfx/2008/xaml/mvvm"<UserControl.Resources><dxmvvm:ObjectToObjectConverter x:Key="ActionCodeTypeConverter"><dxmvvm:MapItem Source="0" Target="待机，技能自身" /><dxmvvm:MapItem Source="1" Target="行走，技能过程" /><dxmvvm:MapItem Source="2" Target="跑步，技能目标" /></dxmvvm:ObjectToObjectConverter>
</UserControl.Resources><dxg:GridColumnWidth="80"Binding="{Binding ActionCode, Converter={StaticResource ActionCodeTypeConverter}}"GroupIndex="0"Header="动作" />

这没什么好说的，很好理解！

GridControl.Group 数据网格分组

会有需要根据某个字段进行分组的情况，博主在网上查了好久，没有什么特别明确的内容，直到看到一位网友的资料，其实很简单，只需要在需要的Column上加一个GroupIndex就可以了
附上这位网友的文章: wpf devexpress 排序、分组、过滤数据
附上官方说明文档:ColumnBase.SortOrder，Sort Data，Grouping

<dxg:GridColumnWidth="80"Binding="{Binding ActionCode, Converter={StaticResource ActionCodeTypeConverter}}"GroupIndex="0"               // 加上这个就可以了，如果有多个的话Index值根据优先级排就行Header="动作" />

上个效果图：
在这里插入图片描述

GridControl 滚动动画（丝滑）

在GridControl.View中的TableView中添加AllowScrollAnimation=“True”

dxg:GridControl.View><dxg:TableView AllowEditing="True" AllowScrollAnimation="True" />
</dxg:GridControl.View>