[WPF] Windows 10に馴染むテーマを適用する

![000.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/6000f7fa-7dbf-2927-7290-c270d6f63098.png)


# ■1. 環境

## ◇環境1

* Windows 10
* Visual Studio 2019（Version 16.8.2）
* .NET Framework 4.7.2 / .NET Core 3.1 / .NET 5.0
* C#

## ◇環境2

* Windows 11
* Visual Studio 2022（Version 17.0.4）
* .NET 6.0
* C#

# ■2. プロジェクト作成

## ◇環境1

### ◎.NET Frameworkの場合

![001-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/a387604f-274e-99b7-f92a-4f6a1b885044.png)

![001-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/092d666b-16d4-4499-fef5-07261dfa2373.png)

### ◎.NET Core 3.1/.NET 5.0の場合

![002-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/b236bbbf-3ec6-0e65-df7c-36e83b35dd49.png)

![002-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/cdca585d-485e-bfa8-f4fc-d54f8210dc62.png)

## ◇環境2

### ◎.NET 6.0の場合

新しいプロジェクトの作成で`WPF アプリケーション`を選択。
プロジェクト名を設定し、フレームワークに`.NET 6.0`を選択。

# ■3. プロジェクト設定

## ◇環境1

### ◎.NET Core 3.1の場合

![002-3b.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/70cc84b9-0e37-940c-0f2d-a2ed95909723.png)

### ◎.NET 5.0の場合

![002-4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/3177a8eb-22c0-08db-71f9-704ea2aa5414.png)

ソリューションエクスプローラーでSampleAppプロジェクトをダブルクリック、csprojファイルの
`Sdk`を`Microsoft.NET.Sdk`に、
`TargetFramework`を`net5.0-windows10.0.18362.0`に編集。

```xml:csproj
<Project Sdk="Microsoft.NET.Sdk">

  <PropertyGroup>
    <OutputType>WinExe</OutputType>
    <TargetFramework>net5.0-windows10.0.18362.0</TargetFramework>
    <UseWPF>true</UseWPF>
  </PropertyGroup>

</Project>
```

## ◇環境2

### ◎.NET 6.0の場合

ソリューションエクスプローラーでSampleAppプロジェクトをダブルクリック、csprojファイルの
`TargetFramework`を`net6.0-windows10.0.18362.0`に編集。

```xml:csproj
<Project Sdk="Microsoft.NET.Sdk">

  <PropertyGroup>
    <OutputType>WinExe</OutputType>
    <TargetFramework>net6.0-windows10.0.18362.0</TargetFramework>
    <Nullable>enable</Nullable>
    <UseWPF>true</UseWPF>
  </PropertyGroup>

  <ItemGroup>
    :
```

# ■4. NuGet

## ◇共通作業

NuGet検索、`modernwpfui`
インストール、`ModernWpfUI`
![003.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/f7a91504-2fac-cc08-dc34-71ae48d55580.png)

インストール、`ModernWpf.MessageBox`
![004.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/87e50763-d4a3-37e9-b9b8-3b89337f2280.png)

## ◇.NET Frameworkの場合

プロジェクトに`package.config`が存在する場合は
右クリックして`PackageReference`に移行
![005.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/bc589a91-5762-6e1c-e87f-5c8bd06a2d7d.png)

# ■5. テーマ適用

`xmlns:ui`, `ResourceDictionary`追加
![100.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/d5d1a04c-bc80-ec8c-27d3-256b0fe3f869.png)

```Xml:App.xaml
<Application
    x:Class="SampleApp.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:SampleApp"
    xmlns:ui="http://schemas.modernwpf.com/2019"
    StartupUri="MainWindow.xaml">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ui:ThemeResources />
                <ui:XamlControlsResources />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>
```

`xmlns:ui`, `UseModernWindowStyle`追加
![105.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/8818fb7a-7326-feee-e871-e70b787dc1ae.png)

