Fix 4: 3 image in WPF with circle

Question

I am trying to crop a 4: 3 image using a circle in a grid control.

I need a circular clip to show 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 change with the image.

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

Thank!

Answer 1

Solved my problem.

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

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

, , , EllipseGeometry Ellipse.

Ellipse height width, EllipseGeometry radiusx,y center.

Ellipse , .

, , .. {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>