ウィンドウの枠を簡単に光らせるライブラリを公開しました

MetroRadiance という名前のライブラリを NuGet で公開したのですが、Visual Studio や Office のようにウィンドウの枠を簡単に光らせることができる機能が話題を呼んでいます (呼んでいません)。

要するに、KanColleViewer や私の自作アプリで使っている、UI ライブラリです。自身のアプリのブランド化のために自作した Theme を使っているのですが、せっかくなので公開しました。

このエントリーでは、簡単なチュートリアルとして、Visual Studio のようにウィンドウの枠を光らせるところまでを解説します。

ウィンドウの枠を消す

ここで言う「ウィンドウの枠」とは、Windows 側で描画・管理される非クライアント領域 (ウィンドウクロームと呼ばれる部分) のことです。

Visual Studio や Office のようなウィンドウを作る場合、OS が描画・管理している非クライアント領域を削除し、非クライアント領域が提供していたウィンドウのサイズ変更や移動といった処理をエミュレートする必要があります。

考えられるアプローチの 1 つとして、Window クラスの WindowStyle プロパティに WindowStyle.None を設定する方法があります。

<Window x:Class="WpfApplication9.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Width="525" Height="350"
        WindowStyle="None">
    <!-- 中略 -->
</Window>

<Window x:Class="WpfApplication9.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="MainWindow" Width="525" Height="350"

WindowStyle="None">

</Window>

この方法の場合、ウィンドウを透過させたり、矩形以外の自由な形に設定できたりと、表現の幅は広がります。その一方で、非クライアント領域が提供していたあらゆる操作は、すべて開発者の実装によりエミュレートしなければなりません。

もう 1 つのアプローチとして、.NET Framework 本体 (version 4.5 以降) にある WindowChrome クラスを使う方法があります。

<Window x:Class="WpfApplication9.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Width="525" Height="350">
    <WindowChrome.WindowChrome>
        <WindowChrome CaptionHeight="30"
                      ResizeBorderThickness="4" />
    </WindowChrome.WindowChrome>
    
    <!-- 中略 -->
</Window>

<Window x:Class="WpfApplication9.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="MainWindow" Width="525" Height="350">

<WindowChrome.WindowChrome>

<WindowChrome CaptionHeight="30"

ResizeBorderThickness="4" />

</WindowChrome.WindowChrome>

</Window>

(いずれの実装でも、非クライアント領域のない真っ白なウィンドウが表示されます)

この方法の場合は、WindowStyle.None ほどの自由な表現力はありませんが、非クライアント領域が提供していた各種操作のエミュレートは楽です。以下の表で、非クライアント領域を削除したときに、動作をエミュレートする機能を開発者が実装する必要があるかどうか、を示します。

非クライアント領域の動作	WindowStyle.None	WindowChrome
ウィンドウの枠	開発者が頑張る	WindowChrome がやってくれる
サイズ変更	開発者が頑張る	WindowChrome がやってくれる
移動	開発者が頑張る	WindowChrome がやってくれる
キャプションボタン	開発者が頑張る	開発者が頑張る
アイコン	開発者が頑張る	開発者が頑張る
ウィンドウタイトル	開発者が頑張る	開発者が頑張る
システムメニュー	開発者が頑張る	WindowChrome がやってくれる

WindowStyle.None によるアプローチは、スプラッシュウィンドウやデスクトップウィジェット等、通常のウィンドウとは異なる動作を要求される特殊なウィンドウに向いています。今回のように「要求される動作は通常のウィンドウと同じだが、非クライアント領域まで含めて外観をカスタマイズしたい」ケースでは、WindowChrome クラスを使ったアプローチの方が向いていますね。

この辺の話はめとべや東京勉強会 #4 でも紹介しましたので、こちらの資料も併せてご参照ください。

ウィンドウを光らせる

OS 既定の非クライアント領域を削除したので、次はウィンドウを光らせましょう。ここで、MetroRadiance の出番です。 NuGet から MetroRadiance.Chrome をインストールしてください。

MetroRadiance.Chrome には、ウィンドウを光らせるための最低限の実装が含まれています。こんな感じで使います。

