c# - wpf中的聚光灯效果

Question

有没有办法在 wpf 中实现聚光灯效果？ http://www.youtube.com/watch?v=LgLw29c-qr8

我可以理解 OpacityMask 会让我这样做，但是如何将图像（或背景）渲染到画布上，但除了渲染按钮的区域之外，我如何才能将图像（或背景）显示为白色？

这里有几张图片可以更好地解释我的问题，

frame1 显示屏幕左边缘的按钮，遮盖了部分画布背景。

frame2 显示了屏幕中间的按钮，遮住了画布背景的不同部分。

被蒙版的实际画布背景

Answer 1

我想出了以下解决方案，

<Window x:Class="Masking.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    x:Name="ParentWindow" 
    WindowStyle="SingleBorderWindow"
    Title="MainWindow" Width="800" Height="600">
<StackPanel>
    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
        <Slider Value="{Binding ElementName=VisualButton, Path=(Canvas.Left)}" Minimum="0" Maximum="800" Width="800" Canvas.Left="0" Canvas.Top="10" TickFrequency="100" LargeChange="10" />
        <TextBlock Text="{Binding ElementName=VisualButton, Path=(Canvas.Left)}" />
    </StackPanel>
    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
        <Slider Value="{Binding ElementName=VisualButton, Path=(Canvas.Top)}" Minimum="0" Maximum="800" Width="800" Canvas.Left="0" Canvas.Top="10" TickFrequency="100" LargeChange="10" />
        <TextBlock Text="{Binding ElementName=VisualButton, Path=(Canvas.Top)}" />
    </StackPanel>
    <Canvas Width="800" Height="600">
        <Canvas.OpacityMask>
            <VisualBrush Stretch="None" Viewbox="0,0,800,600" ViewboxUnits="Absolute" Viewport="0,0,800,600" ViewportUnits="Absolute">
                <VisualBrush.Visual>
                    <Canvas Width="800" Height="600">
                        <Button x:Name="VisualButton" Width="100" Height="100" Canvas.Left="0" Canvas.Top="0" />
                    </Canvas>
                </VisualBrush.Visual>
            </VisualBrush>
        </Canvas.OpacityMask>
        <Canvas.Background>
            <ImageBrush ImageSource="Desert.jpg" />
        </Canvas.Background>
    </Canvas>
</StackPanel>

但我认为这不是正确的方法。如果可能的话，请让我知道更好的方法。