WPF实现半透明背景的弹框

应为公司需要制作一个产品的桌面程序，在选择几种方案后决定使用WPF来实现。因为以前没有接触过WPF，所以在使用过程中遇到了很多的问题，就拿这次来说为了实现背景为充满窗口的半透明的灰色弹框的效果时，就不知道怎么实现了，在百度上查找了半天也没有找到，后来在CSDN的论坛上看到一个人问了类似的问题，有人回答说：要分开制作两个窗口，这给了我提示，后来终于做出来了。下面就是我的实现过程：

一开始我是只使用一个面板来设置透明的后来发是不可以的，因为他会将里面的内容也会透明化，就是这种效果

内容被透明化的窗口

具体代码如下：

主画面的MainWindow.xaml

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="450" Width="725">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="97*"/>
            <ColumnDefinition Width="319*"/>
            <ColumnDefinition Width="101*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="49*"/>
            <RowDefinition Height="220*"/>
            <RowDefinition Height="51*"/>
        </Grid.RowDefinitions>
        <Canvas x:Name="cav" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3">
            <!--放这个按钮主要是为了说明，下面的那两个面板并不影响控件的使用-->
            <Button Content="弹出提示框" Click="Button_Click" Canvas.Left="10" Canvas.Top="10" Width="112"></Button>
            <TextBlock Text="此处随便写一些东西" FontSize="20" Canvas.Left="210" Canvas.Top="10"></TextBlock>
        </Canvas>
        <Button Background="LightBlue" Content="中间随便放一个大Button,将背景设置为淡蓝色，方便观察弹框" 
                Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="3"></Button>
        <Button Content="点击弹出弹框" x:Name="btn" Grid.Column="0" Grid.Row="2" Grid.ColumnSpan="3" Click="btn_Click"></Button>
        <!--用作透明化的StackPanel-->
        <StackPanel x:Name="stpBG" Opacity="0.4">
            <ContentControl x:Name="ccl" Width="300" Height="300"></ContentControl>
        </StackPanel>
    </Grid>
</Window>
           

后台代码MainWindow.xaml：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WpfApplication1
{
    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void btn_Click(object sender, RoutedEventArgs e)
        {
            //将背景框的颜色设置为黑色，因为已经将透明度设置为0.4了，所以黑色才会显示为灰色的效果
            stpBG.Background = Brushes.Black;

            //设置背景框充满整个屏幕
            Grid.SetColumnSpan(stpBG, );
            Grid.SetRowSpan(stpBG, );

            //添加内容
            ccl.Content = new UserControl1();
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            MessageBox.Show("你看吧，不影响我的使用");
        }
    }
}
           

弹框的内容，因为弹框内容是一样的，就是一个红色背景的方框，所以下面我就不再粘贴弹框的代码了UserControl1.xaml：

<UserControl x:Class="WpfApplication1.UserControl1"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <Grid Background="Red">

    </Grid>
</UserControl>
           

因为发现这样的效果并不理想，于是就采用了两个面板的方式，一个专门做为透明的背景，一个用来承接内容，效果如下：

在点击按钮弹出弹框之前的效果

点击按钮弹出弹框之后的效果

具体代码如下;

主画面MainWindow.xaml：

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="450" Width="725">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="97*"/>
            <ColumnDefinition Width="319*"/>
            <ColumnDefinition Width="101*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="49*"/>
            <RowDefinition Height="220*"/>
            <RowDefinition Height="51*"/>
        </Grid.RowDefinitions>
        <Canvas x:Name="cav" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3">
            <!--放这个按钮主要是为了说明，下面的那两个面板并不影响控件的使用-->
            <Button Content="弹出提示框" Click="Button_Click" Canvas.Left="10" Canvas.Top="10" Width="112"></Button>
            <TextBlock Text="此处随便写一些东西" FontSize="20" Canvas.Left="210" Canvas.Top="10"></TextBlock>
        </Canvas>
        <Button Background="LightBlue" Content="中间随便放一个大Button,将背景设置为淡蓝色，方便观察弹框" 
                Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="3"></Button>
        <Button Content="点击弹出弹框" x:Name="btn" Grid.Column="0" Grid.Row="2" Grid.ColumnSpan="3" Click="btn_Click"></Button>
        <!--下面这两个才是重点,对于作为背景采用什么样的面板是无所谓的，这里我用的是StackPanel-->
        <StackPanel x:Name="stpBG" Opacity="0.4"></StackPanel>
        <!--承接具体弹框的内容的面板看个人的具体业务来选择-->
        <StackPanel x:Name="stpContent" HorizontalAlignment="Center" VerticalAlignment="Center">
            <ContentControl x:Name="ccl" Width="300" Height="300"></ContentControl>
        </StackPanel>
    </Grid>
</Window>
           

后台代码MainWindow.xaml：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WpfApplication1
{
    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void btn_Click(object sender, RoutedEventArgs e)
        {
            //将背景框的颜色设置为黑色，因为已经将透明度设置为0.4了，所以黑色才会显示为灰色的效果
            stpBG.Background = Brushes.Black;

            //设置背景框充满整个屏幕
            Grid.SetColumnSpan(stpBG, );
            Grid.SetRowSpan(stpBG, );

            //内容的设置与背景一致
            Grid.SetColumnSpan(stpContent, );
            Grid.SetRowSpan(stpContent, );

            //添加内容
            ccl.Content = new UserControl1();
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            MessageBox.Show("你看吧，不影响我的使用");
        }
    }
}
           

在弹出之前背景面板是与最上面的按钮是重合的，但是并不影响该按钮的使用，之后用弹出之后才会影响，效果如下：

最后要说的是，由于本人对Trigger和Style使用的并不熟练，所以只能使用事件来实现这些效果，在WPF里面并不提倡使用事件。