我们的需求是什么?

答:需要在图片上增加一些自定义标记,例如:2个图片对比时,对相同区域进行高亮。

先上效果图:

设计思路

1.概述

1.通过TargeUpdated事件,重新绘制图片进行替换。

2.详细实现

1.我们先绑定ImageTargetUpdated事件。

<Image x:Name="DestImageControl" Source="{Binding Path=Source.Url, NotifyOnTargetUpdated=True}" TargetUpdated="ImageTargetUpdated">

根据微软官方文档,如上图,我们需要设置NotifyOnRargetUpdated的值,官方文档如下:

2.在响应方法中,对图像进行绘制。

private void ImageTargetUpdated(object sender, DataTransferEventArgs e)
{
//todo:绘制图像:drawingImage = DrawImage......
//设置新图像:DestImageControl.SetCurrentValue(Image.SourceProperty, drawingImage);
}

3.按照上面的思路,很完美,于是我们遇到了问题

什么?有什么问题?在直接读取Image控件的Source时,我们发现它是没有值的,所以我们绘制的图片底图是没有的。

下面我们来分析一下:

由于Image控件的Source我们是绑定的Url(类似:http://xxx.xxx.com/xxx.jpg),所以wpf会进行一步下载,通过调试,我们会发现它此时的类是LateBoundBitmapDecoder。

关于类LateBoundBitmapDecoder的官方文档如下:

我们发现,这个类加载图片是异步的。所以我们在TargeUpdated事件中直接拿到的Source,此时仅仅是一个空对象,他的数据还在网络中传输。知道原理就好办了。

我们对Source绑定下载完成事件!

if (((BitmapFrame)imageControl.Source).IsDownloading)
{
//如果是异步下载,则绑定下载完成后事件
((BitmapFrame)imageControl.Source).Decoder.DownloadCompleted += (sender2, e2) =>
{
BitmapSource sourceImg = (BitmapSource)((LateBoundBitmapDecoder)sender2).Frames[0];
DrawImage(sourceImg);
};
}
else
{
//如果已存在图片,则直接使用
BitmapSource sourceImg = (BitmapSource)imageControl.Source;
DrawImage(sourceImg);
}

再试运行一下,就和最前面的效果图一致了。

总结

1.对于双向绑定的Image控件,我们在原图上增加内容时,可以响应TargeUpdated事件进行自定义绘制。

2.在TargeUpdated事件响应中,有可能拿不到Source,此时,我们需要绑定下载完成事件,在事件中进行底图的获取。

3.我们需要使用SetCurrentValue方法对Source进行赋值,如此不会影响双向绑定。

PS:

1.此文仅介绍遇到问题的解决思路及解决过程,并不分享源码。

如何在双向绑定的Image控件上绘制自定义标记(wpf)的更多相关文章

  1. c#在pictureBox控件上绘制多个矩形框及删除绘制的矩形框

    在pictureBox上每次只绘制一个矩形框,绘制下一个矩形框时上次绘制的矩形框取消,代码如链接:https://www.cnblogs.com/luxiao/p/5625196.html 在绘制矩形 ...

  2. 在GridControl控件上绑定图片的几种操作方式

    我们知道,基于DevExpress的开发Winform的项目界面的时候,GridControl控件是经常用来绑定数据的,一般以常规的字符内容为主,有时候也会有图片的显示需要,那么如果显示图片,我们应该 ...

  3. WPF 将数据源绑定到TreeView控件出现界面卡死的情况

    首先来谈一下实现将自定义的类TreeMode绑定到TreeView控件上的一个基本的思路,由于每一个节点都要包含很多自定义的一些属性信息,因此我们需要将该类TreeMode进行封装,TreeView的 ...

  4. vue指令:v-model绑定表单控件;v-model与v-bind结合使用

    一.v-model绑定表单控件 v-model 双向数据绑定:一般用于表单元素,会忽略表单元素的value.checked.selected的初始值,且将Vue实例的数据作为数据来源. 1. 单行文本 ...

  5. winform快速开发平台 -> 快速绑定ComboBox数据控件

    通常我们在处理编辑窗体时.往往会遇到数据绑定.例如combobox控件绑定数据字典可能是我们经常用到的.然而在我的winform快速开发平台中我是如何处理这个频繁的操作呢? 首先,我们要绑定combo ...

  6. EXTJS4.2 控件之Grid 根据数据源某列数据不同绑定不同的控件setEditor

    Grid 根据数据源某列数据不同绑定不同的控件,例如:文本框和下拉框 主要代码写在grid的  plugins: [rowEditing],下面这是定义的rowEditing对象,这里面的要定义成 E ...

  7. Winform开发中如何将数据库字段绑定到ComboBox控件

    最近开始自己动手写一个财务分析软件,由于自己也是刚学.Net不久,所以自己写的的时候遇到了很多问题,希望通过博客把一些印象深刻的问题记录下来. Winform开发中如何将数据库字段绑定到ComboBo ...

  8. Atitit  项目界面h5化静态html化计划---vue.js 把ajax获取到的数据 绑定到表格控件 v2 r33.docx

    Atitit  项目界面h5化静态html化计划---vue.js 把ajax获取到的数据 绑定到表格控件 v2 r33.docx 1. 场景:应用在项目列表查询场景下1 1.1. 预计初步掌握vue ...

  9. WPF 绑定StaticResource到控件的方法

    原文:WPF 绑定StaticResource到控件的方法 资源文件内的属性能否直接通过绑定应用到控件?答案是肯定的. 比如,我们要直接把下面的<SolidColorBrush x:Key=&q ...

随机推荐

  1. BZOJ 1345: [Baltic2007]序列问题Sequence

    1345: [Baltic2007]序列问题Sequence Time Limit: 5 Sec  Memory Limit: 162 MBSubmit: 1180  Solved: 633[Subm ...

  2. SQL SERVER 数据库中查看文本字段中的数据长度LEN() 函数的使用方法

    SQL LEN() 语法 SELECT LEN(column_name) FROM table_name Id LastName FirstName Address City 1 Adams John ...

  3. 安装、卸载 cocoapods

    卸载cocoapods: localhost:~ je$ sudo gem uninstall cocoapods Remove executables: pod, sandbox-pod in ad ...

  4. Json模块(dumps、loads、dump、load)函数篇

    # dumps.loads函数 """json.dumps()用于将dict类型的数据转成strjson.loads()用于将str类型的数据转成dict. " ...

  5. Java总结---继承(不断完善ing..)

    java三大特性:封装.继承.多态 继承 一.目的:实现代码的复用 二.简单例子(A继承了C): public class A extends C { //检测哪些可以在子类里使用 public vo ...

  6. vue-cli中使用jquery

    一.安装依赖 npm install jquery --save 二.全局导入(必须先安装依赖) 第一步 在webpack.base.conf.js里加入(新版的可能找不到这个文件,你可以npm in ...

  7. Celery的使用完成异步任务与定时任务

    0917自我总结 Celery的使用 一.官方文档 Celery 官网:http://www.celeryproject.org/ Celery 官方文档英文版:http://docs.celeryp ...

  8. webshell环境下信息收集备忘录

    重视信息收集.再次复习下基础且重要的命令,特别是wmic的使用 Whoami /all Ipconfig /all Route print tasklist /svc Query uer quser ...

  9. [Luogu3797] 妖梦斩木棒

    题目背景 妖梦是住在白玉楼的半人半灵,拥有使用剑术程度的能力. 题目描述 有一天,妖梦正在练习剑术.地面上摆放了一支非常长的木棒,妖梦把它们切成了等长的n段.现在这个木棒可以看做由三种小段构成,中间的 ...

  10. 还在重复写空指针检查代码?考虑使用 Optional 吧!

    一.前言 如果要给 Java 所有异常弄个榜单,我会选择将 NullPointerException 放在榜首.这个异常潜伏在代码中,就像个遥控炸弹,不知道什么时候这个按钮会被突然按下(传入 null ...