【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>