打造你的第一個 WinUI 應用程式

打造你的第一個 WinUI 應用程式,看看它在 Windows 上如何實現。 這個快速入門會帶你從工具設定到執行中的應用程式,然後引導你完成第一次介面更新。

開始之前

您將學到什麼

  • 選擇並設定你的開發工具。
  • 建立並執行 WinUI 應用程式。
  • 更新介面,然後在執行中的應用程式中查看變更。

選擇開發工具

請透過本快速入門,依循兩條建議路徑中的任一條。

  • winapp CLI:在你偏好的編輯器中,透過終端機工作。 這種命令列工作流程也很適用於代理型程式設計。
  • Visual Studio:使用整合的開發與除錯體驗。

如果你的工具已經安裝好,請到 「建立你的第一個應用程式」頁面。

安裝工具

  1. 啟用 開發者模式。 你可以透過 開發者設定開啟其設定。

  2. 安裝 .NET 10 SDK 和 Windows 應用程式開發命令列介面。 如果使用 WinGet,請執行:

    winget install --id Microsoft.DotNet.SDK.10 --exact --source winget
    winget install --id Microsoft.WinAppCLI --exact --source winget
    

    如果所需工具已安裝,則跳過安裝。

  3. 開啟一個新終端機,讓它載入已安裝的指令,然後檢查版本:

    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 會建置並啟動專案;您不需要另外執行建置或套件註冊命令。

你的應用程式會開啟一個桌面視窗。 請使用下方的 進行變更 繼續。

進行變更

保留你剛建立的專案。 在其現有介面中新增一則訊息:

  1. 關閉正在執行的應用程式。 在編輯器中開啟 MainPage.xaml 。 如果你的範本沒有該檔案,請改為開啟 MainWindow.xaml 。

  2. 找到包含應用程式內容的版面配置面板。 在目前的 CLI 空白範本中,MainPage.xaml 包含一個空的 <Grid />。 將那個空網格換成:

    <Grid>
        <TextBlock
            Text="Hello, WinUI!"
            HorizontalAlignment="Center"
            VerticalAlignment="Center" />
    </Grid>
    

    如果面板本身已經有控制項,就只新增該面板內部的控制 TextBlock 項。 保留現有的控制項、名稱和事件處理程式。 不要在 PageWindowMainWindow.xaml。

  3. 儲存檔案。 從專案資料夾重新執行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 專案來教授頁面、導航、資料綁定與本地儲存。 你也可以在 資源 中找到焦點控制範例。