Question

I am trying to clip a 4:3 image with a circle within a grid control.

I need the circle clip to reveal the image from the middle in a perfect circle. See below.

alt text http://www.cse.unsw.edu.au/~vjro855/Untitled.png

The circle should dynamically re-size with the image.

I have tried Canvas.Clip and Ellipse+VisualBrush without achieving the correct behavior.

Thanks!

Answer 1

Solved my problem.

The solution was to use converters as part of the Grid.Clip property. I used code from the following site.

http://blogorama.nerdworks.in/entry-CenteringelementsonacanvasinWP.aspx

The challenge I encountered was having to use the EllipseGeometry instead of just Ellipse.

Ellipse uses height and width whilst EllipseGeometry uses radiusx,y and center.

With Ellipse I could have just set height and width to the height of the image to get the clip i required.

Would be a lot simpler if expressions worked with binding ie. {Binding Path=expr}

    <Grid>

    <Grid.Clip>  

        <EllipseGeometry>
            <EllipseGeometry.RadiusX>
                <MultiBinding
                    Converter="{StaticResource HalfValue1}">
                    <Binding
                        ElementName="vemap"
                        Path="ActualHeight" />
                </MultiBinding>
            </EllipseGeometry.RadiusX>
            <EllipseGeometry.RadiusY>
                <MultiBinding
                    Converter="{StaticResource HalfValue1}">
                    <Binding
                        ElementName="vemap"
                        Path="ActualHeight" />
                </MultiBinding>
            </EllipseGeometry.RadiusY>
            <EllipseGeometry.Center>
                <MultiBinding
                    Converter="{StaticResource HalfValue}">
                    <Binding
                        ElementName="vemap"
                        Path="ActualHeight" />
                    <Binding
                        ElementName="vemap"
                        Path="ActualWidth" />
                </MultiBinding>
            </EllipseGeometry.Center>
        </EllipseGeometry>

    </Grid.Clip>       

    <Image>

</Grid>