如何在XAF Blazor .NET 6应用中实现状态流转状态栏？

1. 定义状态枚举与业务对象 #

首先为业务流程创建状态枚举，以订单流转为例：

public enum OrderStatus
{
    Draft,
    Submitted,
    Approved,
    Shipped,
    Completed
}

在对应的业务对象中添加状态属性：

public class Order : BaseObject
{
    public Order(Session session) : base(session) { }

    private OrderStatus _status;
    public OrderStatus Status
    {
        get => _status;
        set => SetPropertyValue(nameof(Status), ref _status, value);
    }
}

2. 开发自定义状态流转栏组件 #

创建Razor组件StatusFlowBar.razor渲染状态进度：

<div class="status-flow-bar">
    @foreach (var status in Enum.GetValues(typeof(OrderStatus)).Cast<OrderStatus>())
    {
        var isCompleted = (int)status <= (int)CurrentStatus;
        var isCurrent = status == CurrentStatus;
        <div class="status-item @(isCompleted ? "completed" : "") @(isCurrent ? "current" : "")">
            <span class="status-icon">@GetIcon(status)</span>
            <span class="status-label">@status.ToString()</span>
        </div>
        @if (!IsLastStatus(status))
        {
            <div class="status-line @(isCompleted ? "completed" : "")"></div>
        }
    }
</div>

@code {
    [Parameter]
    public OrderStatus CurrentStatus { get; set; }

    private string GetIcon(OrderStatus status)
    {
        return status switch
        {
            OrderStatus.Draft => "📝",
            OrderStatus.Submitted => "📤",
            OrderStatus.Approved => "✅",
            OrderStatus.Shipped => "🚚",
            OrderStatus.Completed => "🏁",
            _ => ""
        };
    }

    private bool IsLastStatus(OrderStatus status)
    {
        return status == Enum.GetValues(typeof(OrderStatus)).Cast<OrderStatus>().Last();
    }
}

在wwwroot/css/site.css中添加样式：

.status-flow-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background-color: #f5f5f5;
    border-radius: 8px;
}

.status-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    min-width: 80px;
}

.status-icon {
    font-size: 1.5rem;
}

.status-label {
    font-size: 0.875rem;
    text-align: center;
}

.status-line {
    flex-grow: 1;
    height: 2px;
    background-color: #ccc;
}

.status-item.completed .status-label {
    color: #2ecc71;
    font-weight: bold;
}

.status-line.completed {
    background-color: #2ecc71;
}

.status-item.current .status-label {
    color: #3498db;
    font-weight: bold;
}

.status-item.current .status-icon {
    transform: scale(1.2);
}

3. 集成到XAF DetailView #

通过Model Editor完成组件集成：

• 打开目标业务对象的DetailView模型，在Items节点下添加BlazorComponent类型的项
• 设置ComponentTypeName为组件的完整命名空间（如YourProjectName.Blazor.Components.StatusFlowBar）
• 在ComponentProperties中添加CurrentStatus属性，将PropertyPath设置为业务对象的Status字段

4. 实现状态流转逻辑 #

在业务对象中添加状态切换方法，支持通过Action触发：

public void SubmitOrder()
{
    if (Status == OrderStatus.Draft)
    {
        Status = OrderStatus.Submitted;
    }
}

public void ApproveOrder()
{
    if (Status == OrderStatus.Submitted)
    {
        Status = OrderStatus.Approved;
    }
}

// 按需添加其他状态切换方法

之后在DetailView模型中添加对应的Action，绑定到这些方法即可完成状态交互。

参考方向 #

可以重点查看XAF官方文档的以下内容：

• Blazor视图中自定义组件的嵌入方式
• 业务对象属性与UI组件的绑定规则
• DetailView中自定义Action的创建与配置

内容的提问来源于stack exchange，提问作者Shammu