一起搭WPF框架之加载图片

前言

在项目中，设计了一个加载图片。通过按钮读取自己选定好的图片，并加载读取地址后，显示在前端界面上。今天来介绍一下具体的实现！

设计思路

我的设想是设置一个按钮，按钮的事件就是可以打开文件对话框，然后通过鼠标来选取对应需要加载的图片，后台获取图片数据的地址后，通过相对的控件将图像显示在前端界面中。这里涉及到几个方面：

• 界面设计：需要按钮、图像、文本框（用于地址的显示）；这里的控件可以根据自己需要来进行删减。
• 绑定设置：首先按钮事件的绑定，以及后续在获得图片地址后将图像加载至前端的控件内容绑定。

具体设计

按钮事件

private CommandBase _loadimageaddress_btn;

public CommandBase LoadImageAddress_Btn
{
    get
    {
        if (_loadimageaddress_btn == null)
        {
            _loadimageaddress_btn = new CommandBase();
            _loadimageaddress_btn.DoExecute = new Action<object>(obj =>
            {
               文件加载与图像处理过程。
            });
        }
        return _loadimageaddress_btn;
    }
}

我们在model中需要定义按钮事件，并将按钮事件与前端进行绑定，这里就是定义了CommandBase 与前端的Command需要进行对应。当按下按钮，执行绑定的事件。绑定的事件涉及到文件的打开，同时还需要绑定image的数据，image的数据也需要与前端的数据进行绑定。注意：image的定义与按钮事件处于同一个Model中，当事件发生时，可以直接将地址赋给image控件，同时，由于采用了动态绑定，前端ui接收到image的变动后，界面会同步进行更新。

<Button Grid.Column="1" Command="{Binding DataInput.LoadImageAddress_Btn}"  VerticalAlignment="Center" HorizontalAlignment="Center" Content="加载图片"/>

图片数据更新

ImageAddress = new BitmapImage(new Uri(string.Format(fileName), UriKind.RelativeOrAbsolute));

这里的ImageAddress就是我们在Model中与按钮事件同一层级定义的属性，可以直接在Model中进行调用赋值。具体的文件加载请使用OpenFileDialog！

注意

在ViewModel中需要将实例化Model，并将ViewModel在ui前端进行数据绑定，否则没有响应！

总结

以上就是今天要讲的内容，本文仅仅简单介绍了加载图片的简单使用，而加载图片其中还有很多细节，例如文件打开的使用、文本框显示数据的限制、图片加载的相对路径等，都是以后可以学习的地方！