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> 

，但我不覺得這是正確的做法。請儘可能讓我知道更好的方法。