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>