```Xml:MainWindow.xaml
<Window
    x:Class="SampleApp.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="clr-namespace:SampleApp"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    xmlns:ui="http://schemas.modernwpf.com/2019"
    ui:WindowHelper.UseModernWindowStyle="True"
```


# ■6. 画面作成

```xml:MainWindow.xaml
<Window
    x:Class="SampleApp.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="clr-namespace:SampleApp"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:ui="http://schemas.modernwpf.com/2019"
    Title="MainWindow"
    Width="800"
    Height="550"
    ui:WindowHelper.UseModernWindowStyle="True"
    ResizeMode="CanResizeWithGrip"
    mc:Ignorable="d">
    <Window.Resources>
        <Style TargetType="ui:SimpleStackPanel">
            <Setter Property="Spacing" Value="6" />
        </Style>
    </Window.Resources>

    <ui:SimpleStackPanel Margin="6">
        <ui:SimpleStackPanel Orientation="Horizontal">
            <Button Click="Button_Click" Content="Button1" />
            <Button Content="Button2" />
            <Button Content="Button3" Style="{StaticResource AccentButtonStyle}" />
            <CheckBox Content="CheckBox1" IsChecked="True" />
            <CheckBox Content="CheckBox2" />
            <RadioButton Content="RadioButton1" IsChecked="True" />
            <RadioButton Content="RadioButton2" />
        </ui:SimpleStackPanel>

        <ui:SimpleStackPanel Orientation="Horizontal">
            <TextBlock
                Width="200"
                FontFamily="UD Digi Kyokasho NK-R"
                FontSize="36"
                Text="abcdあいうえおかきくけこたちつてと123"
                TextWrapping="Wrap" />
            <ComboBox VerticalAlignment="Center" SelectedIndex="0">
                <ComboBoxItem Content="イイイイ" />
                <ComboBoxItem Content="ロロロロ" />
                <ComboBoxItem Content="ハハハハ" />
            </ComboBox>
            <Calendar />
            <Slider
                Maximum="100"
                Orientation="Vertical"
                Value="20" />
            <Slider
                Maximum="10"
                Orientation="Vertical"
                TickPlacement="Both"
                Value="8" />
        </ui:SimpleStackPanel>

        <TabControl Style="{StaticResource TabControlPivotStyle}">
            <TabItem Header="タブ1" IsSelected="True">
                <ui:SimpleStackPanel Orientation="Horizontal">
                    <ui:ToggleSwitch IsOn="True" />
                    <ui:ToggleSwitch IsOn="False" />
                    <ui:HyperlinkButton Content="Qiita" NavigateUri="https://qiita.com/" />
                    <ui:ProgressRing
                        Width="50"
                        Height="50"
                        IsActive="True" />
                    <TextBox ui:ControlHelper.PlaceholderText="何か入力してください" Text="" />
                </ui:SimpleStackPanel>
            </TabItem>

            <TabItem Header="タブ2" />
            <TabItem Header="タブ3" />
            <TabItem Header="タブ4" />
        </TabControl>
    </ui:SimpleStackPanel>
</Window>
```

```csharp:MainWindow.xaml.cs
using System.Windows;
using MW = ModernWpf;

namespace SampleApp
{
    /// <summary>
    /// MainWindow.xaml の相互作用ロジック
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            MW.MessageBox.Show("こんにちは こんにちは こんにちは こんにちは こんにちは");
        }
    }
}
```

# ■7. 実行

ダークテーマ
![010_.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/e6f330e4-4e5e-79d5-69a5-9401e4d7282f.png)

ライトテーマ
![011_.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/7ba37540-7829-3bec-c5f9-e5dc15e75c59.png)

ダーク ハイコントラスト
![012_.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/4f588968-f3d4-4e2f-1498-f127505b1224.png)

ライト ハイコントラスト
![013_.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/f56210c8-6abb-a5de-885b-d716a514e8b7.png)