Chapter 42

ステップ12-1: アクセントカラー

Apterygiformes-zenn
Apterygiformes-zenn
2022.01.27に更新

概要

アクセントカラーを使ってみます。

プロジェクトテンプレートの作成

1)

その前に、よく使うプロジェクトの設定をテンプレートとして保存しておきます。

新しいプロジェクトの作成でWPFアプリケーションを、プロジェクト名:WpfModernApp、フレームワーク:.NET 6.0で作成してください。

プロジェクトを右クリック、NuGetパッケージの管理を選択します。

参照タブで検索ボックスにmodernwpfuiと入力、ModernWpfUIをインストールします。

2)

App.xamlを以下で丸ごと置き換えます。

App.xaml
<Application x:Class="WpfModernApp.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:WpfModernApp"
             xmlns:ui="http://schemas.modernwpf.com/2019"
             StartupUri="MainWindow.xaml">
    <Application.Resources>

        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ui:ThemeResources />
                <ui:XamlControlsResources />
                <!-- Other merged dictionaries here -->
            </ResourceDictionary.MergedDictionaries>
            <!-- Other app resources here -->
        </ResourceDictionary>

    </Application.Resources>
</Application>

MainWindow.xamlを以下で丸ごと置き換えます。

MainWindow.xaml
<Window x:Class="WpfModernApp.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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfModernApp"
        xmlns:ui="http://schemas.modernwpf.com/2019"
        ui:WindowHelper.UseModernWindowStyle="True"
        mc:Ignorable="d"
        Title="MainWindow"
        Height="350"
        Width="500"
        MinHeight="150"
        MinWidth="150"
        ResizeMode="CanResizeWithGrip">
    <Grid>
        <StackPanel>

        </StackPanel>
    </Grid>
</Window>

3)

MainWindow.xaml.csを開き、usingに以下を追加します。

using UI = ModernWpf;

4)

ソリューションエクスプローラーでプロジェクトをダブルクリック、csprojのTargetFrameworkの値をnet6.0-windows10.0.18362.0に書きかえます。

TargetFramework
net6.0-windows10.0.18362.0

5)

ソリューションエクスプローラーでプロジェクトを右クリック、追加 > 新しい項目を選択します。
新しい項目の追加ダイアログで左のツリーから全般を選択し、アプリケーションマニフェストファイル (Windowsのみ)を選択します。
ファイル名がapp.manifestになっていることを確認し、追加ボタンを押します。

app.manifestを以下の内容で丸ごと置き換えます。高DPI(異なるDPI設定のマルチディスプレイ)対応です。

app.manifest
<?xml version="1.0" encoding="utf-8"?>
<assembly manifestVersion="1.0" xmlns="urn:schemas-microsoft-com:asm.v1">
    <assemblyIdentity version="1.0.0.0" name="MyApplication.app"/>
    <trustInfo xmlns="urn:schemas-microsoft-com:asm.v2">
        <security>
            <requestedPrivileges xmlns="urn:schemas-microsoft-com:asm.v3">
                <requestedExecutionLevel level="asInvoker" uiAccess="false" />
            </requestedPrivileges>
        </security>
    </trustInfo>

    <compatibility xmlns="urn:schemas-microsoft-com:compatibility.v1">
        <application>

            <!-- Windows Vista -->
            <supportedOS Id="{e2011457-1546-43c5-a5fe-008deee3d3f0}" />

            <!-- Windows 7 -->
            <supportedOS Id="{35138b9a-5d96-4fbd-8e2d-a2440225f93a}" />

            <!-- Windows 8 -->
            <supportedOS Id="{4a2f28e3-53b9-4441-ba9c-d69d4a4a6e38}" />

            <!-- Windows 8.1 -->
            <supportedOS Id="{1f676c76-80e1-4239-95bb-83d0f6d0da78}" />

            <!-- Windows 10 -->
            <supportedOS Id="{8e0f7a12-bfb3-4fe8-b9a5-48fd50a15a9a}" />

        </application>
    </compatibility>

    <application xmlns="urn:schemas-microsoft-com:asm.v3">
        <windowsSettings>
            <dpiAware xmlns="http://schemas.microsoft.com/SMI/2005/WindowsSettings">true/PM</dpiAware>
            <!-- Windows 10 ver.1607以降向け -->
            <dpiAwareness xmlns="http://schemas.microsoft.com/SMI/2016/WindowsSettings">PerMonitorV2, PerMonitor</dpiAwareness>
        </windowsSettings>
    </application>

</assembly>

編集したファイルをすべて保存します。

メニューのビルド > ソリューションのリビルドを実行し、正常にビルドできることを確認します。

6)

メニューのプロジェクト > テンプレートのエクスポートを選択します。

プロジェクトテンプレートが選択されていて、作成元プロジェクトにWpfModernAppが選択されている状態で次へボタンを押します。

テンプレートの説明.NET WPFアプリケーションを作成するためのプロジェクトを入力し、完了ボタンを押します。

My Exported Templatesフォルダが開きます。
WpfModernApp.zipを右クリックし、すべて展開を選択します。

展開後のフォルダの中のMyTemplate.vstemplateファイルをテキストエディタで開きます。
TemplateDataタグの下層に以下を追加し、保存します。

    <LanguageTag>csharp</LanguageTag>
    <PlatformTag>windows</PlatformTag>
    <ProjectTypeTag>desktop</ProjectTypeTag>

編集後の展開ファイル一式を再度zip圧縮します。

zipファイル名は元と同じ名前にします。

再作成したzipファイルを切り取り、

アドレスバーのVisual Studio 2022を選択して上の階層に上がり、

Templatesフォルダを開き、ProjectTemplatesフォルダを開き、貼り付けを実行します。

ProjectTemplatesフォルダにもWpfModernApp.zipがあるので上書きします。

フォルダ階層は以下のようになっています。

  • ドキュメント
    • Visual Studio 2022
      • My Exported Templates(テンプレート エクスポート先)
      • Templates
        • ProjectTemplates(ここに配置したzipがテンプレートとして使用される)

ドキュメントフォルダのVisual Studio 2022\My Exported Templatesフォルダのエクスポートファイルは
不要なら削除しておきます。

テンプレートの元にしたプロジェクトも不要なら削除しておきます。

Visual Studioを終了します。

プロジェクトの作成

Visual Studioを起動し、新しいプロジェクトの作成を選択します。
WpfModernAppを選択し、次へボタンを押します。

↓↓↓↓↓

プロジェクト名AccentColor_1を入力し、作成ボタンを押します。

↓↓↓↓↓