如何在双向绑定的Image控件上绘制自定义标记(wpf)

原文:如何在双向绑定的Image控件上绘制自定义标记(wpf)

我们的需求是什么?

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

先上效果图:

设计思路

1.概述

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

2.详细实现

1.我们先绑定ImageTargetUpdated事件。

?


1

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

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

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

?


1

2

3

4

5

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绑定下载完成事件!

?


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

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.此文仅介绍遇到问题的解决思路及解决过程,并不分享源码。

原文地址:https://www.cnblogs.com/lonelyxmas/p/12348363.html

时间: 2024-10-07 11:06:39

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

easyui将查询参数绑定到分页控件

一 在进行条件查询(带分页)时,有时候会出现一种情况:根据查询条件查找得到第一页数据,当你点击下一页后,不会携带查询条件进行分页. 解决方案: 获取查询条件   var data=$('#search').serializeJson(); 将查询条件绑定到分页控件上 var queryParams = $('#datagrid_id').datagrid('options').queryParams;//获取查询参数,接下来就是设置进去 for (var temp in data) {     

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

首先来谈一下实现将自定义的类TreeMode绑定到TreeView控件上的一个基本的思路,由于每一个节点都要包含很多自定义的一些属性信息,因此我们需要将该类TreeMode进行封装,TreeView的每一个节点的类型都是TreeMode,我们还定义一些Children属性,Parent属性用于定义当前节点的子节点和父节点,当然还定义了一些常见的Name.ToolTip.ID.IsExpand.IsChecked(主要是在每一个节点前面添加了一个CheckBox)等属性,另外的一些属性就是具体需要

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

Grid 根据数据源某列数据不同绑定不同的控件,例如:文本框和下拉框 主要代码写在grid的  plugins: [rowEditing],下面这是定义的rowEditing对象,这里面的要定义成 Ext.grid.plugin.CellEditing而不是Ext.grid.plugin.RowEditing Ext.getCmp('pvn').setEditor(form组件);这是给grid的列绑定组件, pvn是在列中定义的id! 如下: var rowEditing = Ext.crea

WP8__实现ListBox横向滑动及子项绑定图片等控件

<!--实现绑定的图片等信息 ListBox水平滚动--> <Grid> <Grid.Resources> <Style x:Key="horizontalListBoxStyle" TargetType="ListBox"> <Setter Property="ItemsPanel"> <Setter.Value> <ItemsPanelTemplate> &l

WPF中一个控件绑定另一个控件的属性

原文:WPF中一个控件绑定另一个控件的属性 如同一个Grid中的一个按钮根据另一个按钮的显示与否作出不同的响应: 绑定的时候通过ElementName来指定控件 <Grid Margin="50,130"> <Grid.ColumnDefinitions> <ColumnDefinition/> <ColumnDefinition Width="40"/> </Grid.ColumnDefinitions>

FastReport脚本把数据绑定到文本控件上

public class ReportScript { private void Data25_BeforePrint(object sender, EventArgs e)//Data25是指需要绑定数据源的控件 { DataSourceBase data1 = Report.GetDataSource("VW_Rpt_CorpQualifition"); // 获取数据源 data1.Init(); // 初始化 string mainQualifition=string.Empt

Android控件上添加图片

项目中有一个点赞功能,点赞的小图标添加在点赞列表旁边,在xml里可以进行设置,也可以在代码中进行绘图. 下面是两种方法的设置: 1.xml里:一些控件:button.textView等等里面有个属性是android:drawableLeft 就可以将pic设置到text的左边.good.... 2.代码中: TextView txtlikedList = new TextView(this.getContext()); Drawable drawable= getResources().getD

VC控件自绘制三步曲

http://blog.csdn.net/lijie45655/article/details/6362441 实现自定义绘制的三步曲 既然您已经了解了绘制控件可用的各种选项(包括使用自定义绘制的好处),那么,让我们来看看实现一个自定义绘制控件需要的三个主要步骤. 执行一个 NM_CUSTOMDRAW 消息处理程序. 指定处理所需的绘制阶段. 筛选特定的绘制阶段(在这些阶段中,您需要加入自己的特定于控件的绘制代码). 执行一个NM_CUSTOMDRAW 消息处理程序 当需要绘制一个公共控件时,M

OpenCV获取摄像头视频并在MFC的Picture控件上显示

分为两步:OpenCV获取摄像头数据+图像在Picture上显示 第一步:OpenCV获取摄像头数据 参考:http://www.cnblogs.com/epirus/archive/2012/06/04/2535190.html http://blog.sina.com.cn/s/blog_6dbe9bdb0100nii7.html http://blog.csdn.net/augusdi/article/details/8762961 #include "stdafx.h" #in