Adding images to your application UI

Images are used to create a UI that looks good, with a background, icons, and thumbnails, and they convey more information to the user. In WPF, the Image element is used to display images. Let's take a look at this.

Getting ready

To get started with images in WPF, launch your Visual Studio IDE and create a WPF project called CH02.ImageDemo, and add an image called demoImage.jpg.

How to do it...

Let's follow these steps to add images in the MainWindow.xaml page:

1. Open the MainWindow.xaml page, and replace the existing Grid with a StackPanel. Set its Orientation property to Horizontal so that the items added to this panel stack themselves horizontally.
2. Add four images to the StackPanel, and set their Source property to demoImage.jpg, which is available within the project directory.

 

3. Set the width and the height of each image to 100.
4. For the first image, set its Stretch property to None.
5. For the second image, set its Stretch property to Fill.
6. For the third and fourth...