wpf中的聚光灯效果

Question

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

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

以下是一些可以更好地解释我的问题的图片，

frame1显示屏幕左边缘的按钮，屏蔽画布背景的一部分。

第2帧显示屏幕中间的按钮，屏蔽画布背景的不同部分。

已被屏蔽的实际画布背景

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>

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