不管是CS還是BS，在需要使用者提交資料的頁面上，總是要做一些校驗，如果校驗有錯就要給使用者提示，WPF裡自然也避免不了這個問題。一開始，我是在視窗上預留了一個TextBlock，並且設定其Visibility=Collapsed，當校驗有錯的時候，再把這個TextBlock顯示出來，這樣做是可以實現既定需求，但是這樣卻會影響整個視窗的佈局，以下圖舉個例子：

現在這個TextBlock隱藏在輸入框和搜尋按鈕之間，大家知道Visibility=Collapsed是不佔佈局的，一旦我將Visibility設成了Visible，搜尋按鈕將會往下移動，這樣的體驗顯然不好；有的同學要說了，那初始時設定Visibility=Hidden好了，這個是佔佈局的，這樣按鈕不會下移，的確，按鈕是不會下移了，但是這裡莫名其妙空白一塊也是影響美觀的吧。

我們平時見多了APP中或者H5中的頁面中央一塊黑色背景的提示，這種體驗還是比較好的，那在WPF裡也實現一個吧~
思路很簡單，在每個窗口布局裡最外層Grid裡與內容快平級放置一個上下左右都居中的框就可以了，然後依照實際情況控制這個框的Visibility屬性。顯然，這樣會有不少的工作量，尤其是專案裡視窗比較多的時候。再想想，對，我們要搞一個視窗模板，讓有需要的視窗使用這個模板就行了。
新建一個資源字典VcreditWindowWithAlert.xaml，程式碼如下：

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 

                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <ControlTemplate x:Key="CustomAlertWindowTemplete" TargetType="Window">      
        <Border BorderBrush="Transparent" BorderThickness="12" x:Name="outBorder">
            <Border.Effect>
                <DropShadowEffect
 
 BlurRadius="15" Color="#000000" Opacity=".25" Direction="90" ShadowDepth="1"/>
            </Border.Effect>
            <Grid Background="White">
                <AdornerDecorator>
                    <ContentPresenter></ContentPresenter>
                </AdornerDecorator>
                <Border x:Name="alertBorder" Visibility="Collapsed" Background="#82000000" CornerRadius="8" Padding="6" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="24" MaxWidth="300">
                    <TextBlock x:Name="alertText"  TextWrapping="Wrap" Foreground="White" VerticalAlignment="Center"></TextBlock>
                    <Border.Resources>
                        <Storyboard x:Key="alertStoryboard">
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="alertBorder" Storyboard.TargetProperty="Visibility" Duration="0:0:4">
                                <ObjectAnimationUsingKeyFrames.KeyFrames>
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" >
                                        <DiscreteObjectKeyFrame.Value>
                                            <Visibility>Visible</Visibility>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                    <DiscreteObjectKeyFrame KeyTime="0:0:4" >
                                        <DiscreteObjectKeyFrame.Value>
                                            <Visibility>Collapsed</Visibility>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                </ObjectAnimationUsingKeyFrames.KeyFrames>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </Border.Resources>
                </Border>
            </Grid>
        </Border>
    </ControlTemplate>

    <Style x:Key="CustomAlertWindow" TargetType="Window">
        <Setter Property="AllowsTransparency" Value="True"/>
        <Setter Property="WindowStyle" Value="None"/>
        <Setter Property="Template" Value="{StaticResource CustomAlertWindowTemplete}">     </Setter>
    </Style>
</ResourceDictionary>

稍微解釋一下上面程式碼，可以看到，還是在Grid裡與ContentPresenter內容塊平級放置了一個Border，這個Border裡放置我們要顯示的錯誤資訊，並且我們通過一個動畫5秒後自動關閉這個錯誤提示，另外還設定了Border的MaxWidth=”300”，是為了防止視窗較長時，這個Border會過分長。

那麼，我們怎麼使用上面這個模板呢，首先在App.xaml裡要引入一下：

<ResourceDictionary Source="Resources/VcreditWindowWithAlert.xaml"/>

然後在需要使用的窗口裡，通過Style屬性引用模板：

Style="{StaticResource CustomAlertWindow}"

當需要提示錯誤的時候，我們通過程式碼找到那個動畫，並且Begin它。以下是我寫的一個通用方法，你可以在各個已經引入模板的窗口裡呼叫它：

public static void ShowAlert(Window win, string msg)
{
            ControlTemplate customWindowTemplate = App.Current.Resources["CustomAlertWindowTemplete"] as ControlTemplate;
            if (customWindowTemplate!=null)
            {
                var border = customWindowTemplate.FindName("alertBorder",win) as Border;
                if (border != null)
                {
                    var textblock = border.FindChild<TextBlock>("alertText");
                    textblock.Text = msg;
                    Storyboard sb = border.Resources["alertStoryboard"] as Storyboard;
                    sb.Begin();
                }
            }
}

這裡有同學可能沒有FindChild方法，這個方法是MahApps.Metro.dll裡的，你當然沒有必要為了這一個方法去引用這個dll，VisualTreeHelper什麼的也是可以實現查詢子元素父元素的。

上一下效果圖：