圆形头像

现在很多软件都喜欢使用圆形头像

win10 uwp使用圆形头像很简单

            <Ellipse Width="200" Height="200" Margin="10,10,10,10">
                <Ellipse.Fill>
                    <ImageBrush ImageSource="assets/1.jpg"/>
                </Ellipse.Fill>
            </Ellipse>

使用这样的圆形头像没有对原有图形的渲染大小进行变化,一个大的图形不会解码为刚好要的,我们进行一步修改

代码:

<Page
    x:Class="Roundhead.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Roundhead"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <StackPanel Orientation="Vertical">
            <Ellipse Width="200" Height="200" Margin="10,10,10,10">
                <Ellipse.Fill>
                    <ImageBrush ImageSource="assets\1.jpg"/>
                </Ellipse.Fill>
            </Ellipse>
            <TextBlock Text="我的头像是圆" HorizontalAlignment="Center" />
        </StackPanel>
    </Grid>
</Page>

去掉黑边

程序界面有一些



看起来不好

在app.xaml.cs找到this.DebugSettings.EnableFrameRateCounter = true;

写为false

拖动打开图形

<ImageBrush ImageSource="assets\1.jpg"/>添加x:Name="ximg"

在Grid增加AllowDrop="True" DragOver="Grid_DragOver" Drop="Grid_Drop"

Grid_Drop

        private async void Grid_Drop(object sender , DragEventArgs e)
        {
            var defer = e.GetDeferral();

            try
            {
                DataPackageView dataView = e.DataView;
                // 拖放类型为文件存储。
                if (dataView.Contains(StandardDataFormats.StorageItems))
                {
                    var files = await dataView.GetStorageItemsAsync();
                    StorageFile file = files.OfType<StorageFile>().First();
                    if (file.FileType == ".png" || file.FileType == ".jpg")
                    {
                        // 拖放的是图片文件。
                        BitmapImage bitmap = new BitmapImage();
                        await bitmap.SetSourceAsync(await file.OpenAsync(FileAccessMode.Read));
                        ximg.ImageSource = bitmap;
                    }
                }
            }
            finally
            {
                defer.Complete();
            }
        }

Grid_DragOver

        private void Grid_DragOver(object sender , DragEventArgs e)
        {
            //需要using Windows.ApplicationModel.DataTransfer;
            e.AcceptedOperation = DataPackageOperation.Copy;

            // 设置拖放时显示的文字。
            //e.DragUIOverride.Caption = "拖放打开";

            // 是否显示拖放时的文字。默认为 true。
            //e.DragUIOverride.IsCaptionVisible = false;

            // 是否显示文件预览内容,一般为文件图标。默认为 true。
            // e.DragUIOverride.IsContentVisible = false;

            // Caption 前面的图标是否显示。默认为 true。
            //e.DragUIOverride.IsGlyphVisible = false;

            //需要using Windows.UI.Xaml.Media.Imaging;
            //设置拖动图形,覆盖文件预览
            //e.DragUIOverride.SetContentFromBitmapImage(new BitmapImage(new Uri("ms-appx:///Assets/1.jpg")));

            e.Handled = true;
        }

e.AcceptedOperation = DataPackageOperation.Copy;设置拖动作为复制

需要using Windows.ApplicationModel.DataTransfer

拖放显示文字e.DragUIOverride.Caption = "拖放打开";

是否显示拖放时的文字。默认为 truee.DragUIOverride.IsCaptionVisible = false;

复制图标是否显示 e.DragUIOverride.IsGlyphVisible = false;

设置拖动图形,覆盖文件预览e.DragUIOverride.SetContentFromBitmapImage(new BitmapImage(new Uri(img)));

代码:https://code.csdn.net/lindexi_gd/lindexi_gd/tree/master/Roundhead

参考:http://timheuer.com/blog/archive/2015/05/06/making-circular-images-in-xaml-easily.aspx

