🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
- [圆形头像](#) - [去掉黑边](#) - [拖动打开图形](#) ## 圆形头像 现在很多软件都喜欢使用圆形头像 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> ~~~ ![圆形头像](https://box.kancloud.cn/2016-04-08_570763684a5bd.jpg "") ## 去掉黑边 程序界面有一些 ![程序界面有一些](https://box.kancloud.cn/2016-04-08_5707636866e38.jpg "") 看起来不好 在app.xaml.cs找到`this.DebugSettings.EnableFrameRateCounter = true;` 写为`false` ![this.DebugSettings.EnableFrameRateCounter = false;](https://box.kancloud.cn/2016-04-08_57076368861f1.jpg "") ## 拖动打开图形 把`<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; } ~~~ ![这里写图片描述](https://box.kancloud.cn/2016-04-08_57076368abe06.jpg "") `e.AcceptedOperation = DataPackageOperation.Copy;`设置拖动作为复制 需要`using Windows.ApplicationModel.DataTransfer` 拖放显示文字`e.DragUIOverride.Caption = "拖放打开";` ![这里写图片描述](https://box.kancloud.cn/2016-04-08_57076368e387e.jpg "") 是否显示拖放时的文字。默认为 true`e.DragUIOverride.IsCaptionVisible = false;` ![这里写图片描述](https://box.kancloud.cn/2016-04-08_570763691e3cf.jpg "") 复制图标是否显示 `e.DragUIOverride.IsGlyphVisible = false;` ![这里写图片描述](https://box.kancloud.cn/2016-04-08_570763693f2f1.jpg "") 设置拖动图形,覆盖文件预览`e.DragUIOverride.SetContentFromBitmapImage(new BitmapImage(new Uri(img)));` ![这里写图片描述](https://box.kancloud.cn/2016-04-08_570763695f20f.jpg "") 代码:[https://code.csdn.net/lindexi_gd/lindexi_gd/tree/master/Roundhead](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](http://timheuer.com/blog/archive/2015/05/06/making-circular-images-in-xaml-easily.aspx)