If you search Google for Dynamics NAV item pictures you will find that there are a few examples out there for easily associating a picture with an item. However, there is not much on displaying multiple images for an item. This is a challenge I had to solve for my employer. Many items had anywhere from a single image to 10+ images.
I decided to come up with a .Net add-in control that was able to display multiple images for any given item and on any page (e.g. the item list, item card and beyond). I have decided to create a tutorial to show you how to create such a control. This will be quite lengthy, so I will split it up into smaller parts for you to digest more easily. The tutorial will be split into the following 7 part series:
- Part 1 – Introduction (this post)
- Part 2 – Creating the .Net image control model
- Part 3 – Creating the .Net image control viewmodel
- Part 4 – Creating the .Net image control view
- Part 5 – Creating the .Net add-in control wrapper class
- Part 6 – Creating the Dynamics NAV Item Images factbox page
- Part 7 – Hooking up the item Images factbox page
Part 1 – Introduction
As I stated earlier, I needed the ability to display anywhere from a single image to 10+ images for a given item. I was asked to make the control available on the item card, item list, a custom ordering page and on another add-in control that we call the Item Lookup (originally called the Advanced Item Search… perhaps a blog post about this cool add-in control in the future).
So why did I choose WPF over Windows Forms? I had a few reasons:
- WPF was a newer technology that had been out for nearly a decade and is the successor to Windows Forms.
- I needed the ability to support multiple views of the same control, but re-use the business logic (see MVVM pattern).
- WPF allows some nice extras (e.g. fairly easy animation via storyboards. My colleague, Scott Boettger, took the control and added some nice animation, but we ended up not using it. I may end up including that in the tutorial as a bonus at the end though, because it was very cool!).
What I ended up designing is a WPF user-control that can request a collection of images and then display them. The source of the image collection can be configured to use different types of sources. For example, a table can contain a list of file locations, which can be used to create an image collection and sent to the control. Or images can be streamed over the internet from a server. For testing purposes, hard-coded image resources can be sent to the add-in control from directly inside the .Net project.
The collection of images is displayed as a pageable list of thumbnails along the bottom of the control, along with a main image at the top of the control. Clicking on a thumbnail sets that image as the main image (the animated version had images which would rotate around the main image; quite cool, but it was a little too flashy and didn’t allow previewing as many thumbnails). The control also supports a default image if the current item has no images.
Here is a quick look at what we will be creating in this tutorial.
In this screenshot the add-in control is on a page in a factbox subpage. There is a main image (defaults to the first thumbnail image), three thumbnails and buttons to scroll between pages of images. In this case, you can see there is at least one more image on the next page of thumbnails, because the right arrow is enabled.
If you click on the second thumbnail image, you switch the main image to the selected image:
And finally, if you click on the page-right button you can see there is another image available. Clicking on that thumbnail will display that image in the main image area.
Well that’s it for the quick introduction to the multi-image add-in control. Up next: Part 2 – Creating the .Net image control model.