WPF自定义控件08：FlatRoundImage

       在不少的应用程序中，用户中心的个人页面经常需要显示头像，这个当前主流的做法就是用户上传一个图片，系统进行截取并显示为一个圆形的轮廓，即圆形的照片。本文将介绍一下自定义的图片控件FlatRoundImage，它是一个UserControl控件，自身携带UI样式和后台逻辑。下面将详细介绍具体的实现细节。

1 WPF项目结构

    基于之前创建的WPF示例项目，在其中创建一个新的关于FlatRoundImage的用户控件项目文件。添加过程如下图所示：

添加成功后，本项目文件结构，如下图所示:

      与之前的自定义控件不同，用户控件类型的项目文件UI和后台逻辑是在一起的，这样也非常的方便。另外，这种方式创建的自定义控件不需要将其注册到Generic.xaml文件中。

2 WPF FlatRoundImage实现

    首先，在控件的UI界面上，UserControl类的控件原生带有UI布局，即像一个窗口一样，可以通过拖入已有的控件进行UI设计，因此从布局到功能上都更加的方便。FlatRoundImage控件，布局界面如下:

其中的核心代码如下：

<UserControl x: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>
        <Ellipse Width="{Binding ElementName=uc, Path=Width}" 
                 Height="{Binding ElementName=uc, Path=Width}" 
                 StrokeThickness="1" 
                 SnapsToDevicePixels="True"
                 Stroke="{Binding ElementName=uc, Path=Stroke}" >
            <Ellipse.Fill>
                <ImageBrush x: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自定义控件的后台代码，具体如下所示：

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
namespace Yd.WpfControls
{
    /// <summary>
    /// FlatRoundImage.xaml 的交互逻辑
    /// </summary>
    public partial class FlatRoundImage : UserControl
    {
        public FlatRoundImage()
        {
            InitializeComponent();
        }
       
        public static readonly DependencyProperty ImgSourceProperty =
        DependencyProperty.Register("ImgSource", typeof(string), typeof(FlatRoundImage)
            ,new PropertyMetadata("/Image/avatar.png"));
        public string ImgSource
        {
            get { return (string)GetValue(ImgSourceProperty); }
            set
            {
                SetValue(ImgSourceProperty, value);
            }
        }

        public static readonly DependencyProperty StrokeProperty =
   DependencyProperty.Register("Stroke", typeof(Brush), typeof(FlatRoundImage)
       , new PropertyMetadata(Brushes.Silver));
        public Brush Stroke
        {
            get { return (Brush)GetValue(StrokeProperty); }
            set
            {
                SetValue(StrokeProperty, value);
            }
        }

    }
}

其中定义了两个控件的依赖属性，即ImgSource和Stroke，一个代表背景图片的地址，一个代表边框的颜色。

3 WPF FlatRoundImage测试

    首先，需要重新生成一下项目文件，然后在WpfControls项目中添加一个窗口Window6，并在此窗口中添加自定义控件FlatRoundImage，Window6.xaml部分示例代码如下:

<Window
        xmlns="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">
    <Grid Background="Green">

        <WpfControls:FlatRoundImage HorizontalAlignment="Center" Margin="0,93,0,0" 
                  VerticalAlignment="Top" ImgSource="/Image/avatar.png"/>

        <WpfControls:FlatRoundImage HorizontalAlignment="Center" Margin="0,222,0,0" 
                  Height="60" Width="60"
                  VerticalAlignment="Top" ImgSource="/Image/avatar.png"/>

    </Grid>
</Window>

另外需要注意的就是，图片路径如果无法找到，则可能需要进行图片素材的输出资源配置，将其作为资源输出到目录中，示意图如下所示：

运行界面如下: