WPF自定义控件08:FlatRoundImage-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

WPF自定义控件08:FlatRoundImage

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

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

1 WPF项目结构


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

1.jpg

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

2.jpg

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

2 WPF FlatRoundImage实现


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

3.jpg

其中的核心代码如下:

<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>

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

3.jpg

运行界面如下:

5.jpg

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章
最新文章
相关文章