c# - How to implement next-previous buttons for images? -

i tried implement simple next-previous image preview 2 buttons code below works 3 images. how make more dynamic number of images? appreciate help.

private void left_arrow_btn_click(object sender, routedeventargs e) {     if (x == custom_studio_images.count - 2)     {         x = custom_studio_images.count;         //system.windows.messagebox.show(x.tostring());         customstudio.children.removeat(largepic.children.count);         customstudio.children.add(custom_studio_images.elementat(x - 1));      }      else     {         customstudio.children.removeat(largepic.children.count);         customstudio.children.add(custom_studio_images.elementat(x - 2));         //system.windows.messagebox.show(x.tostring());          x--;     } }  private void right_arrow_btn_click(object sender, routedeventargs e)  {     if (customstudio.children.count > 0)     {         customstudio.children.removeat(largepic.children.count); //clear first item in stackpanel     }       if (x == custom_studio_images.count )     {         x = 0;         customstudio.children.add(custom_studio_images.elementat(x));         x++;     }       else     {         customstudio.children.add(custom_studio_images.elementat(x)); //show picture next available studio in set         x++;      }  } 

you should implement mvvm solution view model exposes list of images, current image, , 2 commands navigate previous , next image:

public class viewmodel : inotifypropertychanged {     public viewmodel()     {         previousimagecommand = new relaycommand(previousimage);         nextimagecommand = new relaycommand(nextimage);     }      public event propertychangedeventhandler propertychanged;      public icommand previousimagecommand { get; set; }     public icommand nextimagecommand { get; set; }     public list<imagesource> images { get; set; }      public imagesource currentimage     {                 {             if (currentimageindex < images.count)             {                 return images[currentimageindex];             }              return null;         }     }      private int currentimageindex;      private void previousimage(object o)     {         if (images.count > 0)         {             // add image.count avoid negative index             currentimageindex = (currentimageindex + images.count - 1) % images.count;             onpropertychanged("currentimage");         }     }      private void nextimage(object o)     {         if (images.count > 0)         {             currentimageindex = (currentimageindex + 1) % images.count;             onpropertychanged("currentimage");         }     }      private void onpropertychanged(string propertyname)     {         var handler = propertychanged;         if (handler != null)         {             handler(this, new propertychangedeventargs(propertyname));         }     } } 

you bind properties of view model in xaml this:

<image source="{binding currentimage}"/> ... <button content="prev" command="{binding previousimagecommand}"/> <button content="next" command="{binding nextimagecommand}"/>