UWP xaml 圆形头像

圆形头像

现在很多软件都喜欢使用圆形头像
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
this.DebugSettings.EnableFrameRateCounter = 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

lindexi_gd CSDN认证博客专家 C# WPF UWP 微软最具价值专家
我是微软Windows应用开发方向的最具价值专家,欢迎访问我博客blog.lindexi.com里面有大量WPF和UWP博客
已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 终极编程指南 设计师:CSDN官方博客 返回首页