はじめに

WinUI3でポモドーロタイマーを作りたくなったので作ってみる。(全3記事を予定)

WinUI3とは、(下記URLより)

WinUI 3 は、(完全に Windows 10 SDK から切り離された) Windows App SDK に付属するネイティブ UI プラットフォーム コンポーネントです。 Windows App SDK には、Windows 10 以降を対象とした実稼働デスクトップ アプリを作成し、Microsoft Store に公開するために使用できる、API とツールの統合セットが用意されています。

WPFとWinUI3の比較(Gemini1.5より)

機能	WPF	WinUI 3
フレームワーク	.NET Framework / .NET	Windows App SDK
成熟度	高い	成長中
プラットフォーム	Windows デスクトップ	Windows デスクトップ (クロスプラットフォームも可)
OS 更新への依存	高い	低い (OS から分離)
パフォーマンス	比較的低い	高い
モダンな機能	限定的	最新の機能をサポート

これを見る限り、こだわりがなければ成熟しているWPFのほうが楽そうw、

ですが、今回は勉強もかねてWinUI3で実装していきます！

今回作るポモドーロタイマー

こんな感じのアプリを作成する。

主な機能は

サイドのメニューバー
ポモドーロタイマー

Todoリスト

設定画面

アプリアイコン

OSのダークモードの設定で背景色が変わります。

対象

OS　Windows

事前準備

VS2022をインストールしていること。

　https://visualstudio.microsoft.com/ja/downloads/

.Net8をインストールしていること。

https://dotnet.microsoft.com/ja-jp/download/dotnet/8.0

便利ツール(サンプルアプリ兼リソース)

WinUI 3 Gallery:

提供元: Microsoft

対象フレームワーク: WinUI 3

Windows Community Toolkit Gallery

提供元: オープンソースコミュニティ

対象フレームワーク: UWP, WinUI 2, WinUI 3, .NET MAUIなど、複数のWindowsプラットフォーム

環境作成

Visual Studio Installerで下記にチェックを入れる。

(Windowsアプリケーション開発)

インストール完了後、

新しいプロジェクトの作成で

C#,Windows,WinUI3 で絞り込み、空のアプリ、パッケージ化(デスクトップのWinUI3)を選択する。

プロジェクトの作成

今回は、プロジェクト名は Pomodoro で作成する。

新規で立ち上げると下記の構成でファイルが生成される。

一度、この新規の状態でDebugする(PackageでDebug)

下記(DarkMode)

左上の上部のタイトルを変更する

今はこんな感じのタイトルになっている。

もう少しモダンなタイトルデザインに変更する。

MainWindow.xaml

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="32"/>
            <RowDefinition/>
        </Grid.RowDefinitions>

        <Grid x:Name="AppTitleBar">
            <Image Source="Assets/StoreLogo.png"
                   HorizontalAlignment="Left" 
                   Width="16" Height="16" 
                   Margin="8,0"/>
            <TextBlock x:Name="AppTitleTextBlock" Text="PomodoroApp"
                       TextWrapping="NoWrap"
                       Style="{StaticResource CaptionTextBlockStyle}" 
                       VerticalAlignment="Center"
                       Margin="28,0,0,0"/>
        </Grid>

        <StackPanel Grid.Row="1" Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
            <Button x:Name="myButton" Click="myButton_Click">Click Me</Button>
        </StackPanel>
    </Grid>

MainWindow.xaml.cs

public MainWindow()
{
    this.InitializeComponent();
    ExtendsContentIntoTitleBar = true;
    SetTitleBar(AppTitleBar);
}

下記のような感じになる。

まとめ

今回は、環境作成と、タイトルバー変更まで行った。

AIに聞きながら進めているが、

WinUI3は情報が少ないのか、たまに誤答されるので注意したい。🤖

次回につづく。