C#?wpf?無邊框窗口添加陰影效果的實現(xiàn)

更新時間：2022年11月22日 09:05:52 作者：CodeOfCC

在本篇內(nèi)容中小編給大家整理了一篇關于C#?wpf?無邊框窗口添加陰影效果的具體方法內(nèi)容，有興趣的朋友們可以學習參考下

前言

制作無邊框窗口時，系統(tǒng)自帶陰影會消失，這時就需要我自己給窗口添加陰影以防止窗口融入背景。添加陰影的方法很簡單，直接用effect就可以了，但這里還是有個不容易注意到的細節(jié)需要處理，加陰影后窗口最大化可能會有問題。

一、如何實現(xiàn)？

1、去除邊框

（1）方法一

使用WindowStyle可以去除窗口邊框，AllowsTransparency+Background制造透明窗口為陰影留出透明邊距。
注：此方法較影響窗口渲染性能。

<Window  WindowStyle="None" AllowsTransparency="True"  Background="Transparent" >

（2）方法二

使用WindowChrome也可以實現(xiàn)無邊框窗口，.net4.5之后可以使用此組件。WindowChrome通常不會影響渲染性能。

<Window  WindowStyle="None"  Background="Transparent"  ResizeMode="NoResize">
    <WindowChrome.WindowChrome>
        <WindowChrome GlassFrameThickness="-1"   CaptionHeight="0"   />
    </WindowChrome.WindowChrome   
    <Grid>
    </Grid>
</Window>

2、添加陰影

使用DropShadowEffect 加Margin屬性即可。添加陰影特效后，需要設置margin給陰影留出邊距，否則是看不到陰影的。通常到這一步就結束了，如果窗口需要最大化則繼續(xù)往下。

<Window >
    <Grid Margin="10" Background="White">
        <Grid.Effect>
            <DropShadowEffect ShadowDepth="0" BlurRadius="10" Opacity="0.8" Color="#AAAAAA"/>
        </Grid.Effect>
    </Grid>
</Window>

3、添加觸發(fā)器

1、為何添加觸發(fā)器？

根據(jù)上述2個步驟添加完陰影后，如果將窗口最大化就會發(fā)現(xiàn)，Margin依然生效，全屏窗口有一個透明外邊距，為了解決這問題所以需要添加觸發(fā)器。

2、具體實現(xiàn)

在style中使用觸發(fā)器，綁定窗口狀態(tài)，當最大化時邊距設為0，其他情況設為陰影需要的邊距。在這里需要注意的是此時Grid不可以設置Margin屬性了只能在觸發(fā)器中設置，因為賦值優(yōu)先級的原因，在Grid中設置Margin后觸發(fā)器的賦值會失效。

<Grid  Background="#1e1e1e">
    <Grid.Style>
        <Style TargetType="Grid">
            <!--給陰影留出邊距-->
            <Style.Triggers>
                <DataTrigger Binding="{Binding WindowState, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Window}}" Value="Normal">
                    <Setter Property="Margin" Value="10" />
                </DataTrigger>
                <DataTrigger Binding="{Binding WindowState, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Window}}" Value="Minimized">
                    <Setter Property="Margin" Value="10" />
                </DataTrigger>
                <DataTrigger Binding="{Binding WindowState, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Window}}" Value="Maximized">
                    <Setter Property="Margin" Value="0" />
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Grid.Style>
</Grid>

二、示例代碼

MainWindow.xaml

