WinUI3でポモドーロタイマーを作ってみよう！#1

はじめに

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は情報が少ないのか、たまに誤答されるので注意したい。🤖

次回につづく。