C# wpf borderless window add shadow effect

---

前言

When making borderless windows,The system's own shadow will disappear,At this time, I need to add shadows to the window to prevent the window from blending into the background.The way to add shadows is simple,直接用effect就可以了,But there is still a subtle detail that needs to be dealt with,Window maximization after shadowing can be problematic.

---

一、如何实现？

1、去除边框

（1）方法一

使用WindowStyleWindow borders can be removed,AllowsTransparency+BackgroundMake a transparent window to leave a transparent margin for the shadow.
注：This method affects the rendering performance of the window more.

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

（2）方法二

使用WindowChromeBorderless windows can also be implemented,.net4.5This component can then be used.WindowChromeUsually does not affect rendering performance.

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

2、添加阴影

使用DropShadowEffect 加Margin属性即可.After adding shadow effects,需要设置marginLeave a margin for the shadow,Otherwise, no shadow can be seen.Usually it ends at this point,Continue down if the window needs to be maximized.

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

3、添加触发器

1、 Why add triggers？

根据上述2Steps after adding shadows,If you maximize the window you will find it,Margin依然生效,Fullscreen windows have a transparent margin,In order to solve this problem, we need to add triggers.

2、 具体实现

在style中使用触发器,bind window state,The margins are set to when maximized0,Otherwise set to the required margin for the shadow.在这里需要注意的是此时Grid不可以设置MarginAttributes can only be set in triggers,Because of assignment priority,在Grid中设置MarginPost-trigger assignments are invalidated.

<Grid Background="#1e1e1e">
    <Grid.Style>
        <Style TargetType="Grid"> <!--Leave a margin for the shadow--> <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"> <!--Leave a margin for the shadow--> <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();
        }
    }
}

---

三、效果预览

---

总结

以上就是今天要讲的内容,The method of adding shadows to windows is relatively simple,Just need to pay attention to the case where the window is maximized.But in fact, window shadows have a relatively large impact on performance,Especially if you have rendered video,消耗更多的cpu.So shadows are only suitable for scenes with low performance requirements.