How to dynamically bind WPF to display pictures in MVVM mode

This article mainly shows you the "MVVM mode WPF how to dynamically bind to display pictures", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to dynamically bind WPF to display pictures in MVVM mode" this article.

In MVVM mode, WPF dynamically displays pictures, selects icons in the interface, copies them to a fixed directory in the project, saves the relative path to the database, and reads it again according to the relative path of the database to get the image display of the absolute path in the project.

First, in ViewModel

/ / attribute definition BitmapImage _ ImageSource; / the icon displayed / public BitmapImage ImageSource {get {return _ ImageSource;} set {_ ImageSource = value; NotifyOfPropertyChange ("ImageSource");}} string _ ImagePath Icon path / public string ImagePath {get {return _ ImagePath;} set {_ ImagePath = value; NotifyOfPropertyChange ("ImagePath") displayed }} / / initialize data / / bind data public GroupInfoViewModel (sys_Right_Group groupInfo, OperType type) {if (type = = OperType.Edit | | type = = OperType.Show) {IsAdd = false; TitleName = "Edit Group"; RightGroup = groupInfo; ImagePath = groupInfo.ImagePath; GetImgData (groupInfo.ImagePath) }} / get picture data / relative path private void GetImgData (string imgPath) {if (string.IsNullOrEmpty (imgPath)) return; try {string fileName = System.Environment.CurrentDirectory + imgPath; / / get the absolute path of the file byte [] buf If (! PathToByte (fileName, out buf)) {MessageHelper.ShowAutoCloseWarning ("failed to get icon"); return;} ImageSource = ByteToImage (buf);} catch (Exception ex) {throw ex }} / / Interface Select Picture Button event / public void ChangedIcon () {try {OpenFileDialog open = new OpenFileDialog (); open.Filter = string.Format ("Photo | * .jpg;*.jpeg;*.png;*.gif;*.bmp") If (open.ShowDialog () = = true) {var path = open.FileName; / / check icon directory, string NewPath = System.Environment.CurrentDirectory + @ "\ Images\ Tile\ Group\" under the absolute path; string newFile = NewPath + Path.GetFileName (path) If (! System.IO.Directory.Exists (NewPath)) {System.IO.Directory.CreateDirectory (NewPath);} File.Copy (path, newFile, true); / / copy files to the directory absolute path folder FileInfo info = new FileInfo (newFile) / / New file if (info.Length > MenuViewModel.UserImageMaxLength) {MessageHelper.ShowAutoCloseWarning (string.Format ("icon cannot be greater than {0} M", MenuViewModel.UserImageMaxLength / 1024 / 1024)); return;} byte [] buf If (! PathToByte (path, out buf)) {MessageHelper.ShowAutoCloseWarning ("modification failed"); return;} ImageSource = ByteToImage (buf); ImagePath = @ "\ Images\ Tile\ Group\" + Path.GetFileName (path); / / display relative path}} catch (Exception ex) {throw ex }}

When you click Save, save the relative path to the database RightGroup.ImagePath = ImagePath

/ / Public help methods / / convert picture files to byte array 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) {/ / close the resource fs.Close ();} / / convert the byte array to BitmapImage public static BitmapImage ByteToImage (byte [] buf) {BitmapImage bmp = new BitmapImage (); bmp.BeginInit (); bmp.StreamSource = new MemoryStream (buf) Bmp.EndInit (); return bmp;}

View interface binding code:

Interface effect:

The above is all the contents of the article "how to dynamically bind WPF to display pictures in MVVM mode". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!