WPF 自定義控件之Avatar 頭像

Avatar 頭像

用圖標、圖片或者字符的形式展示用戶或事物信息。

基本用法

通過 shape 和 size 設置頭像的形狀和大小。

     <Assists:Avatar Size="50" Src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" x:Name="Test"></Assists:Avatar>
        <Assists:Avatar Size="large" Src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></Assists:Avatar>
        <Assists:Avatar Size="medium" Src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></Assists:Avatar>
        <Assists:Avatar Size="small" Src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></Assists:Avatar>
        <Assists:Avatar Size="50" Src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" Shape="Square"></Assists:Avatar>
        <Assists:Avatar Size="large" Src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" Shape="Square"></Assists:Avatar>
        <Assists:Avatar Size="medium" Src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" Shape="Square"></Assists:Avatar>
        <Assists:Avatar Size="small" Src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" Shape="Square"></Assists:Avatar>

 

展示類型

支持倆種類型：圖片和字符

 <Assists:Avatar Size="small" Src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></Assists:Avatar>
        <Assists:Avatar Size="small" Src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" Shape="Square"></Assists:Avatar>
        <Assists:Avatar Size="small"  Shape="Square">user</Assists:Avatar>
        <Assists:Avatar Size="40" Shape="Circle">user</Assists:Avatar>

 

圖片加載失敗的 ImageFailed事件

當展示類型爲圖片的時候，圖片加載失敗的ImageFailed事件，同原生Image的ImageFailed

圖片如何適應容器框

當展示類型爲圖片的時候，使用Stretch屬性定義圖片如何適應容器框，同原生Stretch。

Attributes

參數	說明	類型	可選值	默認值
size	設置頭像的大小	string	number / large / medium / small	large
shape	設置頭像的形狀	enum	circle / square	circle
src	圖片頭像的資源地址	string
Stretch	當展示類型爲圖片的時候，設置圖片如何適應容器框	enum	None/Fill/Uniform/UniformToFill	UniformToFill
CornerRadius	表示矩形的角的半徑	CornerRadius		4

Events

事件名	說明	回調參數
ImageFailed	圖片類頭像加載失敗觸發事件	（object sender, RoutedExceptionEventArgs e）

 

源碼地址https://github.com/Super0Lan/Avatar