フレームワーク

WinUI 3

概要

WinUI 3は、Microsoftが開発したWindows用のモダンUIフレームワークです。Windows App SDKの一部として提供され、Windows 10およびWindows 11向けのネイティブデスクトップアプリケーションを構築できます。

詳細

WinUI 3は、Windows用のネイティブユーザーインターフェースプラットフォームで、Windows App SDKの中核コンポーネントとして位置づけられています。UWP（Universal Windows Platform）から独立したフレームワークとして設計され、Win32とUWPの両方のアプリケーションモデルをサポートします。Fluent Design Systemを基盤とし、Windows 11の最新デザイン言語に完全対応したモダンなUIコントロールを提供します。C#やC++での開発が可能で、XAMLによる宣言的UI定義により生産性の高い開発を実現します。AOT（Ahead-of-Time）コンパイレーションサポートにより、起動時間の短縮とメモリ使用量の削減を実現します。TabViewコントロールの改良されたタブティアアウト機能など、最新のデスクトップUX パターンをサポートします。Windows 10 version 1809以降で動作し、Microsoft Storeでの配布にも対応しています。

メリット・デメリット

メリット

• モダンUI: Fluent Design SystemとWindows 11ネイティブデザイン
• 高いパフォーマンス: ネイティブコードとAOTコンパイレーション対応
• 豊富なコントロール: 最新のWindows UIコントロールとパターン
• フレキシブルな配布: Microsoft StoreまたはサイドローディングでUSATOR配布可能
• OSとの分離: Windows SDKに依存しない独立したフレームワーク
• 両方のアプリモデル: Win32とUWPアプリケーション両方をサポート
• Microsoft公式サポート: 継続的な開発と長期サポート

デメリット

• Windows専用: Windows 10/11のみ対応、クロスプラットフォーム不可
• 学習コスト: XAML、C#、Windows固有概念の習得が必要
• 新しい技術: UWPからの移行やWPFとの違いを理解する必要
• 制限されたプラットフォーム: モバイルやWeb展開は不可
• 開発環境: Visual Studio 2022以降が必要

主要リンク

• WinUI 3公式サイト
• Windows App SDK
• WinUI 3ドキュメント
• GitHub - microsoft/WindowsAppSDK
• WinUI 3プロジェクトテンプレート
• WinUI Community Toolkit

書き方の例

Hello World アプリケーション

// MainWindow.xaml.cs
using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;

namespace HelloWinUI3
{
    public sealed partial class MainWindow : Window
    {
        public MainWindow()
        {
            this.InitializeComponent();
            this.Title = "Hello WinUI 3";
        }

        private void myButton_Click(object sender, RoutedEventArgs e)
        {
            myButton.Content = "Clicked";
        }
    }
}

XAML UIレイアウト

<!-- MainWindow.xaml -->
<Window x:Class="HelloWinUI3.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Grid>
        <StackPanel Orientation="Vertical" 
                   HorizontalAlignment="Center" 
                   VerticalAlignment="Center">
            <TextBlock Text="Hello, WinUI 3!" 
                      FontSize="24" 
                      HorizontalAlignment="Center" 
                      Margin="0,0,0,20"/>
            
            <Button x:Name="myButton" 
                   Content="Click Me" 
                   Click="myButton_Click"
                   HorizontalAlignment="Center"/>
        </StackPanel>
    </Grid>
</Window>

データバインディング（MVVM）

// ViewModels/MainViewModel.cs
using Microsoft.Toolkit.Mvvm.ComponentModel;
using Microsoft.Toolkit.Mvvm.Input;
using System.Collections.ObjectModel;

public partial class MainViewModel : ObservableObject
{
    [ObservableProperty]
    private string title = "WinUI 3 App";

    [ObservableProperty]
    private string message = "Welcome to WinUI 3!";

    [ObservableProperty]
    private int clickCount = 0;

    public ObservableCollection<string> Items { get; } = new();

    [RelayCommand]
    private void IncreaseCounter()
    {
        ClickCount++;
        Message = $"Button clicked {ClickCount} times";
        Items.Add($"Click #{ClickCount} at {DateTime.Now:HH:mm:ss}");
    }

    [RelayCommand]
    private void ClearItems()
    {
        Items.Clear();
        ClickCount = 0;
        Message = "Items cleared!";
    }
}

高度なUIコントロール

