WPFで危険警告効果を実現する

ニーズ背景

作成したプログラムをユーザーに出荷した後、ユーザーが危険な操作を行う場合、ソフトウェアは警告効果を出す必要があります。例えば、枠線の端が赤くなるなど、高德地図のような警告表示効果です。

実装ロジック

枠線を持つ要素Borderを用意し、その枠線、線の色、およびEffect効果を設定します。Effect効果にはDropShadowEffectを設定します。特に重要なのはDropShadowEffectのBlurRadiusとColorプロパティです。

困難な点

枠線の色が透明の場合、DropShadowEffectを設定しても効果が現れません。

解決方法

枠線の色を任意の色（できれば純色）に設定し、GridのClipToBoundsプロパティを使用してBorderのはみ出た色を切り取ります。その際、Borderの枠線が太く見えますが、これは理想的な状態ではありません。そこで逆転の発想として、BorderのMarginを負の値に設定します。例えば、BorderThicknessが10の場合、Marginを-10にします。これにより、望んだ効果が得られます。

<Grid CacheMode="BitmapCache" ClipToBounds="True">    
    <Border Margin="-10" 
            BorderBrush="#FFFF"        
            BorderThickness="10"        
            CacheMode="BitmapCache">        
        <Border.Effect>            
            <DropShadowEffect                
                BlurRadius="40"
                Direction="275"
                RenderingBias="Performance"
                ShadowDepth="0"
                Color="Red" />
        </Border.Effect>
    </Border>
    <Border
            Margin="-10"
            BorderBrush="#FFFF"
            BorderThickness="10"
            CacheMode="BitmapCache">
        <Border.Effect>
            <DropShadowEffect
                 BlurRadius="40"
                 Direction="275"
                 RenderingBias="Performance"
                 ShadowDepth="0"
                 Color="Red" />
        </Border.Effect>   
    </Border>
</Grid>

色が薄すぎる場合は、重ねて追加することで対応できます。

注意：記事をよく読んで理解してから使用してください。コピペは避け、魚を与えるのではなく、釣り方を教える精神で、じっくり理解しましょう。

站长は元記事のコードをもとにAvalonia版を実装しました。効果は以下の通りです：

コードは以下です：

<u:UrsaWindow xmlns="https://github.com/avaloniaui"
        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:u="https://irihi.tech/ursa"
        mc:Ignorable="d" d:DesignWidth="400" d:DesignHeight="450"
        Width="400" Height="450"
        x:Class="DeviceMrgSample.Views.WarningWindow"
        Title="WarningWindow">
	<u:UrsaWindow.Styles>
        <Style Selector="Border.warning-border">
            <Style.Animations>
                <Animation Duration="0:0:05" 
                           IterationCount="Infinite"
                           PlaybackDirection="Alternate">
                    <KeyFrame Cue="0%">
                        <Setter Property="Opacity" Value="0.5"/>
                    </KeyFrame>
                    <KeyFrame Cue="100%">
                        <Setter Property="Opacity" Value="1"/>
                    </KeyFrame>
                </Animation>
            </Style.Animations>
        </Style>
        <Style Selector="Grid#gridRoot > TranslateTransform">
            <Style.Animations>
                <Animation Duration="0:0:0.3" 
                          IterationCount="Infinite">
                    <KeyFrame Cue="0%">
                        <Setter Property="X" Value="0"/>
                        <Setter Property="Y" Value="0"/>
                    </KeyFrame>
                    <KeyFrame Cue="20%">
                        <Setter Property="X" Value="-10"/>
                        <Setter Property="Y" Value="5"/>
                    </KeyFrame>
                    <KeyFrame Cue="40%">
                        <Setter Property="X" Value="8"/>
                        <Setter Property="Y" Value="-7"/>
                    </KeyFrame>
                    <KeyFrame Cue="60%">
                        <Setter Property="X" Value="-12"/>
                        <Setter Property="Y" Value="3"/>
                    </KeyFrame>
                    <KeyFrame Cue="80%">
                        <Setter Property="X" Value="9"/>
                        <Setter Property="Y" Value="-4"/>
                    </KeyFrame>
                    <KeyFrame Cue="100%">
                        <Setter Property="X" Value="0"/>
                        <Setter Property="Y" Value="0"/>
                    </KeyFrame>
                </Animation>
            </Style.Animations>
        </Style>
    </u:UrsaWindow.Styles>

    <Grid x:Name="gridRoot" ClipToBounds="True">
        <Grid.RenderTransform>
            <TranslateTransform/>
        </Grid.RenderTransform>
        
        <Border Classes="warning-border"
                Margin="-25" 
                BorderBrush="#FFFF"
                BorderThickness="25">
            <Border.Effect>
                <DropShadowEffect
                    BlurRadius="40"
                    OffsetX="0"
                    OffsetY="0"
                    Opacity="0.8"
                    Color="Red" />
            </Border.Effect>
        </Border>
        <Border
            Margin="-15"
            BorderBrush="#FFFF"
            BorderThickness="15">
            <Border.Effect>
				<DropShadowEffect
                    BlurRadius="40"
                    OffsetX="0"
                    OffsetY="0"
                    Color="Red" />
            </Border.Effect>
        </Border>
        
        <StackPanel VerticalAlignment="Center" 
                    HorizontalAlignment="Center"
                    Margin="40">
            <TextBlock Text="❗ ディスク警告 ❗" 
                       FontSize="36"
                       FontWeight="Black"
                       Foreground="#FFFF00"
                       Margin="0 0 0 30"
                       TextAlignment="Center">
                <TextBlock.Effect>
                    <DropShadowEffect Color="#CC0000" 
                                    BlurRadius="12" 
                                    OffsetX="2" 
                                    OffsetY="2"/>
                </TextBlock.Effect>
            </TextBlock>
            
            <TextBlock Text="Dドライブの残り容量が2GB（20%）を下回っています"
                       FontSize="26"
                       FontWeight="Bold"
                       Foreground="#FFEB3B"
                       TextWrapping="Wrap"
                       MaxWidth="280"
                       Margin="0 0 0 20"
                       TextAlignment="Center">
                <TextBlock.Effect>
                    <DropShadowEffect Color="#B71C1C" 
                                    BlurRadius="8" 
                                    OffsetX="1" 
                                    OffsetY="1"/>
                </TextBlock.Effect>
            </TextBlock>
            
            <TextBlock Text="すぐにクリーンアップしてください。システムがクラッシュする恐れがあります！"
                       FontSize="24"
                       FontWeight="SemiBold"
                       Foreground="#FFEE58"
                       TextAlignment="Center"
                       Margin="0 10 0 0">
                <TextBlock.Effect>
                    <DropShadowEffect Color="#C62828" 
                                    BlurRadius="6" 
                                    OffsetX="1" 
                                    OffsetY="1"/>
                </TextBlock.Effect>
            </TextBlock>
        </StackPanel>
    </Grid>
</u:UrsaWindow>