- [圆形头像](#)
- [去掉黑边](#)
- [拖动打开图形](#)
## 圆形头像
现在很多软件都喜欢使用圆形头像
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)
- 前言
- UWP win10 app 新关键字x:Bing
- win10应用 UWP 使用MD5算法
- win10 UWP读写文件
- UWP appButtonBar样式
- C# 6.0 $&quot;Hello {csdn}&quot;
- Win10 UWP xaml 延迟加载元素
- UWP xaml 圆形头像
- UWP 绘制图形
- win10 uwp 通知Toast
- win10 UWP 显示地图
- win10 uwp 参考
- win10 uwp clone
- win10 uwp 装机必备应用 含源代码
- RichEditBox 使用自定义菜单
- win10 UWP FlipView
- win10 UWP 获取系统信息
- win10 UWP 申请微软开发者
- win10 UWP button
- win10 UWP Markdown 含源代码
- win10 UWP 应用设置
- win10 UWP 九幽数据分析
- win10 UWP 圆形等待
- win10 UWP 标题栏后退
- win10 UWP 单元测试
- win10 UWP 你写我读
- win10 UWP RSS阅读器
- win10 UWP MessageDialog 和 ContentDialog
- win10 UWP Hmac
- win10 UWP GET Post
- Win10 UWP Intro to controls and events
- win10 UWP Controls by function
- win10 uwp App-to-app communication 应用通信