ホーム / WindowChrome /

WPFでWindowChromeを使いデザインを柔軟に変更できるウインドウを作る

2021/10/29

C# Prism WindowChrome

アイキャッチ

探せば多くの情報が出てきますが、自分なりにアレンジしたウインドウの作り方を紹介します。

また、同時にReactivePropertyを使った制御方法なども紹介します。

私の作成するサンプルソースファイルは

準備としてはNuGetでReactiveProperty.WPFをインストールしておいてください。

今回の記述には影響しませんが、Prismを使ったアプリケーションになっています。

MainWindow.xamlに追記

ファイル構成はViewsにデザインを記述した「BasicDesign.xaml」を追加した事を前提として解説を進めます。

尚タイトルはReactivePropertySlim<string>を使いますので「Binding Title」から「Binding Title.Value」に変更しています。

自分の管理しやすいファイル名などがあれば随時変更してくださ。

MainWindow.xamlの先頭にある<Window...内に追加するのは

  1. Style="{DynamicResource WindowStyle}"
  2. xmlns:i="http://schemas.microsoft.com/xaml/behaviors"
  3. xmlns:ri="clr-namespace:Reactive.Bindings.Interactivity;assembly=ReactiveProperty.WPF"

1行目はウインドウスタイルの指定となります。

残り2行はウインドウの変化に関するイベントが発生した場合ViewModelにあるReactiveCommandを実行するために必要となる記述です。

次に追加するのはリソースの指定です。

  1. <Window.Resources>
  2.     <ResourceDictionary>
  3.         <ResourceDictionary.MergedDictionaries>
  4.             <ResourceDictionary Source="BasicDesign.xaml"/>
  5.         </ResourceDictionary.MergedDictionaries>
  6.     </ResourceDictionary>
  7. </Window.Resources>

4行目のファイル名は自分で作ったデザインが記述してあるファイル名となります。

この部分では変更があるかもしれないのはこの行だけです。

MainWindow.xamlの追記は下記が最後となります。

ウインドウが閉じられる時に発生するClosedイベントとウインドウサイズが変化する時に発生するSizeChangedイベントをキャッチして各ReactiveCommandに渡す記述です。

  1. <i:Interaction.Triggers>
  2. 	<i:EventTrigger EventName="Closed">
  3. 		<ri:EventToReactiveCommand Command="{Binding ClosedCommand}"/>
  4. 	</i:EventTrigger>
  5. 	<i:EventTrigger EventName="SizeChanged">
  6. 		<ri:EventToReactiveCommand Command="{Binding SizeChangedCommand}"/>
  7. 	</i:EventTrigger>
  8. </i:Interaction.Triggers>

今回のサンプルでは最低限必要なイベントしか記述していません。

これ以外でも必要とするイベントがあったら随時追加してください。

MainWindowViewModel.csに追記

余計な記述があると紛らわしいので最低限必要な記述を紹介します。

まずは使用する変数です。

  1. // タイトルバーに表示する文字列
  2. public ReactivePropertySlim<string> Title { get; } = new("Title");
  3. // Disposeが必要な処理をまとめてやる
  4. private CompositeDisposable Disposable { get; } = new();
  5. // 最大化、通常サイズのボタンデザイン切り替え
  6. public ReactivePropertySlim<string> ButtonStyle { get; } = new("1");
  7. // 最大化、通常のツールチップ文字列
  8. public ReactivePropertySlim<string> ToolTip { get; } = new("最大化");
  9. // 最小化ボタンが押された時
  10. public ReactiveCommand WindowMinimum { get; } = new();
  11. // 最大化、通常サイズのボタンが押された時
  12. public ReactiveCommand WindowSize { get; } = new();
  13. // ウインドウを閉じるボタンが押された時
  14. public ReactiveCommand WindowClose { get; } = new();
  15. // ウインドウのサイズが変更されるイベントが発生した時(最大化と通常の変化)
  16. public ReactiveCommand SizeChangedCommand { get; } = new();
  17. // ウィンドウを閉じるイベントが発生した時
  18. public ReactiveCommand ClosedCommand { get; } = new();

起動時は「最大化されてない」状態を前提としています。

もし起動時は最大化された状態を前提とするなら

1.変数名ButtonStyleは「2」とする。

