As I had some feedback on how the images are accessed in my blog item on UniformGrids, I thought I would just very quickly explain what I did.
There are a whole host of approaches you can use to create, store and access resources in WPF. Many of them are very similar to what you would do with Windows Forms. Some are quite new. I will be writing in more detail about the new ways later, but for now I only want to cover the very basics; just enough to get you started.
The XAML code I use to display the images is:
Image Margin="2" Source="Images/Loch View.jpg" x:Name="Image1"
As you can see, the source is set as "Images/Loch View.jpg", this being the name of the folder in which that file is stored, followed by the filename. You'll probably have noticed that a forward slash is used instead of the usual backslash. This is because under the covers the path is changed to a URI. You can in fact use either a forward or backslash when using this particular addressing method, but to save confusion later (if and when you start to use more complex path configurations) it is recommended that you use the forward slash as default.
You can point to your image resources in various ways. The most basic is to add images individually to the Solution Explorer in the usual way. That is:
- Right click on the project name
- Select Add..
- Select Existing Item
- Navigate to the image file on your hard drive
- Select the one you want .
It will then be added to the list of files in Solution Explorer as you would expect. In the example below I have added a new jpg file in this way - Blue Hills.jpg.
If you check out the properties of this file in the Visual Studio you should see that its Build property is set to "Resource".
This resource is now available for your project. You would point to it by using:
Source="Blue Hills.jpg"
Resources which are assigned this Build action will automatically be deployed with the compiled application when you come to roll it out as a completed application. So on the face of it, it's the easiest approach. However your Solution Explorer will soon get crowded if you have many images, which is why I prefer to place groups of related images in folders within the Explorer.
You can simply click on the project name in Solution Explorer, select Add .. New Folder and create a folder to hold images. In the UniformGrid demo I created a folder named "Images". As with adding files to the main project, you simply right click on the name of this new folder and select files to be stored within it. You can then point to those files by using the folder name and file name combination as shown at the start of this item.
You can add multiple files at a time and - as with the first method - the default setting of the file's Build property will be "Resource" so it is available to the project immediately.
If you are in the habit of using the "Resources" Tab in VS 2005 and storing your images in there, you can still do this. The only thing to watch is that you will need to manually change the Build Setting from "None" (the default when you use this approach) to "Resource". Otherwise you will get a "Cannot find resource" error if you try and use it.
If you use this approach the Resources folder will be created for you in Solution Explorer, as well as an actual folder named Resources in the Project's sub folders on the hard drive.
The following screenshot shows that separate physical folders are created for the Images and Resources folder items that I added to the project.
As I mentioned at the start, there are several more sophisticated (and complicated) ways of adding and manipulating resources in WPF, but these basic approaches will get you started.