# C# WinUIでモダンなアプリを構築する方法

## 目次

1. はじめに

2. WinUIとは

3. 開発環境の構築

   - 3-1. 必要なツールのインストール

   - 3-2. 新規プロジェクトの作成

4. モダンUIデザインの基本

   - 4-1. Fluent Design System

   - 4-2. レイアウトの設計

5. WinUIの主要コンポーネント

   - 5-1. コントロールの紹介

   - 5-2. データバインディング

6. 高度な機能の実装

   - 6-1. カスタムコントロール

   - 6-2. アニメーションの活用

7. デプロイとテスト

   - 7-1. アプリのビルド

   - 7-2. テストとデバッグ

8. まとめ

## 1. はじめに

本記事では、C#とWinUIを利用したモダンなデスクトップアプリケーションの構築方法について解説します。WinUIは、Windows 10およびWindows 11向けの最新のユーザーインターフェイス（UI）フレームワークとして登場し、Fluent Design Systemによる美しいインターフェースを提供します。

## 2. WinUIとは

WinUIは、Microsoftが提供するWindowsアプリケーションのための最新UIフレームワークです。従来のWPF（Windows Presentation Foundation）やUWP（Universal Windows Platform）から進化し、より直感的なデザインと優れたパフォーマンスを提供します。

## 3. 開発環境の構築

### 3-1. 必要なツールのインストール

WinUIアプリを開発するためには、以下のツールが必要です：

- Visual Studio 2022（最新版）

- Windows SDK

- .NET 5.0以降

まずはVisual Studioを開き、必要なコンポーネントをインストールします。「インストール先を選択」画面で、Windows開発用のワークロードをチェックしてください。

### 3-2. 新規プロジェクトの作成

Visual Studioを使って新規プロジェクトを作成します。「ファイル」メニューから「新規」->「プロジェクト」を選択し、「WinUI 3 アプリ（Windows App SDK）」を選びます。プロジェクト名や保存場所を指定して「作成」をクリックします。

## 4. モダンUIデザインの基本

### 4-1. Fluent Design System

Fluent Design Systemは、Windowsアプリのためのデザインシステムであり、以下の要素を中心に構成されています：

- 光と影

- 動きと深度

- マテリアル

### 4-2. レイアウトの設計

WinUIは、グリッド、スタックパネルなどの使いやすいレイアウトコントロールを提供します。例えば、以下のXAMLコードで簡単なレイアウトを構築できます：

```xaml

<Grid>

    <Grid.RowDefinitions>

        <RowDefinition Height="Auto" />

        <RowDefinition Height="*" />

    </Grid.RowDefinitions>

    <TextBlock Text="Welcome to WinUI" Grid.Row="0" Margin="10"/>

    <Button Content="Click Me" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center"/>

</Grid>

```

## 5. WinUIの主要コンポーネント

### 5-1. コントロールの紹介

WinUIには多くのビルトインコントロールがあります。例えば、`Button`、`TextBox`、`ListView`などがあり、これらを使ってインタラクティブなUIを構築できます。

### 5-2. データバインディング

データバインディングは、UIとデータソースを結びつける強力な機能です。`Binding`を使用することで、データの更新をUIに反映させることができます。以下はシンプルな例です：

```xaml

<TextBox Text="{Binding Path=Name, Mode=TwoWay}"/>

```

```csharp

public class MyViewModel : INotifyPropertyChanged

{

    private string _name;

    public string Name

    {

        get => _name;

        set

        {

            _name = value;

            OnPropertyChanged(nameof(Name));

        }

    }

    public event PropertyChangedEventHandler PropertyChanged;

    protected void OnPropertyChanged(string name)

    {

        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));

    }

}

```

## 6. 高度な機能の実装

### 6-1. カスタムコントロール

WinUIではカスタムコントロールを作成し、より具体的な動作を実装することが可能です。ここでは、`UserControl`を拡張して独自のコントロールを作成できます。

### 6-2. アニメーションの活用

アニメーションをUIに付加することで、よりダイナミックなアプリケーションが構築できます。WinUIの`Storyboard`を活用することで効果的なアニメーションを実現できます。

```xaml

<StackPanel>

    <StackPanel.Resources>

        <Storyboard x:Name="MyStoryboard">

            <DoubleAnimation Storyboard.TargetName="MyButton" 

                             Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"

                             From="0" To="100" Duration="0:0:1"/>

        </Storyboard>

    </StackPanel.Resources>

    <Button x:Name="MyButton" Content="Animate" RenderTransformOrigin="0.5,0.5">

        <Button.RenderTransform>

            <CompositeTransform/>

        </Button.RenderTransform>

    </Button>

</StackPanel>

```

## 7. デプロイとテスト

### 7-1. アプリのビルド

アプリをビルドするには、「ビルド」メニューから「ソリューションのビルド」を選択します。ビルドが成功したら、実行可能ファイルを作成し、デプロイが可能になります。

### 7-2. テストとデバッグ

WinUIアプリはVisual Studioのデバッグツールを用いて、効率よくテストとデバッグが行えます。ブレークポイントを設定してコードの動作を確認したり、出力ウィンドウでログをチェックしたりできます。

## 8. まとめ

WinUIを使用することで、Windowsアプリの開発がより直感的で効率的に行えるようになります。Fluent Design Systemを活用し、美しいUIを作成できるだけでなく、データバインディングやアニメーションなどの高度な機能によって、インタラクティブでパフォーマンスの高いアプリケーションを構築することが可能です。引き続き学び続け、最新のUI技術を取り入れてください。

C# WinUIでモダンなアプリを構築する方法

目次

続きを読むには単価診断を受けてください（30秒）