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, 3);Grid.SetRowSpan(stpBG, 3);//添加内容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, 3);Grid.SetRowSpan(stpBG, 3);//内容的设置与背景一致Grid.SetColumnSpan(stpContent, 3);Grid.SetRowSpan(stpContent, 3);//添加内容ccl.Content = new UserControl1();}private void Button_Click(object sender, RoutedEventArgs e){MessageBox.Show("你看吧，不影响我的使用");}}
}

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

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

WPF实现半透明背景的弹框相关推荐

html 弹窗并虚化背景,背景虚化弹框效果
html> webrx-title .bg img{width:100%;margin:0;padding:0;display:block;} .blur{-webkit-filter:blur ...
android alertdialog 背景透明,Android Alertdialog弹出框设置半透明背景
自定义AlertDialog基本步骤: 1.写一个layout布局,使用inflater生成对应view对象 2.新建AlertDialog.Builder对象builder 3.builder设置自 ...
jQuery给页面弹出层添加半透明背景
1.弹出层的设计使用的东西是很简单的,需要两个div,一个做为弹出层背景的,另一个做为在半透明背景上面一层显示内容的. 在底层半透明div样式: 显示内容的div样式(不重要) jQuery的调用方 ...
移动端下弹框禁止背景滑动
移动端下弹框禁止背景滑动茴字写法有很多种,找到最适合的才是好的. 以下下方法在一屛之内是可行的 body;html 设置overflow:hidden .overflow-hidden{height ...
WPF MVVM 弹框之等待框
WPF MVVM 弹框之等待框目录一.效果二.弹框主体改造三.等待动画用户控件四.弹窗 ViewModel 和帮助类的改造五.使用方法和代码地址独立观察员 2020年10月13日之前写 ...
一个常用的自定义弹框封装(适配 AndroidX),加载 ProgressDialog,状态显示的 StatusDialog 和自定义 Toast,全部支持背景颜色,圆角,边框和文字的自定义,构建者模
MNProgressHUD 项目地址:maning0303/MNProgressHUD 简介: 一个常用的自定义弹框封装(适配 AndroidX),加载 ProgressDialog,状态显示的 S ...
Android开发中仿斗鱼弹框的遮罩背景及额外想法“月亮图”
悟已往之不谏,知来者之可追. - -陶渊明开发背景周末在家看斗鱼直播,登录账号时发现斗鱼的加载框背景挺好看的,故有了下文. 斗鱼-效果图(ios手机截图,android手机没有看到这个背景): 看 ...
实现页面弹框背景虚化效果
实现效果类似alert效果 <style type="text/css"> #mask { background: #000; opacity: 0.6; positi ...
android黑色半透明dialog背景,Android开发中Dialog半透明背景消失
近日,遇到一个Dialog半透明背景消失的问题,背景需求是自定义Dialog实现警告提示框: // 初始化警告弹出框 alertDialog = new EmpAlertView(context, U ...

WPF实现半透明背景的弹框

WPF实现半透明背景的弹框

WPF实现半透明背景的弹框相关推荐

最新文章

热门文章