C#结合WPF实现审批流程图绘制及后台逻辑的示例详解
目录
- 一、架构设计：MVVM模式下的审批系统
- 二、核心实现：流程图绘制引擎
- 1. 审批节点控件 (XAML)
- 2. 动态画布管理器
- 三、审批状态机实现
- 1. 审批状态与命令管理
- 2. 基于命令模式的审批操作
- 四、UI与后台 完整交互示例
- 1. 审批流程图定义数据
- 2. 主窗口MVVM绑定
- 五、高级功能实现技巧
- 1. 可视化状态跟踪
- 2. 审批规则引擎扩展
- 3. 流程图序列化保存
- 六、性能优化建议
- wpF实现审批系统的优势
一、架构设计：MVVM模式下的审批系统
二、核心实现：流程图绘制引擎
1. 审批节点控件 (XAML)
<!-- ApprovalNodeControl.xaml -->
<ControlTemplate x:Key="NodeTemplate" TargetType="ContentControl">
<Grid>
<!-- 节点基础图形 -->
<Path Data="M 0,0 L 60,0 L 60,40 L 0,40 Z"
Fill="{Binding Status, Converter={StaticResource StatusToColorConverter}}"
Stroke="DarkGray">
<!-- 状态指示灯 -->
<Path.Effect>
<DropShadowEffect Opacity="0.7" BlurRadius="8"
Color="{Binding Status, Converter={StaticResource StatusToShadowColor}}"/>
</Path.Effect>
</Path>
<!-- 节点内容 -->
<StackPanel VerticalAlignment="Center" Margin="10">
<Textblock Text="{Binding NodeName}" FontWeight="Bold" HorizontalAlignment="Center"/>
<TextBlock Text="{Binding Approvers}"
TextTrimming="CharacterEllipsis" MaxWidth="50"/>
</StackPanel>
<!-- 连接锚点 -->
<Ellipse Width="10" Height="10" Fill="Blue"
Canvas.Left="55" Canvas.Top="17"
Visibility="{Binding ShowAnchor, Converter={StaticResource BoolToVisibility}}"/>
</Grid>
</ControlTemplate>
2. 动态画布管理器
public class FlowCanvasManager
{
private Canvas _canvas;
private List<ApprovalNodeControl> _nodes = new List<ApprovalNodeControl>();
// 添加新节点
public void AddNode(ApprovalNodeModel nodeModel)
{
var nodeControl = new ApprovalNodeControl(nodeModel);
Canvas.SetLeft(nodeControl, nodeModel.Position.X);
Canvas.SetTop(nodeControl, nodeModel.Position.Y);
// 实现拖拽
nodeControl.MouseMove += (s, e) => {
if (e.LeftButton == MouseButtonState.Pressed)
{
DragDrop.DoDragDrop(nodeControl, nodeModel, DragDropEffects.Move);
}
};
_canvas.Children.Add(nodeControl);
_nodes.Add(nodeControl);
}
// 连接节点
public void ConnectNodes(ApprovalNodeModel from, ApprovalNodeModel to)
{
var connector = new Polyline {
Stroke = Brushes.Gray,
StrokeThickness = 2,
Points = CalculateConnectionPoints(from, to)
};
_canvas.Children.Add(connector);
}
private PointCollection CalculateConnectionPoints(ApprovalNodeModel from, ApprovalNodeModel to)
{
return new PointCollection {
new Point(from.Position.X + 55, from.Position.Y + 20),
编程客栈 new Point(to.Position.X + 5, to.Position.Y + 20)
};
}
}
三、审批状态机实现
1. 审批状态与命令管理
public enum ApprovalStatus { Pending, Approved, Rejected, Completed }
public class ApprovalStateMAChine
{
private readonly ApprovalFlowModel _flow;
public void ProcessNode(Guid nodeId, bool isApproved)
{
var node = _flow.Nodes.First(n => n.Id == nodeId);
// 状态更新逻辑
node.Status = isApproved ? ApprovalStatus.Approved : ApprovalStatus.Rejected;
// 自动推进逻辑
if (isApproved && node.Type == NodeType.Final)
{
_flow.Status = ApprovalStatus.Completed;
ApprovalCompleted?.Invoke(this, EventArgs.Empty);
}
else if (!isApproved)
{
RollbackToPreviousNode(nodeId);
}
}
private void RollbackToPreviousNode(Guid currentNodeId)
{
// 回溯算法示例
var currentIndex = _flow.Nodes.IndexOf(
_flow.Nodes.First(n => n.Id == currentNodeId));
for (int i = currentIndex - 1; i >= 0; i--)
{
if (_flow.Nodes[i].Status == ApprovalStatus.Approved)
{
_flow.Nodes[i].Status = ApprovalStatus.Pending;
RollbackOccurred?.Invoke(this, i);
break;
}
}
}
// 状态变更事件
public event EventHandler<int> RollbackOccurred;
public event EventHandler ApprovalCompleted;
}
2. 基于命令模式的审批操作
public class ProcessApprovalCommand : ICommand
{
private readonly ApprovalStateMachine _stateMachine;
public ProcessApprovalCommand(ApprovalStateMachine stateMachine) =>
_stateMachine = stateMachine;
public bool CanExecute(object parameter) =>
(parameter as ApprovalNodeModel)?.Status == ApprovalStatus.Pending;
public void Execute(object parameter)
{
if (parameter is ApprovalNodeModel node)
{
var dialog = new ApprovalDialog("审批操作");
if (dialog.ShowDialog() == true)
{
_stateMachine.ProcessNode(node.Id, dialog.IsApproved);
}
}
}
public event EventHandler CanExecuteChanged;
}
四、UI与后台 完整交互示例
1. 审批流程图定义数据
// 审批流程定义
{
"FlowName": "员工报销流程",
"Nodes": [
{
"Id": "node1",
"NodeName": "提交报销",
"Type": "Start",
"Approvers": ["申请人"],
"Position": { "X": 50, "Y": 100 }
},
{
"Id": "node2",
"NodeName": "部门审批",
"Type": "Approval",
"Approvers": ["部门主管"],
"Position": { "X": 250, "Y": 100 }
}
],
"Connections": [
{"From": "node1", "To": "node2"}
]
}
2. 主窗口MVVM绑定
<Window>
<!-- 流程图画布区域 -->
<ScrollViewer>
<Canvas x:Name="MainCanvas" Width="800" Height="600"
Background="#FFF5F5F5">
<!-- 通过ItemsControl动态绑定节点 -->
<ItemsControl ItemsSource="{Binding Flow.Nodes}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<local:ApprovalNodeControl />
</DataTemplate>
</ItemsControl.ItemTemplate>
python </ItemsControl>
</Canvas>
</ScrollViewer>
<!-- 审批操作面板 -->
<StackPanel Grid.Column="1">
<Button Content="同意"
Command="{Binding ApproveCommand}"
CommandParameter="{Binding SelectedNode}"/>
<Button Content="驳回"
Command="{Binding RejectCommand}"
CommandParameter="{Binding SelectedNode}"/>
<TextBlock Text="{Binding SelectedNode.Status}" />
</StackPanel>
</Window>
五、高级功能实现技巧
1. 可视化状态跟踪
// 状态变更通知
public class ApprovalNodeModel : INotifyPropertyChanged
{
private ApprovalStatus _status;
public ApprovalStatus Status
{
get => _status;
set
{
_status = value;
OnPropertyChanged();
// 状态变更自动记录审计日志
AuditService.Log($"{NodeName}状态变更为{value}");
}
}
}
2. 审批规则引擎扩展
// 条件审批示例
public void ApplyApprovalRules()
{
var expenseAmount = GetCurrentExpenseAmount();
if (expenseAmount > 5000)
{
// 自动添加财务总监节点
AddApprovalNode("财务总监审批", NodeType.Approval);
}
else if(expenseAmount > 10000)
{
// 发起加签流程
RequestAdditionalApproval();
}
}
3. 流程图序列化保存
public void SaveFlowDiagram()
{
// 生成流程图结构数据
var flowData = new FlowSchema {
Nodes = _nodes.Select(n => n.Model).ToList(),
Connections = FindAllConnections()
};
// 序列化为XML
var serializer = new XmlSerializer(typeof(FlowSchema));
using (var wr编程客栈iter = new StreamWriter("flow.xml"))
{
serializer.Serialize(writer, flowData);
}
}
六、性能优化建议
图形渲染优化：
// 启用GPU加速 RenderOptions.SetBitmapScalingMode(canvas, BitmapScalingMode.HighQuality); RenderOptions.SetEdgeMode(canvas, EdgeMode.Aliased);
大数据量处理：
// 虚拟化容器
<ItemsControl VirtualizingStackPanel.IsVirtualizing="True"
VirtualizingStackPanel.VirtualizationMode="Recycling">
增量刷新策略：
// 仅刷新变更节点
foreach (var changedNode in _stateMachine.Get编程ChangedNodes())
{
python UpdateNodeVisual(changedNode);
}
WPF实现审批系统的优势
- 声明式UI开发：XAML数据绑定显著提升UI开发效率
- 强大的图形能力：支持复杂流程图、动画效果、可视化状态反馈
- 完善的MVVM支持：业务逻辑与UI解耦，提升可测试性
- 企业级集成能力：轻松对接WCF/Web API等后端服务
- 桌面端性能优势：相比Web技术有更流畅的用户体验
通过本示例可以看到，结合WPF与C#可构建专业级的审批工作流系统。核心在于灵活运用：
- 自定义控件实现可视化元素
- 状态机管理审批流程
- MVVM模式保持架构清晰
- 命令模式处理用户交互
实际项目中可扩展会签/或签、委托审批、电子签名等企业级功能，打造完整的BPM解决方案。
- 流程设计器（拖拽创建节点）
- 审批规则配置界面
- 流程图导出为PNG/PDF
- 审批历史跟踪时间线
- 多语言本地化支持
以上就是C#结合WPF实现审批流程图绘制及后台逻辑的示例详解的详细内容，更多关于C# WPF审批流程图的资料请关注编程客栈(www.devze.com)其它相关文章！
加载中,请稍侯......
精彩评论