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裡面并不提倡使用事件。