WPF Image控件的绑定
在我们平时的开发中会经常用到Image控件,通过设置Image控件的Source属性,我们可以加载图片,设置Image的source属性时可以使用相对路径也可以使用绝对路径,一般情况下建议使用绝对路径,类似于下面的形式Source="/Demo;Component/Images/Test.jpg"其中Demo表示工程的名称,后面表示具体哪个文件夹下面的哪个图片资源,在程序中,我们甚至可以为Image控件设置X:Name属性,在后台代码中动态去改变Image的Source,但我个人认为这种方式不太适合最大量的图片切换,而且增加了View层和代码之间的耦合性,不是和复合MVVM的核心设计思想,所以今天就总结一下Image的动态绑定的形式。
要绑定,肯定是绑定到Image控件的Source属性上面,我们首先要搞清楚Source的类型是什么,public ImageSource Source { get; set; }也就是ImageSource类型,当然在我们绑定的时候用的最多的就是BitmapImage这个位图图像啦,我们首先来看看BitmapImage的继承关系:BitmapImage:BitmapSource:ImageSource,最终也是一种ImageSource类型。当然在我们的Model层中我们也可以直接定义一个BitmapImage的属性,然后将这个属性直接绑定到Image的Source上面,当然这篇文章我们定义了一个ImgSource的String类型,所以必须要定义一个转换器Converter,这里分别贴出相应地代码。
首先是View层,比较简单:
<Grid Grid.Row="">
<Image Source="{Binding Path=LTEModel.ImgSource,Converter={StaticResource MyImageConverter}}" Stretch="Fill">
</Image>
</Grid>
然后我们再来看看Model层也很简单。
public class LTEModel : BaseModel
{
private string _imageSource = null;
public string ImgSource
{
get
{
return _imageSource;
}
set
{
if (value != _imageSource)
{
_imageSource = value;
FirePropertyChanged("ImgSource");
}
} }
}
然后就是重要的转换器:
public class StringToImageSourceConverter:IValueConverter
{
#region Converter public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
string path = (string)value;
if (!string.IsNullOrEmpty(path))
{
return new BitmapImage(new Uri(path, UriKind.Absolute));
}
else
{
return null;
} } public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
return null;
}
#endregion }
转换器返回的是Object类型,实际返回的是一个BitmapImage对象。所以我们在写程序绑定的时候一定要弄清绑定的目标和对象之间的关系,这个是非常重要的。
下面就是在ViewModel层中来添加绑定,并更新数据源,这里使用的是一个定时器来定时更新数据源:
public class LTEViewModel : NotifyObject
{
private DispatcherTimer myDispatcher = null;
private Random random = new Random();
public LTEViewModel()
{
GetImageSource();
InitTimer();
} private LTEModel _lteModel = null;
public LTEModel LTEModel
{
get
{
if (_lteModel == null)
{
_lteModel = new LTEModel();
}
return _lteModel; }
set
{
if (value != _lteModel)
{
_lteModel = value;
FirePropertyChanged("LTEModel"); } } } private BaseModel _baseModel = null;
public BaseModel BaseModelInstance
{
get
{
if (_baseModel == null)
{
_baseModel = new BaseModel()
{
Title = "分地区LTE分布",
Time = DateTime.Now.ToString()
};
}
return _baseModel; }
set
{
if (value != _baseModel)
{
_baseModel = value;
FirePropertyChanged("BaseModelInstance");
} } } private List<string> imgList = new List<string>();
private void GetImageSource()
{
//通过程序集来读取相应的资源的路径
string assemblyLocation = this.GetType().Assembly.Location;
string assLocation = assemblyLocation.Substring(, assemblyLocation.LastIndexOf("\\"));
string[] img_files = Directory.GetFiles(string.Format("{0}\\Images", assLocation), "*.JPG");
foreach (string img_path in img_files)
{
imgList.Add(img_path);
}
} private void InitTimer()
{
myDispatcher = new DispatcherTimer();
myDispatcher.Tick += new EventHandler(Timer_Tick);
myDispatcher.Interval = TimeSpan.FromMilliseconds();
myDispatcher.Start(); } private void Timer_Tick(object sender, EventArgs e)
{
int imageIndex = ;
if (imgList.Count > && LTEModel != null)
{
imageIndex = random.Next(, imgList.Count);
LTEModel.ImgSource = imgList[imageIndex];
} if (_baseModel != null)
{
_baseModel.Time = DateTime.Now.ToString();
} }
}
然后就是实例化一个ViewModel对象绑定到前台中,这个思路其实是相当明确的。
其实在我们的很多时候,我们并不知道我们需要绑定什么图片,或者说根据数据类型来绑定图片,这个在定义数据模板的时候经常使用到,下面就介绍一下,根据类型来绑定相应的图片。然后通过定义 public enum DeviceType { SheXiangJi, KaKou, DianZiJingCha, MingJin }这些类型,通过不同的类型来绑定到不同的图片,这个也是一个非常重要的应用,我们一定要注意使用的方法,这里只是简单介绍一下。
<ItemsControl ItemsSource="{Binding DeviceList,RelativeSource={RelativeSource TemplatedParent}}" Grid.Row="">
<ItemsControl.Template>
<ControlTemplate TargetType="ItemsControl">
<UniformGrid Columns="" Rows="" IsItemsHost="True"></UniformGrid>
</ControlTemplate>
</ItemsControl.Template>
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left" Margin="20 0 0 0" VerticalAlignment="Center" Sn apsToDevicePixels="True">
<Image x:Name="icon1" Width="" Height="" RenderOptions.BitmapScalingMode="NearestNeighbor" VerticalAli gnment="Center"></Image>
<TextBlock Margin="10 0 0 0" Foreground="#fff" ToolTip="{Binding Name}" FontSize="" Text="{Binding Name}" HorizontalAlignment="Left" VerticalAlignment="Center"></TextBlock>
</StackPanel>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding Type}" Value="SheXiangJi">
<Setter Property="Source" Value="/IGisControls.JTJ.UIControls;component/images/camera.png" TargetName=" icon1"></Setter>
</DataTrigger>
<DataTrigger Binding="{Binding Type}" Value="KaKou">
<Setter Property="Source" Value="/IGisControls.JTJ.UIControls;component/images/Bayonet.png" TargetName= "icon1"></Setter>
</DataTrigger>
<DataTrigger Binding="{Binding Type}" Value="DianZiJingCha">
<Setter Property="Source" Value="/IGisControls.JTJ.UIControls;component/images/epolice.png" TargetName= "icon1"></Setter>
</DataTrigger>
<DataTrigger Binding="{Binding Type}" Value="MingJin">
<Setter Property="Source" Value="/IGisControls.JTJ.UIControls;component/images/Police_A.png" TargetName ="icon1"></Setter>
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
另外和Image很类似的就是 <ImageBrush ImageSource="/IGisControls.JTJ.UIControls;component/images/screenBG.jpg" Stretch="Fill"></ImageBrush>
用法也差不多,同样可以通过绑定的方式来添加图片,不过在使用的时候还是需要注意一下的。
WPF Image控件的绑定的更多相关文章
- WPF MVVM从入门到精通6:RadioButton等一对多控件的绑定
原文:WPF MVVM从入门到精通6:RadioButton等一对多控件的绑定 WPF MVVM从入门到精通1:MVVM模式简介 WPF MVVM从入门到精通2:实现一个登录窗口 WPF MVVM ...
- WPF DevExpress Chart控件 界面绑定数据源,不通过C#代码进行绑定
<Grid x:Name="myGrid" Loaded="Grid_Loaded" DataContext="{Binding PartOne ...
- WPF常用控件应用demo
WPF常用控件应用demo 一.Demo 1.Demo截图如下: 2.demo实现过程 总体布局:因放大缩小窗体,控件很根据空间是否足够改变布局,故用WrapPanel布局. <ScrollVi ...
- WPF 分页控件 WPF 多线程 BackgroundWorker
WPF 分页控件 WPF 多线程 BackgroundWorker 大家好,好久没有发表一篇像样的博客了,最近的开发实在头疼,很多东西无从下口,需求没完没了,更要命的是公司的开发从来不走正规流程啊, ...
- 迟到的 WPF 学习 —— 控件
这一章书中内容比较多而杂,但每个对象的内容又相对简短,所以只挑选里边有代表性的内容做记录. 1. Label 控件:一个基础的简单的 ContentControl,Labe 支持快捷键文本的设置,可以 ...
- 两款不同应用场景的Wpf分页控件
简介 今天给大家分享两个Wpf分页控件,本篇博客主要介绍一些实现思路和使用方法,具体实现和应用代码请参考文末的Demo链接 废话不多说,先看一下效果~ (两款控件显示效果是一样的) 实现思路 一款控件 ...
- WPF DataGrid 控件的运用
WPF DataGrid 控件的运用 运行环境:Window7 64bit,.NetFramework4.61,C# 6.0: 编者:乌龙哈里 2017-02-23 参考: King Cobra 博客 ...
- WPF第三方控件盘点
WPF统一的编程模型.语言和框架,实现了界面设计人员和开发人员工作可以分离的境界,鉴于WPF强大的优势,且一直是开发者关注的地方,下面和大家分享基于WPF项目开发需要用到的第三方控件,包括业界最受好评 ...
- C# WPF DataGrid控件实现三级联动
利用DataGrid控件实现联动的功能,在数据库客户软件中是随处可见的,然而网上的资料却是少之又少,令人崩溃. 本篇博文将介绍利用DataGrid控件模板定义的三个ComboBox实现“省.市.区”的 ...
随机推荐
- python subprocess.Popen 控制台输出 实时监控百度网ping值
import subprocess file_out = subprocess.Popen('ping www.baidu.com', shell=True, stdout=subprocess.PI ...
- 【vue-waring】element UI 由版本1.4.12 升级到element-ui@2.0.10
遇到的问题:element UI 由版本1.4.12 升级到element-ui@2.0.10 cnpm run dev 运行后的waring 状态:解决(相关资料的方法对我没什么用) 解决 ...
- 1-tomcat简介
一.tomcate的目录结构说明: 1.bin:存放服务器启动和关闭的命令文件.2.conf:存放服务器的配置信息文件3.lib:存放服务器自身需要的所有jar文件,也称为全局jar文件(只要部署在当 ...
- Python(x,y) 的 FTP 下载地址
因为 Python(x,y) 软件包托管在 Google code 上 https://code.google.com/p/pythonxy/,所以国内比较难下载. 这里推荐一个 FTP 下载地址:f ...
- 如何使用Apollo标定激光雷达和IMU
https://github.com/ApolloAuto/apollo/blob/master/docs/quickstart/apollo_1_5_lidar_calibration_guide_ ...
- Git创建项目基本命令
前提:先在coding.net上创建项目Paper,并勾选“启用README.md文件”初始化项目. 1.给项目Paper创建版本库(仓库) cd Paper git init 2.把项目文件放到仓库 ...
- redis为什么这么火该怎么用
最近一些人在介绍方案时,经常会出现redis这个词,于是很多小伙伴百度完redis也就觉得它是一个缓存,然后项目里面把数据丢进去完事,甚至有例如将实体属性拆分塞进redis hash里面的奇怪用法等等 ...
- BZOJ4361 isn 树状数组、DP、容斥
传送门 不考虑成为非降序列后停止的限制,那么答案显然是\(\sum\limits_{i=1}^N cnt_i \times (N-i)!\),其中\(cnt_i\)表示长度为\(i\)的非降序列数量 ...
- 【C#复习总结】dynamic
介绍 C# 4 引入了一个新类型 dynamic. 该类型是一种静态类型,但类型为 dynamic 的对象会跳过静态类型检查. 大多数情况下,该对象就像具有类型 object 一样. 在编译时,将假定 ...
- 如何向微软 Docs 和本地化社区提交翻译贡献
Docs (docs.microsoft.com)是微软新版的文档网站,重新规划了各项技术栈的文档结构,看起来比 MSDN 可读性更好.虽然 Docs 提供了各种语言的版本,但大多是机器翻译,某些中文 ...