2.変数名ToolTipは「元に戻す」としておけばいいです。

またContentRenderedイベントをキャッチしApplication.Current.MainWindow.WindowStateの状態を見て初期の文字列を決めてもいいかもしれません。

コンストラクタの内容は以下となりますが、コピペでも問題ないと思います。

  1. // 最小化ボタンが押された
  2. _ = WindowMinimum.Subscribe(_ => Application.Current.MainWindow.WindowState = WindowState.Minimized).AddTo(Disposable);
  3. // 最大化、通常サイズボタンが押された
  4. _ = WindowSize.Subscribe(_ => Application.Current.MainWindow.WindowState = Application.Current.MainWindow.WindowState == WindowState.Normal ? WindowState.Maximized : WindowState.Normal).AddTo(Disposable);
  5. // 閉じるボタンが押された
  6. _ = WindowClose.Subscribe(_ => Window.GetWindow(Application.Current.MainWindow).Close()).AddTo(Disposable);
  7. // ウィンドウサイズが変わった
  8. _ = SizeChangedCommand.Subscribe(_ =>
  9. {
  10. 	ButtonStyle.Value = Application.Current.MainWindow.WindowState == WindowState.Normal ? "1" : "2";
  11. 	ToolTip.Value = Application.Current.MainWindow.WindowState == WindowState.Normal ? "最大化" : "元に戻す";
  12. }).AddTo(Disposable);
  13. // ウィンドウが閉じるイベント
  14. _ = ClosedCommand.Subscribe(Close).AddTo(Disposable);

非クライアント領域に配置したボタンの動作とウインドウサイズ変更のイベントが発生した時の処理です。

最後にウインドウが閉じられる時のイベントで呼ばれるメソッドに破棄の処理を記述すれば完了です。

  1. private void Close()
  2. {
  3.     Disposable.Dispose();
  4. }

これは他に記述がなければメソッドにしなくてもコンストラクタの

  1. _ = ClosedCommand.Subscribe(Close).AddTo(Disposable);

を

  1. _ = ClosedCommand.Subscribe(_ => Disposable.Dispose()).AddTo(Disposable);

にしてもOKです。

ウインドウのデザイン

本題となるウインドウのデザインについて解説します。

全てのコードを一気に掲載すると分かりにくくなるので分割して解説しますので全体像はサンプルプログラムを参照してください。

まずはボタンの基本的なスタイルの設定です。

  1. <Style x:Key="SystemButton" TargetType="Button">
  2.     <Setter Property="WindowChrome.IsHitTestVisibleInChrome" Value="True"/>
  3.     <Setter Property="Background" Value="Transparent"/>
  4.     <Setter Property="BorderBrush" Value="Transparent"/>
  5.     <Setter Property="Foreground" Value="LightGray"/>
  6.     <Setter Property="IsTabStop" Value="False"/>
  7.     <!-- FontFamilyにMarlettとする事でシステムボタンの絵になる -->
  8.     <Setter Property="FontFamily" Value="Marlett"/>
  9.     <Setter Property="FontSize" Value="20"/>
  10.     <Setter Property="HorizontalContentAlignment" Value="Center"/>
  11.     <Setter Property="VerticalContentAlignment" Value="Center"/>
  12.     <Setter Property="Width" Value="35"/>
  13.     <Setter Property="Height" Value="30"/>
  14. </Style>

大事なのはフォントの設定です。

それ以外は自分でカスタマイズして好きなデザインにしてください。

