WPF实现半透明背景的弹框
来源:互联网 发布:java求圆锥圆柱体积 编辑:程序博客网 时间:2024/06/05 10:04
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里面并不提倡使用事件。
0 0
- WPF实现半透明背景的弹框
- WPF实现半透明背景的弹框
- Android 实现背景半透明
- 如何使用纯js实现一个带有灰色半透明背景的弹出框
- Flex3 mx:List 实现背景半透明的两个属性
- UIButton背景半透明,字体不透明的实现效果
- 轻松实现部分背景半透明的呈现效果
- 页游《火影忍者》角色和背景遮挡半透明效果的实现
- 角色和背景遮挡半透明效果的实现
- 半透明背景Activity实现AlertDialog弹窗效果
- 背景半透明效果的Activity
- VC实现透明背景和半透明图片
- 讲怎么CSS实现背景半透明效果
- CSS实现半透明背景 兼容IE6
- 如何用CSS实现背景半透明效果
- VC实现透明背景和半透明图片
- presentViewController 方法中实现半透明背景效果
- 实现popupwindow弹出后背景办成半透明
- CZMQ使用举例
- 手机站限制PC端访问
- 欢迎使用CSDN-markdown编辑器
- SGU 194 Reactor Cooling 无源汇上下界可行流
- android:layout_gravity和android:gravity的区别
- WPF实现半透明背景的弹框
- 从入门到放弃C语言-瞎倒腾(3)
- cookie的浏览记录
- 打印从1到N的数
- 新框架之SAP
- [线性代数]Note3--乘法和逆矩阵
- Python函数性能测试
- Cookie对象的创建以及数据的获取
- 深入理解Java中的访问控制符