1

I have a borderless Window with a Border as root node and Canvas as child. The canvas is used to draw Polyline by MouseMove. The border have a DropShadowEffect and this cause a significant drop of performance to draw on Canvas. I have already seen that some others post suggest to put the Border and Canvas in 2 separate Grid, but this will not work for my case since if I put the Border inside a Grid I lose the shadow effect around the Window.

There is another way to prevent the propagation of the Effect?

This is the xaml code:

<Window x:Class="Test.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:Test"
    mc:Ignorable="d"
    Title="Test"
    Height="600" Width="1000"
    Background="{x:Null}"
    BorderThickness="0"
    BorderBrush="Black" 
    AllowsTransparency="True"
    WindowStyle="None">

<WindowChrome.WindowChrome>
    <WindowChrome
    CaptionHeight="0"
    ResizeBorderThickness="5,5,20,20"/>
</WindowChrome.WindowChrome>

<Border x:Name="borderShadow" Margin="0,0,15,15" BorderThickness="2,1" BorderBrush="Black" Background="#FF355870">
    <Border.Effect>
        <DropShadowEffect Color="Black"
                      Direction="315"
                      BlurRadius="15"
                      ShadowDepth="10"/>
    </Border.Effect>

    <Grid Background="#FF355870">
        <Canvas x:Name="canvasBoard" Background="#00000000" MouseMove="canvasBoard_MouseMove" MouseDown="canvasBoard_MouseDown" MouseUp="canvasBoard_MouseUp"/>
    </Grid>
</Border>
</Window>
user2272143
  • 469
  • 5
  • 22
  • 1
    The effect will apply to anything inside the control it is applied to. A grid will clip the effect. The canvas needs to be outside whatever you apply that effect to. It will not clip. And the window is a contentcontrol so it can only have the one root control. You're probably best making that the canvas. Put the border inside that and set it hittestvisible false so all your events work. – Andy Sep 22 '19 at 17:42
  • @Andy Thanks for you answer! Unfortunately I can't do what you suggested because the real application will have other grids and controls with margins and paddings and the canvas will be in one of the others grids, so if I put the border with effect inside the Canvas it will not apply the shadow to the Window but to the grid that contain the Canvas. There is no way to tell to the canvas to not use the effect of the parent? – user2272143 Sep 22 '19 at 18:17
  • You can't avoid applying the effect to child controls. – Andy Sep 23 '19 at 11:23

1 Answers1

3

You can put the Border alone inside a Grid in this way:

<Grid>
<Border x:Name="borderShadow" Margin="0,0,15,15" BorderThickness="2,1" BorderBrush="Black" Background="#FF355870">
    <Border.Effect>
        <DropShadowEffect Color="Black"
                      Direction="315"
                      BlurRadius="15"
                      ShadowDepth="10"/>
    </Border.Effect>
</Border>
<Grid Background="#FF355870">
    <Canvas x:Name="canvasBoard" Background="#00000000" MouseMove="canvasBoard_MouseMove" MouseDown="canvasBoard_MouseDown" MouseUp="canvasBoard_MouseUp"/>
</Grid>
</Grid>