Load Images in WPF application - c#

I am not familiar with WPF, and I just feel quite confusing.
I am trying to create a little computer game, and there are elements I want to display dynamically. I use Image class and add the images to a canvas. But I'm not sure whether it's a good practice. I feel that adding controls to canvas seem to be a little wired. And I'm a little concerned about the performance, because I may need many images.
The real problem is, I can't load the images from the image files. I see an example in a text book like this (XMAL):
<Image Panel.ZIndex="0" Margin="0,0,0,0" Name ="image1">
<Image.Source>
<BitmapImage UriSource="Bell.gif" />
</Image.Source>
</Image>
Where Bell.gif is added into the project.
And I tried to copy this in code to create an image.
new Image { Source = new BitmapImage(new Uri("Blockade.bmp"))}
But I got invalid Uri exception. After some search in the Internet, I found that loading resources dynamically seems to be difficult. Can I load the files added to the project dynamically?
If I use absolute path then it's OK. But I can't expect every computer will put the files in the same location. Can I use relative path?
I tried
new Image { Source = new BitmapImage(new Uri(#"Pictures\Blank Land.bmp", UriKind.Relative)) }
But it doesn't work. (The image is blank)
Thanks.
I deleted the code. I just found the solution in "Pack URIs in WPF" in MSDN.
I can either use "pack://application:,,,/Blockade.bmp" (absolute) or "/Blockade.bmp" (Relative) for a resource in the local assembly.
(I didn't use '/' at first)
"pack://application:,,,/ReferencedAssembly;component/File.xaml" is for referenced assembly. (I guess the problem with the answer is that the authority part is missing)

The following works:
new BitmapImage(new Uri("/MyProject;component/Resources/next.png", UriKind.Relative));
Just replace "MyProject" with the name of your project, and adjust the path to your image.
Make sure the image is added to the project with the "BuildAction" set to "Resource".

Related

BitmapImage Failing when trying to change image on a trigger c# UWP

I am trying to dynamically change the page I am on biased off of an event in a UWP application. When the even is triggered I check a simple if statement which passes and I try to set the old back ground image to a new one. I dumbed down my code to where I put the exact url (see image of file structure) in to where the image is located, but I still get an error. Bellow is the error:
Error: System.ArgumentException: 'Error 0x2624. Debugging resource strings are unavailable. See http://go.microsoft.com/fwlink/?linkid=106663&Version=4.0.30319.0&File=mscorrc.dll&Key=0x2624"
Here is The Affected Code:
c# -- MainPage.xmal.cs
BackGroundImage.Source = new BitmapImage(new Uri("/Assets/Images/Financial.png", UriKind.Relative));
XMAL --MainPage.xmal
<Image x:Name="BackGroundImage" Source="Assets/Images/Food.png" />
File Structure:
Whenever I trigger the even that changes the background I get the error and the program crashes. Does anyone have any idea why? This is my first time playing around with BitmapImages and Uri.
Well, please try to change the URL schemes.
Like the following:
BackGroundImage.Source= new BitmapImage(new Uri("ms-appx:///Assets/Images/Financial.png"));
For more details about URL schemes in UWP, please refer to this:URI schemes

Relative Resource Uri in WPF Forms

I'm looking for a method to make all my resource files work properly after I have written my project in a cd.
For example I have saved my images in Project Name\Project Name\obj\Debug\Images and I want them to be usable both in xaml and regular c# code, when I insert that cd in another machine.
Thanks for your time!
What worked for me was, using the Image class for both backgrounds and overlapping images.
In xaml the code is <Image x:Name="Image1" Source="..\obj\Debug\Images\image.jpg"/>
and you initialise it in c# using
public PageName()
{
InitializeComponent();
Image1.Source = new BitmapImage(new Uri(#"../Images/cafeteria.jpg", UriKind.Relative));
}
It's a shame because (atleast in my case) the ImageBrush Class didn't support relative uris for some reason..

Change Image at Runtime Based On RadioButton Selection

I need to change the background image at runtime, based on which RadioButton the user clicks. I'm doing this in a WPF project in Visual Studio, and I need to put the code in the Checked event in the xaml.cs file
I have an Image control called imgBackground, with 6 images in its Source collection, which are listed in an Images folder in the Solution Explorer.
I've tried:
this.imgBackground.Source = "filename.jpg";
both with and without the quotes, and with various paths (I've tried too many different variations to list them all here) and nothing works - everything I've tried just gives an error in the editor, before I even try to build and run anything (the error given varies depending on what I'm trying at the time).
If you are using relative paths as filenames like
this.imgBackground.Source = "filename.jpg";
then these files must be in the same directory as the .exe of your program is.
One workaround would be to use absolute paths like
this.imgBackground.Source = #"C:\MyFolder\MyProject\filename.jpg";
Or, even further use the packaging mechanism of WPF or pack your images as resources into your assembly. Look at this thread.
EDIT:
For your clarification:
The Source-property demands an System.Windows.Media.ImageSource-object, which you must provide.
Do it like this:
BitmapImage bi3 = new BitmapImage();
bi3.BeginInit();
bi3.UriSource = new Uri("filename.jpg", UriKind.Relative);
bi3.EndInit();
this.imgBackground.Source = bi3;
Please refer to this documentation here.

using resource dictionary as central collection of all images

i have a project with a lot of assemblies (> 100). many of those assemblies have subfolders like "images". many wpf-windows/user-controls for example have a "\images\close.png". that means that i have many "close.png" pictures instead of just a single one.
now i want to create a central place for all images/resources. what i did:
created a new class-libary/assembly called "a.b.c.d.e.Core.Resources"
added a resourcedictionary called "ImageDictionary.xaml"
created a subfolder "Images"
copied my images to this subfolder. for example "a.b.c.d.e.Core.Resources\images\close.png"
setting the built property of the image to "resource"
declared the image in the "ImageDictionary.xaml" like this "< ImageSource x:Key="Image_close">close.png< /ImageSource>"
using the dictionary in the wpf window where i want to use the "close.png" image like this
< Window.Resources>
< ResourceDictionary Source="pack://application:,,,/a.b.c.d.e.Core.Resources;component/Images/ImageDictionary.xaml"/>
< /Window.Resources >
trying to use the image declared in the central resource dictionary "ImageDictionary.xaml" like this < Button>< Image Source="{StaticResource Image_close}">< /Image>< /Button>
in the designer mode of VS the image is beeing displayed but when i start the project and open my wpf window i get an error like
"{"The File or Assembly \"a.b.c.d.e.Core.Resources, Culture=neutral\" or one of its dependencys can't be found. The system can't find the given file.":"a.b.c.d.c.e.Resources, Culture=neutral"} (i translated the error message from german to english :) )
Does anyone have any idea what i did wrong and why i can't get the central resourcedictionary getting to work properly? Thanks for any ideas!!!
Greetings from Germany
edit:
i also have a reference to "a.b.c.d.e.Core.Resources" in the assembly where my wpf window is
edit 2:
System.Windows.Markup.XamlParseException: Message=RowNumber "7" and RowPosition "10" of "Setting the Property "System.Windows.ResourceDictionary.Source" caused an exception".
Ok, the first idea I have is, that the file cannot be found because of the maximum path length limitation of the WinApi. I'm not sure about it, because I don't know anything about the internals of the resource loading mechanism.
Please try to start the program from a shorter path. Perhaps, it'll solve the problem.
EDIT
Just an idea, is your ImageDictionary.xaml declared as resource? If not, you should set its build step to "resource".
EDIT2
Next idea. Please empty the ImageDictionary.xaml by commenting out the elements. Uncomment the dictionary element by element. Perhaps, you'll find the reason for your problem, this way.

How to use gif animated image in WP 7

I have seen this post: Display GIF in a WP7 application with Silverlight
But in my case? for animating I am using a popup. So when application starts it shows a popup for 5 seconds. In this popup I want to show some .gif image, but it doesn't work.
Here is the code which I implement:
public partial class AnimatedSplashScreen : UserControl
{
protected Uri ImageSource
{
get;
set;
}
public AnimatedSplashScreen()
{
InitializeComponent();
ImageSource =
new Uri(
"http://upload.wikimedia.org/wikipedia/commons/thumb/3/36/Sunflower_as_GIF.gif/200px-Sunflower_as_GIF.gif",
UriKind.Absolute);
ImageTools.IO.Decoders.AddDecoder<GifDecoder>();
}
And xaml code is:
<UserControl.Resources>
<imagetools:ImageConverter x:Key="ImageConverter" />
</UserControl.Resources>
<Grid x:Name="LayoutRoot"
Width="480"
Height="800"
Background="White">
<imagetools:AnimatedImage Source="{Binding ImageSource, Converter={StaticResource ImageConverter}}" />
But in result it does't work, it shows an empty background.
Updated:
ImageTools.IO.Decoders.AddDecoder();
ImageSource = new Uri("http://a3.twimg.com/profile_images/1136683647/hisoka_normal.gif", UriKind.Absolute);
It still doesn't work
Finally working... Talk about events conspiring against you... You need to fix all these things first!
(note there is a following problem with only the first 2 frames being animated but that is for another question):
Part 6 (getting sleepy now)
Lastly relative image URLs starting with "/" are not supported by the ImageTools.Controls.ImageConverter, so you need to use a relative URL without the leading "/". I found that once every other problem was fixed I was getting an unsupported exception with the path.
ImageTools.IO.Decoders.AddDecoder<GifDecoder>();
InitializeComponent();
this.ImageSource = new Uri("layer1.gif", UriKind.Relative);
this.DataContext = this;
Part 5
You need to set the binding DataContext somewhere.
You do not connect the XAML page DataContext to the code behind object. I could not see where you had done this. A very simple/quick way is to set this.DataContext = this; in the page's constructor.
Part 4
You can only bind to public properties!
Your ImageSource property is currently protected. Change it to Public
public Uri ImageSource
{
get;
set;
}
Part 3
I also note your ImageSource property is not an INotifyPropertyChange type property. So setting it after InitializeComponent will not work.
Try it this way round (or change it to use a notify property):
public AnimatedSplashScreen()
{
ImageSource =
new Uri(
"/200px-Sunflower_as_GIF.gif",
UriKind.Relative);
ImageTools.IO.Decoders.AddDecoder<GifDecoder>();
InitializeComponent();
}
Part 2 (actually not support by ImageTools.Controls.ImageConverter)
The cross domain file was apparently only one problem. Based on the comments you also need to store your images on your own website and reference them with an appropriate URI format.
If you put your files in a folder called images under ClientBin you use this format:
"/images/imagename.jpg"
This is the best option as the images also use Browser caching!
For your example it would be like this:
ImageSource =
new Uri(
"/images/200px-Sunflower_as_GIF.gif",
UriKind.Relative);
ImageTools.IO.Decoders.AddDecoder<GifDecoder>();
and put the example file in your client bin folder under images.
If you do not use the leading "/" Silverlight assumes the files are resources in the current module instead e.g.
"images/imagename.jpg"
Part 1
This is actually a copyright issue, to stop people deep-linking files from other people's sites without permission.
The Wikimedia.org site does not have any cross domain access files e.g.:
http://upload.wikimedia.org/crossdomain.xml
http://upload.wikimedia.org/crossdomainpolicy.xml
wikimedia.org/crossdomain.xml
wikimedia.org/crossdomainpolicy.xml
... presumably as they do not want others to use the files they host there outside of their own website.
That means Silverlight will not allow access to files on those sites as it is a good Internet citizen. Try hosting the files on your own site (where your Silverlight app resides), then it will not need any cross domain access file at all.
Side note: If you do ever need a cross domain file on a website, for use by Silverlight, use a crossdomainpolicy.xml as the other one is not as useful (designed for older flash use)

Categories