CODEWITHSUNDEEP
wpfdropshadowwindow-chrome
Andreas Zita
Andreas Zita

Reputation: 7560

WPF: Drop shadow on borderless window without custom chrome

Im struggling with drop shadow on WPF-windows with WindowStyle=None and ResizeMode=NoResize. Is there any good alternative to using a DropShadow-effect on the window-content? I have tried WindowChrome in Shell Integration Library but its not showing any "Chrome" when ResizeMode=NoResize.

If it was possible somehow to draw a wpf-drop-shadow outside my window borders it could be a solution. If Im drawing the drop shadow inside the window I get a different behaviour then standard when for instance moving the mouse-cursor over the shadow. There should be no hit testing in my window when doing this and clicking this area should activate the window behind etc.

Zune seem to be drawing its own drop shadow because its not looking exactly like the standard Chrome-shadow. But its behaving like a normal drop shadow in that way its not capturing mouse events. I wonder how they do it.

Spotify also has another kind of shadow which is also not capturing mouse events.

I guess these apps draw their own WindowChrome completely, but how? Is this supported in WPF somehow?

<Window x:Class="ShellIntegrationTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:shell="clr-namespace:Microsoft.Windows.Shell;assembly=Microsoft.Windows.Shell"
        Title="MainWindow" Height="512" Width="384" WindowStyle="None" ResizeMode="NoResize">
  <shell:WindowChrome.WindowChrome>
    <shell:WindowChrome ResizeBorderThickness="5" GlassFrameThickness="-1" CornerRadius="0" CaptionHeight="25" />
  </shell:WindowChrome.WindowChrome>
</Window>

Upvotes: 4

Views: 15147

Answers (3)

Prashant Manjule
Prashant Manjule

Reputation: 312

<Window 
    .........
    .........
    .........
    Title="Welcome" Loaded="Window_Loaded" Height="400" Width="400" ResizeMode="NoResize" AllowsTransparency="True" WindowStyle="None" ShowInTaskbar="False" WindowStartupLocation="CenterScreen" Background="Transparent" BorderThickness="0">
<Border Margin="10" CornerRadius="100"
        BorderBrush="Black"
        BorderThickness="1"
        CornerRadius="10">
    <Border.Effect>
        <DropShadowEffect />
    </Border.Effect>

    <Grid> 
     ...
     ...//main design inside windows
     ...
    </Grid>
</Border>

Upvotes: 0

Gaurav Panwar
Gaurav Panwar

Reputation: 1118

This code will work on a borderless window to show the shadow if the window is set to not resize and it's style is none.

    xmlns:local="clr-namespace:BorderTest" 
    mc:Ignorable="d" WindowStyle="None" ResizeMode="NoResize"
   Title="MainWindow" Height="350" Width="525" AllowsTransparency="True" Background="Transparent">
<Border Margin="10" BorderThickness="1" BorderBrush="Blue">
    <Border.Effect>
        <DropShadowEffect Color="Black"
                          Direction="270"
                          BlurRadius="10"
                          ShadowDepth="3" />
    </Border.Effect>
    <Grid Background="White">

    </Grid>
</Border>

Upvotes: 2

Heksesang
Heksesang

Reputation: 21

If you change ResizeMode to CanResize and set the ResizeBorderThickness to 0, you'll get a borderless window, which cannot be resized and the drop shadow can be clicked through so the window behind it activates.

Upvotes: 0

Related Questions