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>