(WPF) オシャレな半透明ウィンドウを実装してみる

タイトルの通りです。
実用性は皆無ですがやってみたかったので作ってみます。

まず半透明なアプリと不透明なアプリを比較

不透明な画像ビューア

半透明な画像ビューア

地味ですが半透明になっているのが分かると思います。
Window のxamlに以下の定義を入れることで実現できます。

    AllowsTransparency="True"
    Background="#8f000000"
    WindowStyle="None"

何をしているのかというと
①AllowsTransparencyにtrueを設定し半透明の有効化します。
②BackGroundにはアルファ値込の16進を設定してやります。これがウィンドウの色になります。
③ AllowsTransparencyをtrueにする場合はWindowStyleを Noneに設定する必要があります。

ただしWindowStyleをNoneにすると

• ドラッグ＆ドロップ
• 最大化 / 最小化
• 閉じる

が無効になるので設定してやる必要があります。

最大化 / 最小化 / 閉じるを設定

コードビハインドで設定すると以下の場合はwindow.xaml.csにイベントハンドラを用意しボタンのクリックイベントにバインドします。

private void MaximizeClick(object sender, RoutedEventArgs e)
{
    if (WindowState == WindowState.Maximized)
        WindowState = WindowState.Normal;
    else
        WindowState = WindowState.Maximized;
}

private void CloseClick(object sender, RoutedEventArgs e)
{
    Close();
}

private void MinimizeClick(object sender, RoutedEventArgs e)
{
    WindowState = WindowState.Minimized;
}

<!--最小化-->
<Button Click="MinimizeClick" Content="_"/>
<!-- 最大化-->
<Button Click="MaximizeClick" Content="■"/>
<!-- 閉じる-->
<Button Click="CloseClick" Content="x"/>

ドラッグ＆ドロップでウィンドウが動くようにする

window.xaml.csのコンストラクタで左クリックのハンドラににDragMoveを突っ込めば動くようになります。
但しこの実装の場合ウィンドウのどこをドラッグしても動くようになってしまいます。

public MainWindow()
{
    InitializeComponent();
    MouseLeftButtonDown += (_,__) => { DragMove(); };
}

リサイズの設定

window.xamlの ResizeMode を CanResizeWithGripにすればグリップを使ったリサイズができるようになるので今回はそちらで対応します。

ResizeMode="CanResizeWithGrip"

こんな奴が右下に表示されます。

ちなみにスタイルはhttp://mahapps.com/を使っています。