图像上的圆形边框不统一

Question

我正在尝试为 windows phone 8.1 silverlight 项目显示带有某种颜色的圆形边框的图像，但是在对其应用剪辑时，图像重叠在边框的边缘, 有没有办法在图像上实现统一的边框？使用以下 xaml 模板

这是我的 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>

请检查下面的输出图像

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

Answer 1

我总是倾向于使用椭圆，所以试试这样的方法（笔划属性是你想要的圆圈周围的边框）

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

Answer 2

我能够通过删除内部边框并添加另一个边框作为内部网格的同级来使其工作

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

图像上的圆形边框不统一

circular border over image is not uniform

c#

silverlight

xaml

windows-phone-8.1