wpfui-design

WPF window corner radius and shadow

I want to have a window without buttons, with rounded corners and with shadow. Like this: Like this

So this is my XAML code:

<Window x:Class="Password.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:Password"
        mc:Ignorable="d"
        Title="MainWindow" Height="294" Width="546" Background="Transparent" Foreground="#FFE755DD" AllowsTransparency="True" WindowStyle="None" WindowStartupLocation="CenterScreen">
    <Grid >
        <Grid.Effect>
            <DropShadowEffect BlurRadius="20" Direction="-90" RenderingBias="Quality" ShadowDepth="2"/>
        </Grid.Effect>
        <Border Background="#FF22173C" CornerRadius="20, 20, 20, 20"/>
    </Grid>
</Window>

And this is the output:

And this is the output

The shadow isn't rounded. What should I do?

Solution

  • The blur gets cropped because your window doesn't own the space around it.

    Set <Grid Margin="20"> to allow the blur to occur in the area you control.