<!-- TabViewとNavigationViewの例 -->
<Grid>
    <NavigationView x:Name="NavigationViewControl" 
                   Header="WinUI 3 Demo App"
                   IsTabStop="False"
                   SelectionChanged="NavigationViewControl_SelectionChanged">
        <NavigationView.MenuItems>
            <NavigationViewItem Icon="Home" Content="Home" Tag="home" />
            <NavigationViewItem Icon="Document" Content="Documents" Tag="documents" />
            <NavigationViewItem Icon="Download" Content="Downloads" Tag="downloads" />
        </NavigationView.MenuItems>

        <TabView x:Name="MainTabView" 
                TabWidthMode="Equal"
                CanTearOutTabs="True"
                AddTabButtonClick="MainTabView_AddTabButtonClick"
                TabCloseRequested="MainTabView_TabCloseRequested">
            <TabView.TabItems>
                <TabViewItem Header="Tab 1">
                    <Grid Background="LightBlue">
                        <TextBlock Text="Content of Tab 1" 
                                  HorizontalAlignment="Center" 
                                  VerticalAlignment="Center"/>
                    </Grid>
                </TabViewItem>
                <TabViewItem Header="Tab 2">
                    <Grid Background="LightGreen">
                        <TextBlock Text="Content of Tab 2" 
                                  HorizontalAlignment="Center" 
                                  VerticalAlignment="Center"/>
                    </Grid>
                </TabViewItem>
            </TabView.TabItems>
        </TabView>
    </NavigationView>
</Grid>

アニメーションとビジュアルエフェクト

// アニメーション付きボタン
private void AnimateButton()
{
    var scaleAnimation = ConnectedAnimationService.GetForCurrentView()
        .PrepareToAnimate("buttonScale", myButton);
    
    // スケールアニメーション
    var compositor = ElementCompositionPreview.GetElementVisual(myButton).Compositor;
    var scaleVector3 = compositor.CreateVector3KeyFrameAnimation();
    scaleVector3.InsertKeyFrame(0f, new Vector3(1.0f));
    scaleVector3.InsertKeyFrame(0.5f, new Vector3(1.1f));
    scaleVector3.InsertKeyFrame(1f, new Vector3(1.0f));
    scaleVector3.Duration = TimeSpan.FromMilliseconds(300);

    var visual = ElementCompositionPreview.GetElementVisual(myButton);
    visual.StartAnimation("Scale", scaleVector3);
}

ファイル操作とストレージ

// ファイル選択とアクセス
private async void OpenFileButton_Click(object sender, RoutedEventArgs e)
{
    var openPicker = new Windows.Storage.Pickers.FileOpenPicker();
    
    // WinUI 3では、PickerにWindowハンドルを設定する必要がある
    var hWnd = WindowNative.GetWindowHandle(this);
    InitializeWithWindow.Initialize(openPicker, hWnd);
    
    openPicker.ViewMode = PickerViewMode.Thumbnail;
    openPicker.SuggestedStartLocation = PickerLocationId.PicturesLibrary;
    openPicker.FileTypeFilter.Add(".jpg");
    openPicker.FileTypeFilter.Add(".png");
    openPicker.FileTypeFilter.Add(".bmp");

    var file = await openPicker.PickSingleFileAsync();
    if (file != null)
    {
        var fileContent = await FileIO.ReadTextAsync(file);
        ContentTextBlock.Text = $"Opened: {file.Name}\nPath: {file.Path}";
    }
}

// アプリケーションデータの保存
private async void SaveData()
{
    var localSettings = ApplicationData.Current.LocalSettings;
    localSettings.Values["LastSavedTime"] = DateTime.Now.ToString();
    
    var localFolder = ApplicationData.Current.LocalFolder;
    var dataFile = await localFolder.CreateFileAsync("data.txt", 
        CreationCollisionOption.ReplaceExisting);
    
    await FileIO.WriteTextAsync(dataFile, "Hello from WinUI 3!");
}

リソースとテーマ

<!-- App.xaml リソース定義 -->
<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
        </ResourceDictionary.MergedDictionaries>
        
        <!-- カスタムスタイル -->
        <Style x:Key="CustomButtonStyle" TargetType="Button">
            <Setter Property="Background" Value="{ThemeResource AccentButtonBackground}"/>
            <Setter Property="Foreground" Value="{ThemeResource AccentButtonForeground}"/>
            <Setter Property="CornerRadius" Value="8"/>
            <Setter Property="Padding" Value="16,8"/>
        </Style>
        
        <!-- カスタムカラー -->
        <SolidColorBrush x:Key="CustomAccentBrush" Color="#007ACC"/>
    </ResourceDictionary>
</Application.Resources>