WPF ShowDialog() 的 Blazor 等價物？

Question

我正在嘗試將一些代碼從 WPF 遷移到 Blazor。 WPF 代碼依賴 ShowDialog() 來顯示模式對話框並暫停執行，直到模式關閉。 是否有（服務器端）Blazor 等效項允許 C# 控制流基於，例如，用戶是否在模式對話框中單擊了“確認”與“取消”？

Answer 1

您可以添加一個按鈕

<button class="btn btn-primary"
  @onclick="AddNewForecast">
  Add New Forecast
</button>

這調用了一個將值設置為 true 的方法

bool ShowPopup = false;
void AddNewForecast()
{
    // Open the Popup
    ShowPopup = true;
}

該值包含在使用引導模式控件（class="modal"）的代碼周圍：

        @if (ShowPopup)
        {
            <!-- This is the popup to create or edit a forecast -->
            <div class="modal" tabindex="-1" style="display:block" role="dialog">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h3 class="modal-title">Edit Forecast</h3>
                            <!-- Button to close the popup -->
                            <button type="button" class="close"
                                    @onclick="ClosePopup">
                                <span aria-hidden="true">X</span>
                            </button>
                        </div>
                        <!-- Edit form for the current forecast -->
                        <div class="modal-body">
                            <input class="form-control" type="text"
                                   placeholder="Celsius forecast"
                                   @bind="objWeatherForecast.TemperatureC" />
                            <input class="form-control" type="text"
                                   placeholder="Fahrenheit forecast"
                                   @bind="objWeatherForecast.TemperatureF" />
                            <input class="form-control" type="text"
                                   placeholder="Summary"
                                   @bind="objWeatherForecast.Summary" />
                            <br />
                            <!-- Button to save the forecast -->
                            <button class="btn btn-primary"
                                    @onclick="SaveForecast">
                                Save
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        }

您將看到一個“模態”彈出窗口

Answer 2

現在，沒有像 WPF 那樣開箱即用的等價物。 但是一些關於此的良好記錄樣本：

https://www.telerik.com/blogs/creating-a-reusable-javascript-free-blazor-modal

https://www.syncfusion.com/blazor-components/blazor-modal-dialog

對我來說唯一的問題是如何為這種對話框設置動畫，例如動畫飛入/淡入淡出等等......

Answer 3

將 WPF 或 WinForms 應用程序移植到 Blazor 的最佳方法是使用 Nevron Open Vision for Blazor：

https://www.nevron.com/products-open-vision.aspx

它允許您從單個代碼庫開發在 Blazor 和 WPF/WinForms 上運行的用戶界面！ 也不需要 HTML 或 JS 知識 - 您只需用 C# 編寫 UI。