UWP xaml 圆形头像的更多相关文章

  1. UWP 画一个圆形头像

    经常需要做一个圆形头像的样式,like this 做法很简单,直接上xaml. <Ellipse Width=" Height="> <Ellipse.Fill& ...

  2. Android 圆形头像 自己动手

    圆形头像DIY 现在大部分app使用的都是圆形头像,网上开源的也很多,但是有没有考虑过DIY圆形头像呢?下面就自己实现一个,先看下demo展示 第一步:原理解释(图片很丑,原理很真) 1.画外框圆形, ...

  3. css3圆形头像(当图片宽高不相等时)

    1.图片宽高相等,width:300px: height:300px; 把他变成宽高100px的圆形头像 img{width:100px; height:100px; border-radius:50 ...

  4. Android之圆形头像裁切

    PS:今天项目测试组发现,百度地图定位的数据坐标位置是正确的,但是显示的数据是错误的.最后查来查去发现,那个商厦在百度地图上根本就没有那条数据,这让我如何显示,当初就推崇使用高德地图定位,上面的数据量 ...

  5. Android控件Gridview实现仿支付宝首页,Fragment底部按钮切换和登录圆形头像

    此案例主要讲的是Android控件Gridview(九宫格)完美实现仿支付宝首页,包含添加和删除功能:Fragment底部按钮切换的效果,包含四个模块,登录页面圆形头像等,一个小项目的初始布局. 效果 ...

  6. NGUI 圆形头像遮罩

    NGUI 圆形头像遮罩 列表,求助 http://tieba.baidu.com/p/3961444508

  7. Android ImageView圆形头像

    转载自:http://m.oschina.net/blog/321024 Android ImageView圆形头像 图片完全解析 我们在做项目的时候会用到圆形的图片,比如用户头像,类似QQ.用户在用 ...

  8. 自定义控件--CircleImageView(类似于QQ、微信圆形头像自定义控件)

    现在基本上所有的需要用户注册的APP都有一个需要用户上传头像的需求,上传的头像基本都是类似于QQ.微信等社交应用圆形头像.最近,正在做的一个社交应用多处需要用到这种圆形头像的处理,总不能每次都对图片做 ...

  9. Duilib实现圆形头像控件

    .h文件 #ifndef __UIHEADICON_H__ #define __UIHEADICON_H__ /* 名称:圆形头像控件(派生CButtonUI类) */ class CHeadUI: ...

随机推荐

  1. 团队作业9——测试与发布(Beta版本)

    Beta版本测试报告 一bug汇总 计时没有显示即倒计时,难度不同的功能没有实现(已修复) 没有导入试卷和错题功能(不打算修复) 前台管理功能(部分修复) 界面美观问题(没有修复也不打算修复) 二.场 ...

  2. 201521123045 《Java程序设计》第7周学习总结

    Java 第七周总结 1. 本周学习总结 2. 书面作业 1.ArrayList代码分析 1.1 解释ArrayList的contains源代码 public boolean contains(Obj ...

  3. 201521123003《Java程序设计》第6周学习总结

    1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 注1:关键词与内容不求多,但概念之间的联系要清晰,内容覆盖 ...

  4. 201521123067 《Java程序设计》第5周学习总结

    201521123067 <Java程序设计>第5周学习总结 1. 本周学习总结 1.1 尝试使用思维导图总结有关多态与接口的知识点. 1.2 可选:使用常规方法总结其他上课内容. ●在本 ...

  5. 201521123104 《JAVA程序设计》第二周学习总结

    1. 本周学习总结 认识了JAVA编程中一些类型与变量,了解了一些基本运算符的使用 变量在命名时,不可以使用数字或一些特殊字符作为开头 不可以声明局部变量后未指定任何值给它之前就使用变量 在程序中写下 ...

  6. 201521123028《Java程序设计》第1周学习总结

    1. 本周学习总结 通过本周的学习: 1.了解了Java的发展史(从OAK转向Internet,并逐步发展至今的历程) 2.与C语言比较,Java语言的特点: ①将源程序编译成一种结构中立的中间文件格 ...

  7. 201521123040《Java程序设计》第9周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. 2. 书面作业 本次PTA作业题集异常 1.常用异常 题目5-1 1.1 截图你的提交结果(出现学号) 1.2 自己 ...

  8. 201521123053《Java程序设计》第十二周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. 一些有关流与文件的知识点: 1. 字节缓冲流: BufferedInputStream(FileInputSt ...

  9. springmvc学习笔记(常用注解)

    springmvc学习笔记(常用注解) 1. @Controller @Controller注解用于表示一个类的实例是页面控制器(后面都将称为控制器). 使用@Controller注解定义的控制器有如 ...

  10. HTML文本

    1.HTML元素 2.HTML属性 3.HTML文本格式化 4.HTML样式 1.HTML元素 1.什么是HTML元素 HTML 元素指的是从开始标签(start tag)到结束标签(end tag) ...