<Window x:Class="WpfApp8.MainWindow"
? ? ? ? xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
? ? ? ? xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
? ? ? ? xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
? ? ? ? xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
? ? ? ? xmlns:local="clr-namespace:WpfApp8"
? ? ? ? mc:Ignorable="d"
? ? ? ? Title="MainWindow" Height="450" Width="800"
? ? ? ? WindowStyle="None"
? ? ? ? Background="Transparent"
? ? ? ? ResizeMode="NoResize"
? ? ? ? >
? ? <WindowChrome.WindowChrome>
? ? ? ? <WindowChrome GlassFrameThickness="-1" ? CaptionHeight="0" ? />
? ? </WindowChrome.WindowChrome>
? ? <Grid ?Background="white">
? ? ? ? <Grid.Effect>
? ? ? ? ? ? <DropShadowEffect ShadowDepth="0" BlurRadius="10" Opacity="0.8" Color="#AAAAAA"/>
? ? ? ? </Grid.Effect>
? ? ? ? <Grid.Style>
? ? ? ? ? ? <Style TargetType="Grid">
? ? ? ? ? ? ? ? <!--給陰影留出邊距-->
? ? ? ? ? ? ? ? <Style.Triggers>
? ? ? ? ? ? ? ? ? ? <DataTrigger Binding="{Binding WindowState, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Window}}" Value="Normal">
? ? ? ? ? ? ? ? ? ? ? ? <Setter Property="Margin" Value="10" />
? ? ? ? ? ? ? ? ? ? </DataTrigger>
? ? ? ? ? ? ? ? ? ? <DataTrigger Binding="{Binding WindowState, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Window}}" Value="Minimized">
? ? ? ? ? ? ? ? ? ? ? ? <Setter Property="Margin" Value="10" />
? ? ? ? ? ? ? ? ? ? </DataTrigger>
? ? ? ? ? ? ? ? ? ? <DataTrigger Binding="{Binding WindowState, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Window}}" Value="Maximized">
? ? ? ? ? ? ? ? ? ? ? ? <Setter Property="Margin" Value="0" />
? ? ? ? ? ? ? ? ? ? </DataTrigger>
? ? ? ? ? ? ? ? </Style.Triggers>
? ? ? ? ? ? </Style>
? ? ? ? </Grid.Style>
? ? ? ? <!--標題欄-->
? ? ? ? <Grid ?VerticalAlignment="Top" ?>
? ? ? ? ? ? <StackPanel Margin="0,0,10,0" HorizontalAlignment="Right" Orientation="Horizontal">
? ? ? ? ? ? ? ? <!--最小化按鈕-->
? ? ? ? ? ? ? ? <Button Width="50" Height="50" Focusable="False" VerticalAlignment="Center" Cursor="Hand" ?Click="Button_Click_1" >
? ? ? ? ? ? ? ? ? ? <Button.Template>
? ? ? ? ? ? ? ? ? ? ? ? <ControlTemplate TargetType="Button">
? ? ? ? ? ? ? ? ? ? ? ? ? ? <Grid x:Name="grd" Background="Transparent">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <Rectangle Width="20" Height="3" Fill="#1e1e1e" ></Rectangle>
? ? ? ? ? ? ? ? ? ? ? ? ? ? </Grid>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <ControlTemplate.Triggers>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <Trigger Property="IsMouseOver" Value="True">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <Setter TargetName="grd" Property="Background" Value="#666666"></Setter>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? </Trigger>
? ? ? ? ? ? ? ? ? ? ? ? ? ? </ControlTemplate.Triggers>
? ? ? ? ? ? ? ? ? ? ? ? </ControlTemplate>
? ? ? ? ? ? ? ? ? ? </Button.Template>
? ? ? ? ? ? ? ? </Button>
? ? ? ? ? ? ? ? <!--最大化按鈕-->
? ? ? ? ? ? ? ? <Button Width="50" Height="50" Focusable="False" VerticalAlignment="Center" Cursor="Hand" ?Visibility="{DynamicResource MaximizeButtonVisibility}" Click="Button_Click">
? ? ? ? ? ? ? ? ? ? <Button.Template>
? ? ? ? ? ? ? ? ? ? ? ? <ControlTemplate>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <Grid x:Name="grd" Background="Transparent">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <Rectangle Width="20" Height="20" Stroke="#1e1e1e" ?StrokeThickness="3"></Rectangle>
? ? ? ? ? ? ? ? ? ? ? ? ? ? </Grid>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <ControlTemplate.Triggers>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <Trigger Property="IsMouseOver" Value="True">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <Setter TargetName="grd" Property="Background" Value="#666666"></Setter>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? </Trigger>
? ? ? ? ? ? ? ? ? ? ? ? ? ? </ControlTemplate.Triggers>
? ? ? ? ? ? ? ? ? ? ? ? </ControlTemplate>
? ? ? ? ? ? ? ? ? ? </Button.Template>
? ? ? ? ? ? ? ? </Button>
? ? ? ? ? ? ? ? <!--關閉按鈕-->
? ? ? ? ? ? ? ? <Button Width="50" Height="50" ?Focusable="False" ?VerticalAlignment="Center" Cursor="Hand" Click="Button_Click_2">
? ? ? ? ? ? ? ? ? ? <Button.Template>
? ? ? ? ? ? ? ? ? ? ? ? <ControlTemplate>

? ? ? ? ? ? ? ? ? ? ? ? ? ? <Grid x:Name="grd" Background="Transparent">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <Line Width="20" Height="20" X1="0" Y1="0" X2="20" Y2="20" StrokeThickness="3" Stroke="#1e1e1e" ></Line>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <Line Width="20" Height="20" X1="20" Y1="0" X2="0" Y2="20" StrokeThickness="3" Stroke="#1e1e1e" ></Line>
? ? ? ? ? ? ? ? ? ? ? ? ? ? </Grid>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <ControlTemplate.Triggers>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <Trigger Property="IsMouseOver" Value="True">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <Setter TargetName="grd" Property="Background" Value="#666666"></Setter>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? </Trigger>
? ? ? ? ? ? ? ? ? ? ? ? ? ? </ControlTemplate.Triggers>
? ? ? ? ? ? ? ? ? ? ? ? </ControlTemplate>
? ? ? ? ? ? ? ? ? ? </Button.Template>
? ? ? ? ? ? ? ? </Button>
? ? ? ? ? ? </StackPanel>
? ? ? ? </Grid>
? ? </Grid>
</Window>

MainWindow.xaml.cs

using System.Windows;
namespace WpfApp8
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
        private void Button_Click(object sender, RoutedEventArgs e)
        {        
            WindowState = WindowState== WindowState.Maximized? WindowState .Normal: WindowState.Maximized;
        }
        private void Button_Click_1(object sender, RoutedEventArgs e)
        {
            WindowState = WindowState.Minimized;
        }
        private void Button_Click_2(object sender, RoutedEventArgs e)
        {
            Close();
        }
    }
}