Spotlight effect in wpf

1.2k Views Asked by At

Is there a way to achieve spotlight effect in wpf? http://www.youtube.com/watch?v=LgLw29c-qr8

I can understand OpacityMask will let me do this, but how can I render an image (or a background) to a Canvas but will be shown as white in all except a region where a button is rendered?

Here are a couple of images to explain my problem better,

frame1 showing the button at the left edge of the screen masking a portion of canvas background. frame1

frame2 showing the button at the middle of the screen masking a different portion of canvas background. frame2

actual canvas background that has got masked canvas backgroud

1

There are 1 best solutions below

0
On

I came up with the following solution,

<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>

but I do not feel this to be the correct approach. Kindly let me know a better approach if possible.