下記コードはボタンのスタイルです。

  1. <!-- 最大化、最小化のボタン用 -->
  2. <Style x:Key="SystemMaxMiniButton" TargetType="Button" BasedOn="{StaticResource SystemButton}">
  3.     <Setter Property="Template">
  4.         <Setter.Value>
  5.             <ControlTemplate TargetType="{x:Type Button}">
  6.                 <Border Name="HoverButtonBorder" BorderThickness="0">
  7.                     <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
  8.                 </Border>
  9.                 <ControlTemplate.Triggers>
  10.                     <!-- マウスカーソルがボタン上に来たら色を変える -->
  11.                     <Trigger Property="IsMouseOver" Value="True">
  12.                         <Setter TargetName="HoverButtonBorder" Property="Background">
  13.                             <Setter.Value>
  14.                                 <RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5">
  15.                                     <RadialGradientBrush.GradientStops>
  16.                                         <GradientStop Color="#7F0000FF" Offset="0"/>
  17.                                         <GradientStop Color="#00000000" Offset="1"/>
  18.                                     </RadialGradientBrush.GradientStops>
  19.                                 </RadialGradientBrush>
  20.                             </Setter.Value>
  21.                         </Setter>
  22.                     </Trigger>
  23.                 </ControlTemplate.Triggers>
  24.             </ControlTemplate>
  25.         </Setter.Value>
  26.     </Setter>
  27. </Style>
  28.  
  29. <!-- 閉じるボタン用 -->
  30. <Style x:Key="SystemCloseButton" TargetType="Button" BasedOn="{StaticResource SystemButton}">
  31.     <Setter Property="Template">
  32.         <Setter.Value>
  33.             <ControlTemplate TargetType="{x:Type Button}">
  34.                 <Border Name="HoverButtonBorder" BorderThickness="0">
  35.                     <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
  36.                 </Border>
  37.                 <ControlTemplate.Triggers>
  38.                     <!-- マウスカーソルがボタン上に来たら色を変える -->
  39.                     <Trigger Property="IsMouseOver" Value="True">
  40.                         <Setter TargetName="HoverButtonBorder" Property="Background">
  41.                             <Setter.Value>
  42.                                 <RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5">
  43.                                     <RadialGradientBrush.GradientStops>
  44.                                         <GradientStop Color="#7FFF0000" Offset="0"/>
  45.                                         <GradientStop Color="#00000000" Offset="1"/>
  46.                                     </RadialGradientBrush.GradientStops>
  47.                                 </RadialGradientBrush>
  48.                             </Setter.Value>
  49.                         </Setter>
  50.                     </Trigger>
  51.                 </ControlTemplate.Triggers>
  52.             </ControlTemplate>
  53.         </Setter.Value>
  54.     </Setter>
  55. </Style>
  56.  

基本的な内容は同じですが、マウスカーソルがボタンの上に来た時の色を閉じるボタンは赤ベースのグラデーション、それ以外は青ベースのグラデーションにしています。

ブラウザのChromeも閉じるボタンの上にマウスカーソルが来た時は赤、他のボタン上にマウスカーソルが来た時は灰色としており、それと似た感じにしています。

そのような違う色の変化が不要であれば1つに統一しても問題ありません。

その場合は11行目と39行目から始まる「 <Trigger Property="IsMouseOver" Value="True">」から「</Trigger>」までを削除してください。

