在不少的应用程序中，用户中心的个人页面经常需要显示头像，这个当前主流的做法就是用户上传一个图片，系统进行截取并显示为一个圆形的轮廓，即圆形的照片。本文将介绍一下自定义的图片控件FlatRoundImage，它是一个UserControl控件，自身携带UI样式和后台逻辑。下面将详细介绍具体的实现细节。
1 WPF项目结构
基于之前创建的WPF示例项目，在其中创建一个新的关于FlatRoundImage的用户控件项目文件。添加过程如下图所示：
添加成功后，本项目文件结构，如下图所示:
与之前的自定义控件不同，用户控件类型的项目文件UI和后台逻辑是在一起的，这样也非常的方便。另外，这种方式创建的自定义控件不需要将其注册到Generic.xaml文件中。
2 WPF FlatRoundImage实现
首先，在控件的UI界面上，UserControl类的控件原生带有UI布局，即像一个窗口一样，可以通过拖入已有的控件进行UI设计，因此从布局到功能上都更加的方便。FlatRoundImage控件，布局界面如下:
其中的核心代码如下：
<UserControlx:Class="Yd.WpfControls.FlatRoundImage"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:local="clr-namespace:Yd.WpfControls"mc:Ignorable="d"Width="100"Height="100"BorderThickness="0"RenderOptions.BitmapScalingMode="HighQuality"UseLayoutRounding="True"TextOptions.TextFormattingMode="Display"d:DesignHeight="100"d:DesignWidth="100"x:Name="uc"><Grid><EllipseWidth="{Binding ElementName=uc, Path=Width}"Height="{Binding ElementName=uc, Path=Width}"StrokeThickness="1"SnapsToDevicePixels="True"Stroke="{Binding ElementName=uc, Path=Stroke}"><Ellipse.Fill><ImageBrushx:Name="PART_IMG"ImageSource="{Binding ElementName=uc, Path=ImgSource}"/><!--<ImageBrush x:Name="PART_IMG" ImageSource="{Binding ImgSource}" /> not work--></Ellipse.Fill></Ellipse></Grid></UserControl>
其中的圆形边框是通过Ellipse实现的，设置长度和宽度一致，即是圆形。 StrokeThickness="1" 表示边框宽度为1。圆形中的背景图是通过Ellipse.Fill属性的，给出了ImageBrush对象，它具有ImageSource属性，可绑定具体的图片URI。这里需要注意一下：ImageSource="{Binding ElementName=uc, Path=ImgSource}"这种绑定是成功的，而ImageSource="{Binding ImgSource}"是无法正确绑定属性的。
下面再给出FlatRoundImage自定义控件的后台代码，具体如下所示：
usingSystem; usingSystem.Windows; usingSystem.Windows.Controls; usingSystem.Windows.Media; namespaceYd.WpfControls{ /// <summary>/// FlatRoundImage.xaml 的交互逻辑/// </summary>publicpartialclassFlatRoundImage : UserControl { publicFlatRoundImage() { InitializeComponent(); } publicstaticreadonlyDependencyPropertyImgSourceProperty=DependencyProperty.Register("ImgSource", typeof(string), typeof(FlatRoundImage) ,newPropertyMetadata("/Image/avatar.png")); publicstringImgSource { get { return (string)GetValue(ImgSourceProperty); } set { SetValue(ImgSourceProperty, value); } } publicstaticreadonlyDependencyPropertyStrokeProperty=DependencyProperty.Register("Stroke", typeof(Brush), typeof(FlatRoundImage) , newPropertyMetadata(Brushes.Silver)); publicBrushStroke { get { return (Brush)GetValue(StrokeProperty); } set { SetValue(StrokeProperty, value); } } } }
其中定义了两个控件的依赖属性，即ImgSource和Stroke，一个代表背景图片的地址，一个代表边框的颜色。
3 WPF FlatRoundImage测试
首先，需要重新生成一下项目文件，然后在WpfControls项目中添加一个窗口Window6，并在此窗口中添加自定义控件FlatRoundImage，Window6.xaml部分示例代码如下:
<Windowxmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"xmlns:local="clr-namespace:WpfControls"xmlns:WpfControls="clr-namespace:Yd.WpfControls;assembly=Yd.WpfControls"x:Class="WpfControls.Window6"mc:Ignorable="d"Title="Window6"Height="350"Width="400"><GridBackground="Green"><WpfControls:FlatRoundImageHorizontalAlignment="Center"Margin="0,93,0,0"VerticalAlignment="Top"ImgSource="/Image/avatar.png"/><WpfControls:FlatRoundImageHorizontalAlignment="Center"Margin="0,222,0,0"Height="60"Width="60"VerticalAlignment="Top"ImgSource="/Image/avatar.png"/></Grid></Window>
另外需要注意的就是，图片路径如果无法找到，则可能需要进行图片素材的输出资源配置，将其作为资源输出到目录中，示意图如下所示：
运行界面如下:
