Adding an image in UWP?

Question

I have been looking online for hours trying to find a way to insert a simple image into my Universal Windows Application. All the tutorials I have found so far have been too confusing or just don't work.

Is there a way to insert an image into my XAML page that can be explained for someone new to developing Windows Apps? Do I need to initialize it in XAML and C#, or just through XAML?

Answer 1

Since I cannot comment yet, I'll answer this.

In order to add an image to your XAML you simply have to add a tag. So the code would look like this:

<Image Source="Assets/example.jpg"/>

I would suggest you follow this beginner series for UWP. I found it great for showing me the basics of XAML and teaching me a bit of the new design language. Just know that it's almost a year old and there are tiny tweaks, especially with design. Nothing to worry about though, just keep it in mind.

Answer 2

If you get confused about anything you can just download a sample and follow how it works (I get bored easily so I do that myself, and set up couple of break points to understand the code flow),

Try this: https://code.msdn.microsoft.com/windowsapps/0f5d56ae-5e57-48e1-9cd9-993115b027b9

Answer 3

Remember that when you want to insert a new image into Assets, you must go into the solution explorer, Assets->Add->New Item. If you insert the image manually, then you need to Add->existing item. Then select the image, rigth click, properties and in Build Action, make sure "content" is the default.

Answer 4

Andrew you are 100% correct, the online tutorial writers often forget people who are new to the xaml\\c# world might be reading their tutorials, often I find the official MS documentation much more easier to understand than those tutorials, anyways I've made a simple graphic explanation on how to add Images and display them in your project using Blend but the same principle applies to VS.

Check these images: http://postimg.org/gallery/2jzw7yqgg/

Answer 5

I had the same problem, where I only needed to just add simple picture get it over with, I'm assuming that you are using VS2017 if no, then I don't know if this solution will work, but if you are using VS2017 then do the following

fist add an image element for example <Image x:Name="img1" Width="100" Height="100" />

in the Universal Apps, there is a folder called Assets you will find it in the solution folder, also in the solution explorer, right click on it in the solution explorer -> add existing item -> the photo you want

after you have added the photo, go to the img1 prosperities and in the source you will find the photo that was added inside the drop down list, keep in mind that there is already images in the assets

you will find that the path for the image is added automatically in the Source attribute to the control img1 for example <Image x:Name="img1" Width="100" Height="100" Source="Assets/1.jpg" />