CODEWITHSUNDEEP
wpfsilverlightwpf-controls
nishantcop
nishantcop

Reputation: 1017

Create hollow border/square wpf

I want to create a control in WPF/Silverlight. This control is rectangle/border which is hollow from the center. My intention is to gray out everything else except for a squared area within the rectangle/border container. Is it possible to do this way?

Also, it should be able to move this hollow area on mouse movement.

Thanks everyone for help in advance. This is the sample output I want

Upvotes: 1

Views: 656

Answers (1)

SHSE
SHSE

Reputation: 2433

Well, the easiest solution would be this:

<Grid Width="256" Height="256" MouseMove="UIElement_OnMouseMove">
    <Image Source="test1.jpg" Stretch="UniformToFill" />
    <Path Fill="#81808080" Stretch="Fill">
        <Path.Data>
            <CombinedGeometry GeometryCombineMode="Exclude">
                <CombinedGeometry.Geometry1>
                    <RectangleGeometry Rect="0,0,100,100" />
                </CombinedGeometry.Geometry1>
                <CombinedGeometry.Geometry2>
                    <RectangleGeometry
                        x:Name="Hole"
                        RadiusX="7"
                        RadiusY="7"
                        Rect="20,20,60,60" /> <!-- this is the hole -->
                </CombinedGeometry.Geometry2>
            </CombinedGeometry>
        </Path.Data>
    </Path> 
</Grid>

Event handler:

private void UIElement_OnMouseMove(object sender, MouseEventArgs e) {
    var element = (FrameworkElement) sender;
    var position = e.GetPosition(element);

    var relativeX = position.X/element.ActualWidth*100.0;
    var relativeY = position.Y/element.ActualHeight*100.0;

    Hole.Rect = new Rect(relativeX - 20, relativeY - 20, 40, 40);    
}

Upvotes: 3

Related Questions