<Window x:Class="WpfApplication9.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
        xmlns:chrome="http://schemes.grabacr.net/winfx/2014/chrome"
        Title="MainWindow" Width="525" Height="350">
    <WindowChrome.WindowChrome>
        <WindowChrome CaptionHeight="30"
                      ResizeBorderThickness="0" />
    </WindowChrome.WindowChrome>
    <i:Interaction.Behaviors>
        <chrome:MetroChromeBehavior ActiveBrush="DeepSkyBlue"
                                    InactiveBrush="DarkGray"
                                    Mode="VisualStudio2013" />
    </i:Interaction.Behaviors>

    <!-- 中略 -->
</Window>

<Window x:Class="WpfApplication9.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"

xmlns:chrome="http://schemes.grabacr.net/winfx/2014/chrome"

Title="MainWindow" Width="525" Height="350">

<WindowChrome.WindowChrome>

<WindowChrome CaptionHeight="30"

ResizeBorderThickness="0" />

</WindowChrome.WindowChrome>

<i:Interaction.Behaviors>

<chrome:MetroChromeBehavior ActiveBrush="DeepSkyBlue"

InactiveBrush="DarkGray"

Mode="VisualStudio2013" />

</i:Interaction.Behaviors>

</Window>

ね？簡単でしょう？

MetroChromeBehavior が提供する機能

ウィンドウの枠を光らせる MetroChromeBehavior の細かい機能やカスタマイズを解説します。

リサイズ

Visual Studio 同様、光っている部分をドラッグすることで、ウィンドウのリサイズが可能です。これにより、WindowChrome.ResizeBorderThickness に 0 を指定してもリサイズできるようになります。

また、通常のウィンドウと同じく、ウィンドウの上か下の光っている部分をダブルクリックすると、上下方向に最大化されます (これは @mntone さんが実装してくださいました)。

Brush & ChromeMode

MetroChromeBehavior.ActiveBrush プロパティと MetroChromeBehavior.InactiveBrush プロパティで、それぞれアクティブ時に光る色と非アクティブ時に光る色を設定できます。

また、MetroChromeBehavior.Mode プロパティに ChromeMode.VisualStudio2013 か ChromeMode.Office2013 のいずれかを設定することで、Visual Studio 2013 と Office 2013 のどちらの外観にするかを選択できます。ウィンドウがアクティブのとき、非アクティブのときで、微妙に異なる外観となります。

ChromeMode.VisualStudio2013

アクティブ時	非アクティブ時

ChromeMode.Office2013

アクティブ時	非アクティブ時

Office 2013 スタイルの方は「光っている」というより「アクティブ時に影がついた」という感じですが… (本家も GLOWWINDOW じゃなくて BORDERWINDOW っていう名前だった気がする)。ちなみに私は Visual Studio スタイルの方が好みです。

MetroRadiance 本体

NuGet から MetroRadiance.Chrome だけでなく MetroRadiance をインストールすれば、何もしなくても最初から KanColleViewer のような外観にできる MetroWindow 等、UI ライブラリとしての機能が使えるようになります。

App.xaml、MainWindow.xaml をそれぞれこんな感じに。

<Application x:Class="WpfApplication9.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/MetroRadiance;component/Styles/Controls.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MetroRadiance;component/Themes/Dark.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MetroRadiance;component/Themes/Accents/Blue.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

<Application x:Class="WpfApplication9.App"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

StartupUri="MainWindow.xaml">

<Application.Resources>

<ResourceDictionary.MergedDictionaries>

</ResourceDictionary.MergedDictionaries>

</ResourceDictionary>

</Application.Resources>

</Application>

<metro:MetroWindow x:Class="WpfApplication9.MainWindow"
                   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                   xmlns:metro="http://schemes.grabacr.net/winfx/2014/controls"
                   Title="MainWindow" Width="525" Height="350">
    <!-- 中略 -->
</metro:MetroWindow>

<metro:MetroWindow x:Class="WpfApplication9.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:metro="http://schemes.grabacr.net/winfx/2014/controls"

Title="MainWindow" Width="525" Height="350">

</metro:MetroWindow>

が、長くなりそうなため、詳しい解説は別のエントリーで。。。

また、MetroRadiance 各種ライブラリは、前回のエントリーで解説した AppVeyor による自動ビルド＆NuGet パッケージ化されていたりしますので、こちらもご参考まで。

フィードバックお待ちしています。。。

ウィンドウの枠を消す

ウィンドウを光らせる

MetroChromeBehavior が提供する機能

リサイズ

Brush & ChromeMode

ChromeMode.VisualStudio2013

ChromeMode.Office2013

MetroRadiance 本体

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル