WPF如何在同一个区域依次叠加显示多张图片呢?
正如标题的问题,有时需要在已显示的图片的右上角(或其他区域)显示小图标,譬如下图的患者头像右上角显示病情图标:(这里不采用事先用PS编排成一个图片文件的方式,因为此方式普适性不好)

解决方案:绘制该复合图像(不希望覆盖上一张图片的区域需要将当前图片相应区域处理成透明,不赘述),创建一个 ImageDrawing 并设置它的 ImageDrawing.ImageSource 和 ImageDrawing.Rect 属性。 ImageDrawing.ImageSource 属性指定要绘制的图像,ImageDrawing.Rect 属性指定每个图像的位置和大小。
<Border Grid.ColumnSpan="3" BorderBrush="Transparent" BorderThickness="2"
Visibility="{Binding Converter={x:Static js:Converters.BooleanToVisibility}, Path=IsNormal}">
<Image Stretch="None" Opacity="{Binding ImageOpacity}">
<Image.Source>
<DrawingImage >
<DrawingImage.Drawing>
<DrawingGroup>
<ImageDrawing Rect="0,0,48,48" ImageSource="{Binding Image}"/>
<ImageDrawing Rect="38,0,20,20" ImageSource="{Binding Converter={StaticResource IllnessSeverityToImageConverter}, Path=Encounter.IllnessSeverity}"/>
</DrawingGroup>
</DrawingImage.Drawing>
</DrawingImage>
</Image.Source>
</Image>
</Border>
DrawingGroup还可以加入绘制的图形,譬如:
<DrawingGroup>
<ImageDrawing Rect="0,0,48,48" ImageSource="{Binding Image}"/>
<ImageDrawing Rect="38,0,20,20" ImageSource="{Binding Converter={StaticResource IllnessSeverityToImageConverter}, Path=Encounter.IllnessSeverity}"/>
<GeometryDrawing Brush="{Binding Converter={StaticResource NurseLevelCodeToBrushConverter}, Path=Encounter.NurseLevel}">
<GeometryDrawing.Geometry>
<EllipseGeometry Center="10,50" RadiusX="5" RadiusY="5"/>
</GeometryDrawing.Geometry>
<GeometryDrawing.Pen>
<Pen Brush="Black" Thickness="0.5" />
</GeometryDrawing.Pen>
</GeometryDrawing>
</DrawingGroup>
下面是转换器代码:
public class IllnessSeverityToImageConverter : IValueConverter
{
#region IValueConverter Members
/// <summary>
/// Convert forward function.
/// </summary>
/// <param name="value">The source value.</param>
/// <param name="targetType">The target type.</param>
/// <param name="parameter">The parameter.</param>
/// <param name="culture">The culture info.</param>
/// <returns>The converted value.</returns>
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
IllnessSeverity severity = value as IllnessSeverity;
if (severity != null)
{
if (severity.Id == IllnessSeverity.Emergent.Id)
return ResourceHelper.IllnessSeverityUrgent;
else if (severity.Id == IllnessSeverity.Critical.Id)
return ResourceHelper.IllnessSeverityDangerous;
else
return null;
} return null;
} /// <summary>
/// Convert back function.
/// </summary>
/// <param name="value">The source value.</param>
/// <param name="targetType">The target type.</param>
/// <param name="parameter">The parameter.</param>
/// <param name="culture">The culture info.</param>
/// <returns>The converted back value.</returns>
public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
throw new NotImplementedException();
} #endregion
}
WPF如何在同一个区域依次叠加显示多张图片呢?的更多相关文章
- WPF通过不透明蒙板切割显示子控件
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/Backspace110/article/ ...
- Frameset框架,在同一个浏览器窗口中显示不止一个页面
总结一下.通过使用Frameset框架,可以在同一个浏览器窗口中显示不止一个页面. 先举个例子: 1 <frameset rows="100,*" cols="*& ...
- opencv 3 core组件进阶(2 ROI区域图像叠加&图像混合;分离颜色通道、多通道图像混合;图像对比度,亮度值调整)
ROI区域图像叠加&图像混合 #include <opencv2/core/core.hpp> #include <opencv2/highgui/highgui.hpp&g ...
- Qt中在图片上叠加显示文字
Qt中在图片上叠加显示文字 QCustLabel::QCustLabel(QWidget *parent):QLabel(parent){ setPixmap(QPixmap(QString::f ...
- Xcode6 运行程序后,右侧Debug区域的Memory显示空白解决方法
http://chenyh-blog.com/%E8%9B%8B%E7%96%BC%E7%9A%84%E5%86%85%E5%AD%98-%E7%AC%AC%E4%B8%89%E7%AF%87-sdw ...
- WPF中的ListBox实现按块显示元素的方法
本文实例讲述了WPF中的ListBox实现按块显示元素的方法.分享给大家供大家参考,具体如下: 注意:需要设置ListBox的属性 ScrollViewer.HorizontalScrollBarVi ...
- WPF入门(四)->线形区域Path内容填充之填充图(ImageBrush)
原文:WPF入门(四)->线形区域Path内容填充之填充图(ImageBrush) 前面我们提到了LinearGradientBrush可以用来画渐变填充图,那么我们同时也可以使用ImageBr ...
- WPF入门(四)->线形区域Path内容填充之渐变色(LinearGradientBrush)
原文:WPF入门(四)->线形区域Path内容填充之渐变色(LinearGradientBrush) 前面我们介绍到,Path对象表示一个用直线或者曲线连接的图形,我们可以使用Path.Data ...
- 在WPF中实现图片一边下载一边显示
原文 在WPF中实现图片一边下载一边显示 当我们上网查看一个较大的图片时,浏览器能一边下载一边显示,这样用户体验是比较好的,但在WPF程序中,当我们通过如下方式显示一幅图片时: img.Source ...
随机推荐
- 精华阅读第 10 期 |解开阿尔法狗(AlphaGo)人工智能的画皮
谷歌用一个变了身的古老「穷举算法」,披上「神经网络」的画皮,假装「跨时代」的黑科技,忽悠广大「膜拜者」,「狮仙」我实在看不下去了,来揭一揭这只幺蛾子小狗的画皮. 本期是移动开发精英俱乐部的第10期推荐 ...
- 李洪强iOS之Foundation框架—字符串
Foundation框架—字符串 一.Foundation框架中一些常用的类 字符串型: NSString:不可变字符串 NSMutableString:可变字符串 集合型: 1) NSArray:O ...
- 李洪强iOS开发之OC[012] -类的声明实现小结
// // main.m // 11 - 内容总结 // // Created by vic fan on 16/7/9. // Copyright © 2016年 李洪强. All righ ...
- lintcode 中等题:subsets II 带重复元素的子集
题目 带重复元素的子集 给定一个可能具有重复数字的列表,返回其所有可能的子集 样例 如果 S = [1,2,2],一个可能的答案为: [ [2], [1], [1,2,2], [2,2], [1,2] ...
- lintcode:First Missing Positive 丢失的第一个正整数
题目 丢失的第一个正整数 给出一个无序的整数数组,找出其中没有出现的最小正整数. 样例 如果给出 [1,2,0], return 3 如果给出 [3,4,-1,1], return 2 挑战 只允许时 ...
- lintcode:Add Binary 二进制求和
题目: 二进制求和 给定两个二进制字符串,返回他们的和(用二进制表示). 样例 a = 11 b = 1 返回 100 解题: 和求两个链表的和很类似 考虑进位,考虑最后一项的进位 0+0 = 0 不 ...
- 【Linux常识篇(2)】理解inode
inode是什么? 理解inode,要从文件储存说起.文件储存在硬盘上,硬盘的最小存储单位叫做"扇区"(Sector).每个扇区储存512字节(相当于0.5KB). 操作系统读取硬 ...
- 【Linux高频命令专题(12)】touch.md
概述 一般在使用make的时候可能会用到,用来修改文件时间,或者新建一个不存在的文件. 命令格式 touch [选项]... 文件... 命令参数 -a 或--time=atime或--time=ac ...
- ubuntu中一些软件的命令安装及设置
ssh: sudo apt-get install openssh-server sudo apt-get install openssh-client
- linux sort命令学习
linux sort命令以行为单位对文本文件进行排序. 接下来我们会以/tmp/sort_test.txt这个文本文件为例对sort命令的用法进行说明. sh-# cat /tmp/sort_test ...