WPF 圆形头像框

WPF圆形头像显示

不知何时开始,大多数软件的头像采用了圆形头像,使用WPF进行圆形头像显示比较简单,并不是将图像裁剪成圆形头像后显示.

思路是裁剪出一个正方形的头像,然后在显示的时候,只显示正方形中的内切圆部分即可.WPF中的Image类中有一个Clip属性,只需要设置好该属性即可.生成后的效果如下所示:

关键代码如下:

 

        <!--头像-->
        <Image Source="3.png" VerticalAlignment="Center" Width="140" Height="140">
            <Image.Clip><!--设置图像如何显示-->
                <EllipseGeometry RadiusX="70" RadiusY="70" Center="70,70"/>
            </Image.Clip>
        </Image>
        <Ellipse    <!--添加一个圆框在头像上，做边框-->
            Grid.Row="1" Grid.RowSpan="2"
            HorizontalAlignment="Center"  
            Width="140"  
            Height="140"   
            Stroke="BurlyWood"   
            VerticalAlignment="Center"                 
            StrokeThickness="2"  
            >
        </Ellipse>