打造你的第一個 WinUI 應用程式,看看它在 Windows 上如何實現。 這個快速入門會帶你從工具設定到執行中的應用程式,然後引導你完成第一次介面更新。
開始之前
您將學到什麼
- 選擇並設定你的開發工具。
- 建立並執行 WinUI 應用程式。
- 更新介面,然後在執行中的應用程式中查看變更。
選擇開發工具
請透過本快速入門,依循兩條建議路徑中的任一條。
- winapp CLI:在你偏好的編輯器中,透過終端機工作。 這種命令列工作流程也很適用於代理型程式設計。
- Visual Studio:使用整合的開發與除錯體驗。
如果你的工具已經安裝好,請到 「建立你的第一個應用程式」頁面。
安裝工具
安裝 .NET 10 SDK 和 Windows 應用程式開發命令列介面。 如果使用 WinGet,請執行:
winget install --id Microsoft.DotNet.SDK.10 --exact --source winget winget install --id Microsoft.WinAppCLI --exact --source winget如果所需工具已安裝,則跳過安裝。
開啟一個新終端機,讓它載入已安裝的指令,然後檢查版本:
dotnet --version winapp --version此工作流程請使用 .NET SDK 10 或更高版本,以及 winapp CLI 0.6 或更高版本。
備註
Winapp CLI 目前處於公開預覽階段。
winapp new 會管理 WinUI 專案範本,但不會安裝 .NET SDK。 請參閱 CLI 0.6 公告,了解新專案與執行指令。
建立你的第一個應用程式
請使用你上面安裝的工作流程來建立並啟動專案。
從你存放專案的資料夾裡,執行:
winapp new --name MyWinUIApp --template winui --use-defaults
cd MyWinUIApp
winapp run
winapp new 建立空白 WinUI 應用程式。
winapp run 會建置並啟動專案;您不需要另外執行建置或套件註冊命令。
你的應用程式會開啟一個桌面視窗。 請使用下方的 進行變更 繼續。
進行變更
保留你剛建立的專案。 在其現有介面中新增一則訊息:
關閉正在執行的應用程式。 在編輯器中開啟
MainPage.xaml。 如果你的範本沒有該檔案,請改為開啟MainWindow.xaml。找到包含應用程式內容的版面配置面板。 在目前的 CLI 空白範本中,
MainPage.xaml包含一個空的<Grid />。 將那個空網格換成:<Grid> <TextBlock Text="Hello, WinUI!" HorizontalAlignment="Center" VerticalAlignment="Center" /> </Grid>如果面板本身已經有控制項,就只新增該面板內部的控制
TextBlock項。 保留現有的控制項、名稱和事件處理程式。 不要在PageWindowMainWindow.xaml。儲存檔案。 從專案資料夾重新執行
winapp run,或在 Visual Studio 按 F5。
祝賀! 你已經建立了、執行並更新了你的第一個 WinUI 應用程式。 視窗現在顯示 「Hello, WinUI!」
Troubleshooting
| Problem | 要檢查的事項 |
|---|---|
winapp 或 dotnet 無法辨識。 |
安裝後重新開啟終端機。 請在 CLI 分頁使用版本指令確認這兩個工具是否可用。 |
winapp new 未被承認。 |
此工作流程需要 Winapp CLI 0.6 或更新版本。 使用您選擇的安裝方式更新 CLI。 |
| WinUI 範本不會出現在 Visual Studio 裡。 | 打開 Visual Studio 安裝程式,選擇修改,並確認 WinUI 應用程式開發工作負載已安裝。 之後重啟 Visual Studio。 |
| 建置顯示 SDK 或還原錯誤。 | 檢查所選工作流程的前置條件以及建置輸出中的第一個錯誤。 在更改專案屬性前,請使用 Windows 應用程式 SDK 支援檢查版本要求。 |
| 部署指出開發人員模式已停用。 | 啟用 開發者模式,然後再次執行應用程式。 |
| 您的新訊息似乎沒有顯示。 | 儲存 XAML 檔案並重新啟動專案。 在帶有 的 MainPage.xaml範本中,將訊息加入該頁面,而不是替換視窗的主機框。 |
後續步驟
筆記教學則使用獨立 WinUINotes 專案來教授頁面、導航、資料綁定與本地儲存。 你也可以在 資源 中找到焦點控制範例。