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>