MVVM模式下WPF动态绑定展示图片

MVVM模式下WPF动态展示图片,界面选择图标,复制到项目中固定目录下面,保存到数据库的是相对路径,再次读取的时候是根据数据库的相对路径去获取项目中绝对路径的图片展示。

首先在ViewModel中

//属性定义
    BitmapImage _ImageSource;
    /// <summary>
    /// 显示的图标
    /// </summary>
    public BitmapImage ImageSource
    {
      get { return _ImageSource; }
      set
      {
        _ImageSource = value;
        NotifyOfPropertyChange("ImageSource");
      }
    }

    string _ImagePath;
    /// <summary>
    /// 显示的图标路径
    /// </summary>
    public string ImagePath
    {
      get { return _ImagePath; }
      set
      {
        _ImagePath = value;
        NotifyOfPropertyChange("ImagePath");
      }
    }
//初始化数据
//编辑的时候绑定数据
public GroupInfoViewModel(sys_Right_Group groupInfo, OperType type)
    {
      if (type == OperType.Edit || type == OperType.Show)
      {
        IsAdd = false;
        TitleName = "编辑分组";
        RightGroup = groupInfo;
        ImagePath = groupInfo.ImagePath;
        GetImgData(groupInfo.ImagePath);
      }
    }
    /// <summary>
    /// 获取图片数据
    /// </summary>
    /// <param name="imgPath">相对路径</param>
    private void GetImgData(string imgPath)
    {
      if (string.IsNullOrEmpty(imgPath)) return;
      try
      {

        string fileName = System.Environment.CurrentDirectory + imgPath; //获取文件的绝对路径
        byte[] buf;
        if (!PathToByte(fileName, out buf))
        {
          MessageHelper.ShowAutoCloseWarning("获取图标失败");
          return;
        }
        ImageSource =ByteToImage(buf);
      }
      catch (Exception ex)
      {
        throw ex;
      }
    }
//界面选择图片按钮事件
   /// <summary>
    /// 修改图片
    /// </summary>
    public void ChangedIcon()
    {
      try
      {
        OpenFileDialog open = new OpenFileDialog();
        open.Filter = string.Format("照片|*.jpg;*.jpeg;*.png;*.gif;*.bmp");
        if (open.ShowDialog() == true)
        {
          var path = open.FileName;
          //检查图标目录,绝对路径下面
          string NewPath = System.Environment.CurrentDirectory + @"\Images\Tile\Group\";
          string newFile = NewPath + Path.GetFileName(path);
          if (!System.IO.Directory.Exists(NewPath))
          {
            System.IO.Directory.CreateDirectory(NewPath);
          }
          File.Copy(path, newFile, true); //复制文件到目录绝对路径文件夹
          FileInfo info = new FileInfo(newFile); //新文件
          if (info.Length > MenuViewModel.UserImageMaxLength)
          {
            MessageHelper.ShowAutoCloseWarning(string.Format("图标不能大于{0}M",
              MenuViewModel.UserImageMaxLength / 1024 / 1024));
            return;
          }
          byte[] buf;
          if (!PathToByte(path, out buf))
          {
            MessageHelper.ShowAutoCloseWarning("修改失败");
            return;
          }
          ImageSource = ByteToImage(buf);
          ImagePath = @"\Images\Tile\Group\" + Path.GetFileName(path); //显示相对路径

        }
      }
      catch (Exception ex)
      {

        throw ex;
      }
    }

点击保存的时候再把相对路径保存到数据库RightGroup.ImagePath = ImagePath;

//公共帮助方法

//把图片文件转换为byte数组
 public static bool PathToByte(string path, out byte[] buffer)
    {
      FileStream fs = new FileStream(path, FileMode.Open, FileAccess.Read);
      try
      {
        buffer = new byte[fs.Length];
        fs.Read(buffer, 0, (int)fs.Length);
        return true;
      }
      catch (Exception ex)
      {
        buffer = null;
        return false;
      }
      finally
      {
        if (fs != null)
        {
          //关闭资源
          fs.Close();
        }
      }

    }

