wpf中的聚光灯效果

Question

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

我能理解OpacityMask让我做这件事，但我怎么能渲染图像（或背景）的画布，但会显示为白色的所有除非按钮被渲染的区域？

这里有几个图像的解释我的问题更好，

帧1示出了在屏幕掩蔽画布背景的一部分的左边缘的按钮。

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> 

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