以下はウインドウ全体のデザイン設定となります。

  1. <Style x:Key="WindowStyle" TargetType="Window">
  2.     <Setter Property="WindowChrome.WindowChrome">
  3.         <Setter.Value>
  4.             <WindowChrome CornerRadius="0" GlassFrameThickness="0" ResizeBorderThickness="8"/>
  5.         </Setter.Value>
  6.     </Setter>
  7.     <!-- クライアント領域の基本文字色 -->
  8.     <Setter Property="Foreground" Value="LightGray"/>
  9.     <!-- クライアント領域の基本フォントサイズ -->
  10.     <Setter Property="FontSize" Value="15"/>
  11.     <Setter Property="Template">
  12.         <Setter.Value>
  13.             <ControlTemplate TargetType="Window">
  14.                 <!-- 外枠の線色 -->
  15.                 <Border x:Name="border" BorderBrush="#202020" BorderThickness="1">
  16.                     <!-- このGridが全体の領域 -->
  17.                     <Grid>
  18.                         <Grid.RowDefinitions>
  19.                             <!-- 領域を非クライアント領域とクライアント領域に分ける -->
  20.                             <RowDefinition Height="Auto"/>
  21.                             <RowDefinition Height="*"/>
  22.                         </Grid.RowDefinitions>
  23.                         <!-- 非クライアント領域 -->
  24.                         <Grid Grid.Row="0" HorizontalAlignment="Stretch" VerticalAlignment="Top">
  25.                             <!-- 非クライアント領域の色 これはグラデーション -->
  26.                             <Rectangle>
  27.                                 <Rectangle.Fill>
  28.                                     <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
  29.                                         <GradientStop Color="#808080"/>
  30.                                         <GradientStop Color="#202020" Offset="1"/>
  31.                                     </LinearGradientBrush>
  32.                                 </Rectangle.Fill>
  33.                             </Rectangle>
  34.                             <!-- 非クライアント領域左側のアイコンとタイトル -->
  35.                             <StackPanel Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Center">
  36.                                 <Image Source="/Resource/Dialog.ico" Stretch="Fill" HorizontalAlignment="Left" VerticalAlignment="Center" Width="20" Height="20" Margin="5,0,0,0"/>
  37.                                 <TextBlock Text="{Binding Title.Value}" FontSize="20" Foreground="LightGray" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="10,0,0,0"/>
  38.                             </StackPanel>
  39.                             <!-- 非クライアント領域右側の最小化、最大化 閉じるボタン -->
  40.                             <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" VerticalAlignment="Center">
  41.                                 <Button Content="0" ToolTip="最小化" Command="{Binding WindowMinimum}" Style="{StaticResource SystemMaxMiniButton}"/>
  42.                                 <!-- 「最大化」「元に戻す」ボタンのContentとツールチップはReactivePropertyで -->
  43.                                 <Button Content="{Binding ButtonStyle.Value}" ToolTip="{Binding ToolTip.Value}" Command="{Binding WindowSize}" Style="{StaticResource SystemMaxMiniButton}"/>
  44.                                 <Button Content="r" ToolTip="閉じる" Command="{Binding WindowClose}" Style="{StaticResource SystemCloseButton}"/>
  45.                             </StackPanel>
  46.                         </Grid>
  47.                         <!-- ここがクライアント領域 -->
  48.                         <Grid Grid.Row="1">
  49.                             <!-- クライアント領域の基本色 -->
  50.                             <Rectangle Fill="#202020"/>
  51.                             <!-- これがないとMainWindow.xamlに記述したコントロールが表示されない -->
  52.                             <ContentPresenter HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
  53.                         </Grid>
  54.                     </Grid>
  55.                 </Border>
  56.                 <!-- 最大化した時ウィンドウ枠が画面外にはみ出ないようにする -->
  57.                 <ControlTemplate.Triggers>
  58.                     <Trigger Property="WindowState" Value="Maximized">
  59.                         <Setter TargetName="border" Property="BorderThickness" Value="8"/>
  60.                     </Trigger>
  61.                     <Trigger Property="WindowState" Value="Normal">
  62.                         <Setter TargetName="border" Property="BorderThickness" Value="1"/>
  63.                     </Trigger>
  64.                 </ControlTemplate.Triggers>
  65.             </ControlTemplate>
  66.         </Setter.Value>
  67.     </Setter>
  68. </Style>

各コードを別で解説するよりはコメントを見た方が分かりやすいと思いますので細かい解説はしませんが、全体像と注意点の解説をします。

全体的にはGridとなっており非クライアント領域とクライアント領域に分割しています。

今回のサンプルコードの非クライアント領域はグラデーションにして見た目重視としています。

非クライアント領域の左側にはアイコンとタイトルを表示させます。（35～38行目）

そして非クライアント領域の右側には最小化、最大化、閉じるボタンを配置します。（40～45行目）

最大化、元に戻すボタンはウインドウの状態によって変化しますのでContentとToolTipはViewModelを参照します。

クライアント領域は非クライアント領域のグラデーションと連続するような色にしています。

また52行目の記述がないとMainWindow.xamlに記述したコントロールが表示されないので注意してください。

最後に57～64行目ですが、ウインドウを最大化すると画面から少しはみ出るそうで、それを回避するための記述となります。

標準的なウインドウが

今回のプログラムで作成したウインドウが

最小化や最大化のボタンの上にマウスカーソルが来ると

閉じるボタンの上にマウスカーソルが来ると

こんな感じにほんのり色が変わるようになります。

自己紹介

自分の写真



新潟県のとある企業で働いてます。
【できる事】
電子回路設計
基板パターン設計
マイコンプログラム
C#(WinForms WPF)を使ったWindowsアプリケーション作成
PLCラダー
自動化装置アドバイザー
にほんブログ村 IT技術ブログ ソフトウェアへ

カテゴリ

このブログを検索

QooQ