//把byte数组转化为BitmapImage
    public static BitmapImage ByteToImage(byte[] buf)
    {
      BitmapImage bmp = new BitmapImage();
      bmp.BeginInit();
      bmp.StreamSource = new MemoryStream(buf);
      bmp.EndInit();

      return bmp;
    }

View 界面绑定代码:

<Button Grid.Row="0" Grid.Column="0" Content="选择图片" cm:Message.Attach="[Click]=[ChangedIcon()]" Style="{StaticResource BtnOperationStyle}" Height="20" Width="70"></Button>
          <Grid Grid.Row="0" Grid.Column="1" Background="LightGray">
            <Image Height="120" Width="150" Stretch="Fill" Source="{Binding ImageSource,Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"></Image>
    </Grid>
   <Label Grid.Row="1" Grid.Column="0" Style="{StaticResource GridColumnLabelStyle}" Content="路径:"></Label>
<TextBox Grid.Row="1" Grid.Column="1" Style="{StaticResource StyleForTextBox}" Text="{Binding ImagePath,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" Height="30" TextAlignment="Center" IsReadOnly="True"></TextBox>

界面效果:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • WPF/Silverlight实现图片局部放大的方法分析

    本文实例讲述了WPF/Silverlight实现图片局部放大的方法.分享给大家供大家参考,具体如下: 最近的项目中也要用到一个局部图片放大的功能,前面这篇<silverlight实现图片局部放大效果的方法>虽然已经给出了原理.知识要点.尺寸要点及后端主要代码,但遗憾的是没有给出xaml的代码.这里按照前文中的提示,动手用WPF实践了一下,花了一个小时,终于搞出来了.这篇文章也就算是一个补充吧. 界面如下图所示: 实现的原理和用到的知识点请点击上面的链接,杨大侠已经说的很清楚了.这里主要强调的就

  • WPF实现图片合成或加水印的方法【2种方法】

    本文实例讲述了WPF实现图片合成或加水印的方法.分享给大家供大家参考,具体如下: 最近项目中应用多次应用了图片合成,为了今后方便特此记下. 在WPF下有两种图片合成的方式,一种还是用原来C#提供的GDI+方式,命名空间是System.Drawing 和 System.Drawing.Imaging,另一种是WPF中新添加的API,命名空间是 System.Windows.Media 和 System.Windows.Media.Imaging . 我们来做一个简单的例子,分别用上面的两种方式实现

  • 深入分析WPF客户端读取高清图片卡以及缩略图的解决方法详解

    在Ftp上传上,有人上传了高清图片,每张图片大约2M.如果使用传统的BitmapImage类,然后绑定 Source 属性的方法,有些电脑在首次会比较卡,一张电脑10秒,4张大约会卡40秒. 所以我先异步的下载图片,得到downloadFileStream对象,然后绑定到BitmapImage类上.例如:System.Windows.Controls.Image photo = new Image{    Width = 100,    Height = 100,    Margin = new

  • MVVM模式下WPF动态绑定展示图片

    MVVM模式下WPF动态展示图片,界面选择图标,复制到项目中固定目录下面,保存到数据库的是相对路径,再次读取的时候是根据数据库的相对路径去获取项目中绝对路径的图片展示. 首先在ViewModel中 //属性定义 BitmapImage _ImageSource; /// <summary> /// 显示的图标 /// </summary> public BitmapImage ImageSource { get { return _ImageSource; } set { _Ima

  • 在python下读取并展示raw格式的图片实例

    raw文件可能有些人没有,因此,先用一张图片创建一个raw格式的文件(其实可以是其他类型的格式文件) import numpy as np import cv2 img = cv2.imread('cat.jpg') # 这里需要我们在当前目录下放一张名为cat.jpg的文件 img.tofile('cat.raw') #利用numpy中array的函数tofile将数据写入文件 #这时我们发现当前目录下新增了一个文件,名为cat.raw 有了raw文件,我们就可以读取这个文件,并显示出来. #

  • Linux学习之CentOS(二十二)--进入单用户模式下修改Root用户的密码

    在上一篇随笔里面详细讲解了Linux系统的启动过程.,我们知道Linux系统的启动级别一共有6种级别,通过 /etc/inittab 这个文件我们就能看到: [root@xiaoluo ~]# cat /etc/inittab # inittab is only used by upstart for the default runlevel. # # ADDING OTHER CONFIGURATION HERE WILL HAVE NO EFFECT ON YOUR SYSTEM. # #

  • MongoDB学习笔记(三) 在MVC模式下通过Jqgrid表格操作MongoDB数据

    看到下图,是通过Jqgrid实现表格数据的基本增删查改的操作.表格数据增删改是一般企业应用系统开发的常见功能,不过不同的是这个表格数据来源是非关系型的数据库MongoDB.nosql虽然概念新颖,但是MongoDB基本应用实现起来还是比较轻松的,甚至代码比基本的ADO.net访问关系数据源还要简洁.由于其本身的"非关系"的数据存储方式,使得对象关系映射这个环节对于MongoDB来讲显得毫无意义,因此我们也不会对MongoDB引入所谓的"ORM"框架. 下面我们将逐步

  • Android开发之使用GridView展示图片的方法

    本文实例讲述了Android使用GridView展示图片的方法.分享给大家供大家参考,具体如下: 今天说说GridView的使用. 所谓GvidView翻译过来就是网格布局:是一个ViewGroup以网格显示它的子视图(view)元素,即二维的.可滚动的网格.网格元素通过ListAdapter自动插入到网格. 这个GridView用处特别多,我这里是用来展示广告的.2*3的广告位置. 废话少说先看个效果图,有图就可以说个XX,对吧,大家都懂的. 大家可以看到搜索下面的那6个块,效果布局还行吧,哈

  • vue 动态绑定背景图片的方法

    vue动态绑定背景图片的方法,具体介绍如下所示: 1.backgroundImage && 三目运算符 <div class="right-con" :style="{backgroundImage: 'url(' + (coverImgUrl ? coverImgUrl : baseImg) + ')', backgroundSize:'contain'}"> </div> 1.backgroundImage <div

  • 详解如何实现Element树形控件Tree在懒加载模式下的动态更新

    Element提供的Tree树形控件,可以用清晰的层级结构展示信息,还可以展开或折叠.Tree支持两种加载模式:一次性加载全部树节点和懒加载模式.所谓懒加载模式,是指当需要展开父节点时才渲染子节点.懒加载模式的应用场景适合树节点数据量大的情形,在一定程度上可以优化图形用户界面的响应效率以及提升用户体验.但是,懒加载模式对数据动态刷新应用需求的支持不尽如意.树形控件节点一旦展开就缓存在本地,后续不会再继续更新和刷新节点数据.本文将介绍如何实现Element树形控件Tree在懒加载模式下的动态更新.

  • 批处理模式下运行 top 命令的方法

    top 命令 是每个人都在使用的用于 监控 Linux 系统性能 的最好的命令.你可能已经知道 top 命令的绝大部分操作,除了很少的几个操作,如果我没错的话,批处理模式就是其中之一. 大部分的脚本编写者和开发人员都知道这个,因为这个操作主要就是用来编写脚本. 如果你不了解这个,不用担心,我们将在这里介绍它. 什么是 top 命令的批处理模式 批处理模式允许你将 top 命令的输出发送至其他程序或者文件中. 在这个模式中,top 命令将不会接收输入并且持续运行,直到迭代次数达到你用 -n 选项指

  • vue中的mvvm模式讲解

    学习了MVVM模式 起先还觉得有点难,后面与双向数据绑定链接起来还是很容易理解的. 那么什么是MVVM呢? 不明思议咋们肯定和我想的一样   每个单词的首写字母呗! 对没错就是它 Model-View-ViewModel.  可以实现我们的双向数据绑定 下面我来用我的理解解析下它们之间的关系: 哈哈 有点小尴尬哈 先来说下View与Model之间有联系吗? 在MVVM架构下,View 和 Model 之间其实并没有直接的联系,而是通过ViewModel进行交互,Model 和 ViewModel

随机推荐