CODEWITHSUNDEEP
c#xamlsilverlightwindows-phone-8.1
abhishek saatal
abhishek saatal

Reputation: 315

circular border over image is not uniform

I am trying to show an image with circular border of some color for windows phone 8.1 silverlight project, however when applying the clip to it, the image overlaps on the edges of the border, is there any way to achieve a uniform border over the image? using the below xaml template

Here is my xaml 

       <Grid Background="Transparent" Width="200" Height="200">
            <Grid.Clip>
                <RectangleGeometry Rect="0,0,200,200" RadiusX="100" RadiusY="100"/>
            </Grid.Clip>
            <Border x:Name="Border1" 
                BorderThickness="4"
                BorderBrush="Red"
                Background="Green"
                CornerRadius="100">

                <Grid Background="Yellow">
                    <ContentPresenter>
                        <Image Source="http://joombig.com/demo-extensions1/images/gallery_slider/Swan_large.jpg" 
                               Stretch="UniformToFill">
                        </Image>
                    </ContentPresenter>
                </Grid>
            </Border>
        </Grid>

Please check the below output image

https://onedrive.live.com/redir?resid=2F14B4EE5F346B6F%215535

Upvotes: 1

Views: 171

Answers (2)

abhishek saatal
abhishek saatal

Reputation: 315

I was able to make it work by removing the inner border and adding another border as a sibling of the inner Grid

   <Grid Background="Transparent" Width="200" Height="200">
        <Grid.Clip>
            <RectangleGeometry Rect="0,0,200,200" RadiusX="100" RadiusY="100"/>
        </Grid.Clip>
        <Grid Background="Yellow">
            <ContentPresenter>
                <Image Source="http://joombig.com/demo-extensions1/images/gallery_slider/Swan_large.jpg" Stretch="UniformToFill"/>
            </ContentPresenter>
        </Grid>
        <Border x:Name="CircularBorder" BorderThickness="10" BorderBrush="Red" Background="Transparent" CornerRadius="100" IsHitTestVisible="False"/>
    </Grid>

Upvotes: 0

Depechie
Depechie

Reputation: 6142

I always tend to use Ellipse, so try something like this ( the stroke property is the border you want around your circle )

    <Ellipse Width="50" Height="50"
             Stroke="LawnGreen"
             StrokeThickness="5">
        <Ellipse.Fill>
            <ImageBrush Stretch="UniformToFill" ImageSource="/Assets/SquareTile71x71.png" />
        </Ellipse.Fill>
    </Ellipse>

Upvotes: 2

Related Questions