mogmo .NET

C#/XAML/VB6たまにC++についてメモ程度に書いていく。あくまで自分用。責任は取れません。

メトロデザインWindowにDropShadowをつける

WindowChromeとWindowのBackgroundの背景色を透明にすることで実現可能です。
2018/12/10 追記-----------
WindowStyle="None"に設定しないでメトロ×DropShadowを実装した
かたですが,方法がみつからず。

                                                        • -

Window枠を消す

WindowChromeを使用する。
https://mogmo811.hatenablog.com/entry/2018/11/29/111014

Windowの背景を透明にする

WindowStyleをNoneにし,AllowsTransparencyをTrueにすることでWindowの背景を透明にすることが可能。

  • WindowStyle="None"
  • AllowsTransparency="True"
  • Background="Transparent"

WindowにDropShadowEffectをつける

DropShadow自体はBorderのEffectにDropShadowEffectを追加するだけです。
が,これだけではウィンドウ枠外にDropShadowが描画されることになるので,見た目に何の変化も現れません。

なので,BorderにMarginをつけてあげることで,DropShadowEffectが描画される領域を確保しました。

    <Border BorderBrush="Gray" BorderThickness="1" Margin="5">
        <Border.Effect>
            <DropShadowEffect BlurRadius="5" Color="Black" Opacity="0.8" ShadowDepth="0.5"/>
        </Border.Effect>
        <!-- 略 -->
    </Border>

完成

f:id:mogmo811:20181130130959p:plain
DropShadowありのウィンドウ

コード全文

<Window x:Class="WindowStyleNone.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:WindowStyleNone"
        mc:Ignorable="d"
        Title="Window Style None" Height="150" Width="300"
        WindowStyle="None"
        WindowStartupLocation="CenterScreen"
        AllowsTransparency="True"
        Background="Transparent"
        >

    <WindowChrome.WindowChrome>
        <WindowChrome CaptionHeight="10" ResizeBorderThickness="3"/>
    </WindowChrome.WindowChrome>

    <Border BorderBrush="Gray" BorderThickness="1" Margin="5">
        <Border.Effect>
            <DropShadowEffect BlurRadius="5" Color="Black" Opacity="0.8" ShadowDepth="0.5"/>
        </Border.Effect>

        <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="{StaticResource BackgroundBrush}">
            <TextBlock Text="Test App" Foreground="{StaticResource TextForegroundBrush}"/>
        </Grid>
    </Border>
</Window>