WPF Canvas - 如何使部分出现淡出，同时保持 rest 上的常规不透明度？

Question

I have a WPF Canvas that I set the background of to an image.

I am then drawing a transparent rectangle on the Canvas. What I am trying to achieve is to have the image faded out slightly (presumably through lowering Opacity) everywhere except where the rectangle is .

Example of this effect on a plain white background.

Is there any way to bring opacity up only in the area covered by the Rectangle? Or any other, simple way to achieve this effect?

I have tried lowering the Opacity of the entire Canvas, and then bringing the opacity of the transparent Rectangle up, but it didn't have any effect - the entire Canvas was faded out.

Another idea (which I guess could be quite costly in performance) I had would be to, instead of reducing Opacity of the entire Canvas, to fill the remainder (except the selected area) with semi-transparent Rectangles with a darker background. However, I assume this would require a lot of re-calculations when placing the Rectangles on the Canvas.

Answer 1

You need to set an opacity mask. I show an example how to create it using VisualBrush.

<Window x:Class="Core2022.SO.nooblet2.OpacityMaskWindow"
        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:Core2022.SO.nooblet2"
        mc:Ignorable="d"
        Title="OpacityMaskWindow" Height="450" Width="800">
    <Canvas x:Name="mainCanvas">
        <Panel.Background>
            <ImageBrush ImageSource="/telegram.png"/>
        </Panel.Background>
        <UIElement.OpacityMask>
            <VisualBrush>
                <VisualBrush.Visual>
                    <Canvas Background="#40000000"
                            Width="{Binding ActualWidth, ElementName=mainCanvas, Mode=OneWay}"
                            Height="{Binding ActualHeight, ElementName=mainCanvas, Mode=OneWay}">
                        <Rectangle Fill="#FF000000"
                                   Canvas.Left="{Binding Path=(Canvas.Left), ElementName=someFrame, Mode=OneWay}"
                                   Canvas.Top="{Binding Path=(Canvas.Top), ElementName=someFrame, Mode=OneWay}"
                                   Width="{Binding ActualWidth, ElementName=someFrame, Mode=OneWay}"
                                   Height="{Binding ActualHeight, ElementName=someFrame, Mode=OneWay}"/>
                    </Canvas>
                </VisualBrush.Visual>
            </VisualBrush>
        </UIElement.OpacityMask>
        <Rectangle x:Name="someFrame" Canvas.Left="200" Canvas.Top="100" Width="400" Height="200"/>
    </Canvas>
</Window>