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

# はじめに

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

WinUI3とは、(下記URLより)

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

https://learn.microsoft.com/ja-jp/windows/apps/winui/winui3/


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

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

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

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

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

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

主な機能は

* サイドのメニューバー

* ポモドーロタイマー

![WinUIWinUI3はじめてみよう1_0.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3777149/de345842-b438-ca6c-2a2e-1ef3e42c9fc3.jpeg)

* Todoリスト

![WinUIWinUI3はじめてみよう1_1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3777149/9ed83276-7df7-ae31-fd00-f429738f4c23.jpeg)

* 設定画面

![WinUIWinUI3はじめてみよう1_2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3777149/d58eafee-b7a3-c404-5b8f-c0dff47c9f48.jpeg)

* アプリアイコン

![WinUIWinUI3はじめてみよう1_3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3777149/ae8a1a9b-1ed7-cac9-b8b6-5b9e38c1941b.jpeg)

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

![WinUIWinUI3はじめてみよう1_4.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3777149/ac7153ae-1ce2-8e27-8a30-83ff256c7c43.jpeg)

# 対象

* 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

https://apps.microsoft.com/detail/9p3jfpwwdzrc?hl=ja-JP&gl=JP

* Windows Community Toolkit Gallery

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

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

https://apps.microsoft.com/detail/9nblggh4tlcq?hl=ja-jp&gl=JP

# 環境作成

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

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

![WinUIWinUI3はじめてみよう1_4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3777149/c21ff1b9-9671-3158-8368-a0452b7689e4.png)

インストール完了後、

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

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

![WinUIWinUI3はじめてみよう1_5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3777149/b98b7260-402d-542b-fbee-84e50591c501.png)

# プロジェクトの作成

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

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

![WinUIWinUI3はじめてみよう1_6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3777149/a75ff6ca-eb96-d436-1b23-14ca41345615.png)

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

下記(DarkMode)

![WinUIWinUI3はじめてみよう1_7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3777149/e0982e47-cd48-03cc-778f-f2aa2b88f100.png)

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

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

![WinUIWinUI3はじめてみよう1_8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3777149/a74f48fa-1f43-70f1-41a0-0bd1b53652d8.png)

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

```xaml: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>
```

```csharp:MainWindow.xaml.cs
public MainWindow()
{
    this.InitializeComponent();
    ExtendsContentIntoTitleBar = true;
    SetTitleBar(AppTitleBar);
}

```

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

![WinUIWinUI3はじめてみよう1_9.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3777149/eca909b8-ae78-2ce1-ff9d-dac450c1bafc.jpeg)

# まとめ

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

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

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

次回につづく。

https://qiita.com/shisojuice/items/d4457bab83ab2a9e3e1c

https://qiita.com/shisojuice/items/7d46c77e67773f3e3de2