Setting WPF image source in code - c#

I'm trying to set a WPF image's source in code. The image is embedded as a resource in the project. By looking at examples I've come up with the below code. For some reason it doesn't work - the image does not show up.
By debugging I can see that the stream contains the image data. So what's wrong?
Assembly asm = Assembly.GetExecutingAssembly();
Stream iconStream = asm.GetManifestResourceStream("SomeImage.png");
PngBitmapDecoder iconDecoder = new PngBitmapDecoder(iconStream, BitmapCreateOptions.PreservePixelFormat, BitmapCacheOption.Default);
ImageSource iconSource = iconDecoder.Frames[0];
_icon.Source = iconSource;
The icon is defined something like this: <Image x:Name="_icon" Width="16" Height="16" />

After having the same problem as you and doing some reading, I discovered the solution - Pack URIs.
I did the following in code:
Image finalImage = new Image();
finalImage.Width = 80;
...
BitmapImage logo = new BitmapImage();
logo.BeginInit();
logo.UriSource = new Uri("pack://application:,,,/AssemblyName;component/Resources/logo.png");
logo.EndInit();
...
finalImage.Source = logo;
Or shorter, by using another BitmapImage constructor:
finalImage.Source = new BitmapImage(
new Uri("pack://application:,,,/AssemblyName;component/Resources/logo.png"));
The URI is broken out into parts:
Authority: application:///
Path: The name of a resource file that is compiled into a referenced assembly. The path must conform to the following format: AssemblyShortName[;Version][;PublicKey];component/Path
AssemblyShortName: the short name for the referenced assembly.
;Version [optional]: the version of the referenced assembly that contains the resource file. This is used when two or more referenced assemblies with the same short name are loaded.
;PublicKey [optional]: the public key that was used to sign the referenced assembly. This is used when two or more referenced assemblies with the same short name are loaded.
;component: specifies that the assembly being referred to is referenced from the local assembly.
/Path: the name of the resource file, including its path, relative to the root of the referenced assembly's project folder.
The three slashes after application: have to be replaced with commas:
Note: The authority component of a pack URI
is an embedded URI that points to a
package and must conform to RFC 2396.
Additionally, the "/" character must
be replaced with the "," character,
and reserved characters such as "%"
and "?" must be escaped. See the OPC
for details.
And of course, make sure you set the build action on your image to Resource.

var uriSource = new Uri(#"/WpfApplication1;component/Images/Untitled.png", UriKind.Relative);
foo.Source = new BitmapImage(uriSource);
This will load a image called "Untitled.png" in a folder called "Images" with its "Build Action" set to "Resource" in an assembly called "WpfApplication1".

This is a bit less code and can be done in a single line.
string packUri = "pack://application:,,,/AssemblyName;component/Images/icon.png";
_image.Source = new ImageSourceConverter().ConvertFromString(packUri) as ImageSource;

Very easy:
To set a menu item's image dynamically, only do the following:
MyMenuItem.ImageSource =
new BitmapImage(new Uri("Resource/icon.ico",UriKind.Relative));
...whereas "icon.ico" can be located everywhere (currently it's located in the 'Resources' directory) and must be linked as Resource...

Simplest way:
var uriSource = new Uri("image path here");
image1.Source = new BitmapImage(uriSource);

This is my way:
internal static class ResourceAccessor
{
public static Uri Get(string resourcePath)
{
var uri = string.Format(
"pack://application:,,,/{0};component/{1}"
, Assembly.GetExecutingAssembly().GetName().Name
, resourcePath
);
return new Uri(uri);
}
}
Usage:
new BitmapImage(ResourceAccessor.Get("Images/1.png"))

You can also reduce this to one line. This is the code I used to set the Icon for my main window. It assumes the .ico file is marked as Content and is being copied to the output directory.
this.Icon = new BitmapImage(new Uri("Icon.ico", UriKind.Relative));

Have you tried:
Assembly asm = Assembly.GetExecutingAssembly();
Stream iconStream = asm.GetManifestResourceStream("SomeImage.png");
BitmapImage bitmap = new BitmapImage();
bitmap.BeginInit();
bitmap.StreamSource = iconStream;
bitmap.EndInit();
_icon.Source = bitmap;

If your image is stored in a ResourceDictionary, you can do it with only one line of code:
MyImage.Source = MyImage.FindResource("MyImageKeyDictionary") as ImageSource;

Here is an example that sets the image path dynamically (image located somewhere on disc rather than build as resource):
if (File.Exists(imagePath))
{
// Create image element to set as icon on the menu element
Image icon = new Image();
BitmapImage bmImage = new BitmapImage();
bmImage.BeginInit();
bmImage.UriSource = new Uri(imagePath, UriKind.Absolute);
bmImage.EndInit();
icon.Source = bmImage;
icon.MaxWidth = 25;
item.Icon = icon;
}
Reflections on Icons...
First thought, you would think that the Icon property can only contain an image. But it can actually contain anything! I discovered this by accident when I programmatically tried to set the Image property directly to a string with the path to an image. The result was that it did not show the image, but the actual text of the path!
This leads to an alternative to not have to make an image for the icon, but use text with a symbol font instead to display a simple "icon". The following example uses the Wingdings font which contains a "floppydisk" symbol. This symbol is really the character <, which has special meaning in XAML, so we have to use the encoded version < instead. This works like a dream! The following shows a floppydisk symbol as an icon on the menu item:
<MenuItem Name="mnuFileSave" Header="Save" Command="ApplicationCommands.Save">
<MenuItem.Icon>
<Label VerticalAlignment="Center" HorizontalAlignment="Center" FontFamily="Wingdings"><</Label>
</MenuItem.Icon>
</MenuItem>

There's also a simpler way. If the image is loaded as a resource in the XAML, and the code in question is the code-behind for that XAML content:
Uri iconUri = new Uri("pack://application:,,,/ImageNAme.ico", UriKind.RelativeOrAbsolute);
NotifyIcon.Icon = BitmapFrame.Create(iconUri);

Put the frame in a VisualBrush:
VisualBrush brush = new VisualBrush { TileMode = TileMode.None };
brush.Visual = frame;
brush.AlignmentX = AlignmentX.Center;
brush.AlignmentY = AlignmentY.Center;
brush.Stretch = Stretch.Uniform;
Put the VisualBrush in GeometryDrawing
GeometryDrawing drawing = new GeometryDrawing();
drawing.Brush = brush;
// Brush this in 1, 1 ratio
RectangleGeometry rect = new RectangleGeometry { Rect = new Rect(0, 0, 1, 1) };
drawing.Geometry = rect;
Now put the GeometryDrawing in a DrawingImage:
new DrawingImage(drawing);
Place this on your source of the image, and voilĂ !
You could do it a lot easier though:
<Image>
<Image.Source>
<BitmapImage UriSource="/yourassembly;component/YourImage.PNG"></BitmapImage>
</Image.Source>
</Image>
And in code:
BitmapImage image = new BitmapImage { UriSource="/yourassembly;component/YourImage.PNG" };

There's also a simpler way. If the image is loaded as a resource in the XAML, and the code in question is the codebehind for that XAML:
Here's the resource dictionary for a XAML file - the only line you care about is the ImageBrush with the key "PosterBrush" - the rest of the code is just to show context
<UserControl.Resources>
<ResourceDictionary>
<ImageBrush x:Key="PosterBrush" ImageSource="..\Resources\Images\EmptyPoster.jpg" Stretch="UniformToFill"/>
</ResourceDictionary>
</UserControl.Resources>
Now, in the code behind, you can just do this
ImageBrush posterBrush = (ImageBrush)Resources["PosterBrush"];

How to load an image from embedded in resource icons and images (corrected version of Arcturus):
Suppose you want to add a button with an image. What should you do?
Add to project folder icons and put image ClickMe.png here
In properties of 'ClickMe.png', set 'BuildAction' to 'Resource'
Suppose your compiled assembly name is 'Company.ProductAssembly.dll'.
Now it's time to load our image in XAML
<Button Width="200" Height="70">
<Button.Content>
<StackPanel>
<Image Width="20" Height="20">
<Image.Source>
<BitmapImage UriSource="/Company.ProductAssembly;component/Icons/ClickMe.png"></BitmapImage>
</Image.Source>
</Image>
<TextBlock HorizontalAlignment="Center">Click me!</TextBlock>
</StackPanel>
</Button.Content>
</Button>
Done.

I am a new to WPF, but not in .NET.
I have spent five hours trying to add a PNG file to a "WPF Custom Control Library Project" in .NET 3.5 (Visual Studio 2010) and setting it as a background of an image-inherited control.
Nothing relative with URIs worked. I can not imagine why there is no method to get a URI from a resource file, through IntelliSense, maybe as:
Properties.Resources.ResourceManager.GetURI("my_image");
I've tried a lot of URIs and played with ResourceManager, and Assembly's GetManifest methods, but all there were exceptions or NULL values.
Here I pot the code that worked for me:
// Convert the image in resources to a Stream
Stream ms = new MemoryStream()
Properties.Resources.MyImage.Save(ms, ImageFormat.Png);
// Create a BitmapImage with the stream.
BitmapImage bitmap = new BitmapImage();
bitmap.BeginInit();
bitmap.StreamSource = ms;
bitmap.EndInit();
// Set as source
Source = bitmap;

You just missed a little bit.
To get an embedded resource from any assembly, you have to mention the assembly name with your file name as I have mentioned here:
Assembly asm = Assembly.GetExecutingAssembly();
Stream iconStream = asm.GetManifestResourceStream(asm.GetName().Name + "." + "Desert.jpg");
BitmapImage bitmap = new BitmapImage();
bitmap.BeginInit();
bitmap.StreamSource = iconStream;
bitmap.EndInit();
image1.Source = bitmap;

If you already have a stream and know the format, you can use something like this:
static ImageSource PngStreamToImageSource (Stream pngStream) {
var decoder = new PngBitmapDecoder(pngStream,
BitmapCreateOptions.PreservePixelFormat, BitmapCacheOption.Default);
return decoder.Frames[0];
}

Here is if you want to locate it next to your executable (relative from the executable)
img.Source = new BitmapImage(new Uri(AppDomain.CurrentDomain.BaseDirectory + #"\Images\image.jpg", UriKind.Absolute));

Force chose UriKind will be correct:
Image.Source = new BitmapImage(new Uri("Resources/processed.png", UriKind.Relative));
UriKind options:
UriKind.Relative // relative path
UriKind.Absolute // exactly path

Related

How to set source for Image Control where the image resides in application folder

I am using an image control. i am setting the source for Image control like below.
But the error shows invalid URI.
string strUri = String.Format(#"..\..\Assets\Images\Image001.jpeg");
previewImage.Source = BitmapFromUri(new Uri(strUri));
public static ImageSource BitmapFromUri(Uri source)
{
var bitmap = new BitmapImage();
bitmap.BeginInit();
bitmap.UriSource = source;
bitmap.CacheOption = BitmapCacheOption.OnLoad;
bitmap.EndInit();
return bitmap;
}
You'll have to specify that it is a relative URI by setting UriKind.Relative:
var uri = new Uri(#"..\..\Assets\Images\Image001.jpeg", UriKind.Relative);
That said, your BitmapFromUri method might be redundant (unless you have a reason to set BitmapCacheOption.OnLoad). You may probably as well use the BitmapImage constructor that takes an Uri parameter:
previewImage.Source = new BitmapImage(uri);
Please note also that the above assumes that image file is actually copied to the specified relative path. If it is part of your Visual Studio project, it might perhaps better be loaded as embedded resource via a WPF Pack URI. You would therefore have to set its Build Action to Resource.

How to set the image of an Image control at run time?

I am struggling to get a path and add it to an Image control.
Here is my code:
var uriSource1 = new Uri(#"/Earnest_Individuals:,,,;component/Images/Section5bb1.png", UriKind.Relative);
image2.Source = new BitmapImage(uriSource1);
Nothing is displayed in the image. I think something is wrong with the image path.
Assuming that Earnest_Individuals is the name of the assembly with Images/Section5bb1.png you can try
var uriSource1 = new Uri(#"pack://application:,,,/Earnest_Individuals;component/Images/Section5bb1.png");
Pack URIs in WPF
In code behind you have to explicitly write this as a Resource File Pack URI (provided that Earnest_Individuals is the name of a referenced assembly and that Section5bb1.png is a resource):
var uriSource1 = new Uri(
"pack://application:,,,/Earnest_Individuals;component/Images/Section5bb1.png");
image2.Source = new BitmapImage(uriSource1);

I can't Initialize WriteableBitmap with BitmapImage

BitmapImage img = new BitmapImage(new Uri("somepath",UriKind.Relative));
WriteableBitmap wbm = new WriteableBitmap(img);
I get a Runtime error at the line above: "Object reference not set to an instance of an object."
The reason you get the null reference exception is that BitmapImage.CreateOptions Property default value is BitmapCreateOptions.DelayCreation. You can set it to BitmapCreateOptions.None and create WriteableBitmap after image loaded:
BitmapImage img = new BitmapImage(new Uri("somepath",UriKind.Relative));
img.CreateOptions = BitmapCreateOptions.None;
img.ImageOpened += (s, e) =>
{
WriteableBitmap wbm = new WriteableBitmap((BitmapImage)s);
};
If the build action of your image file is set to resource, then the following code will work.
Uri uri = new Uri("/ProjectName;component/Images/image.jpg", UriKind.Relative);
StreamResourceInfo resourceInfo = Application.GetResourceStream(uri);
BitmapImage img = new BitmapImage();
img.SetSource(resourceInfo.Stream);
WriteableBitmap wbm = new WriteableBitmap(img);
Notice that the resource is accessed by the static method GetResourceStream defined by the application class.
Now if you change the build action of the file to Content rather than Resource, you can simplify the Uri sintax considerably.
Uri uri = new Uri("Images/image.jpg", UriKind.Relative);
The difference, in case you are wondering...
If you navigate to the Bin/Debug directory of a Visual Studio project and find the XAP file that contains your program, rename it to a ZIP extension. And look inside.
In both cases the bitmap is obviusly stored somewhere within the XAP file.
With a Build Action of Resource for the file, it is stored inside the DLL file along with the compiled program.
With a Build Action of Content, the file is stored external to the dll file but within the XAP file, and when you rename the XAP file to a ZIP file, you can see the it.

Change image source in code behind - Wpf

I need to set image source dynamically, please note my image is in somewhere on the Network, here is my code
BitmapImage logo = new BitmapImage();
logo.BeginInit();
logo.UriSource = new Uri(#"pack://application:,,,\\myserver\\folder1\\Customer Data\\sample.png");
logo.EndInit(); // Getting the exception here
ImageViewer1.Source = logo;
Exception:
The URI prefix is not recognized
None of the above solutions worked for me. But this did:
myImage.Source = new BitmapImage(new Uri(#"/Images/foo.png", UriKind.Relative));
You just need one line:
ImageViewer1.Source = new BitmapImage(new Uri(#"\myserver\folder1\Customer Data\sample.png"));
The pack syntax you are using here is for an image that is contained as a Resource within your application, not for a loose file in the file system.
You simply want to pass the actual path to the UriSource:
logo.UriSource = new Uri(#"\\myserver\folder1\Customer Data\sample.png");
None of the methods worked for me as i needed to pull the image from a folder instead of adding it to the application.
The below code worked:
TestImage.Source = GetImage("/Content/Images/test.png")
private static BitmapImage GetImage(string imageUri)
{
var bitmapImage = new BitmapImage();
bitmapImage.BeginInit();
bitmapImage.UriSource = new Uri("pack://siteoforigin:,,,/" + imageUri, UriKind.RelativeOrAbsolute);
bitmapImage.EndInit();
return bitmapImage;
}
You are all wrong!
Why? Because all you need is this code to work:
(image View) / C# Img is : your Image box
Keep this as is, without change ("ms-appx:///) this is code not your app name
Images is your folder in your project you can change it.
dog.png is your file in your folder, as well as i do my folder 'Images' and file 'dog.png'
So the uri is :"ms-appx:///Images/dog.png"
and my code :
private void Button_Click(object sender, RoutedEventArgs e)
{
img.Source = new BitmapImage(new Uri("ms-appx:///Images/dog.png"));
}

Load image from resources area of project in C#

I have an image in my project stored at Resources/myimage.jpg. How can I dynamically load this image into Bitmap object?
Are you using Windows Forms? If you've added the image using the Properties/Resources UI, you get access to the image from generated code, so you can simply do this:
var bmp = new Bitmap(WindowsFormsApplication1.Properties.Resources.myimage);
You can get a reference to the image the following way:
Image myImage = Resources.myImage;
If you want to make a copy of the image, you'll need to do the following:
Bitmap bmp = new Bitmap(Resources.myImage);
Don't forget to dispose of bmp when you're done with it. If you don't know the name of the resource image at compile-time, you can use a resource manager:
ResourceManager rm = Resources.ResourceManager;
Bitmap myImage = (Bitmap)rm.GetObject("myImage");
The benefit of the ResourceManager is that you can use it where Resources.myImage would normally be out of scope, or where you want to dynamically access resources. Additionally, this works for sounds, config files, etc.
You need to load it from resource stream.
Bitmap bmp = new Bitmap(
System.Reflection.Assembly.GetEntryAssembly().
GetManifestResourceStream("MyProject.Resources.myimage.png"));
If you want to know all resource names in your assembly, go with:
string[] all = System.Reflection.Assembly.GetEntryAssembly().
GetManifestResourceNames();
foreach (string one in all) {
MessageBox.Show(one);
}
Way easier than most all of the proposed answers
tslMode.Image = global::ProjectName.Properties.Resources.ImageName;
The best thing is to add them as Image Resources in the Resources settings in the Project. Then you can get the image directly by doing Resources.myimage. This will get the image via a generated C# property.
If you just set the image as Embedded Resource you can get it with:
string name = "Resources.myimage.jpg"
string namespaceName = "MyCompany.MyNamespace";
string resource = namespaceName + "." + name;
Type type = typeof(MyCompany.MyNamespace.MyTypeFromSameAssemblyAsResource);
Bitmap image = new Bitmap(type.Assembly.GetManifestResourceStream(resource));
Where MyTypeFromSameAssemblyAsResource is any type that you have in your assembly.
Code I use in several of my projects...
It assumes that you store images in resource only as bitmaps not icons
public static Bitmap GetImageByName(string imageName)
{
System.Reflection.Assembly asm = System.Reflection.Assembly.GetExecutingAssembly();
string resourceName = asm.GetName().Name + ".Properties.Resources";
var rm = new System.Resources.ResourceManager(resourceName, asm);
return (Bitmap)rm.GetObject(imageName);
}
Use below one. I have tested this with Windows form's Grid view cell.
Object rm = Properties.Resources.ResourceManager.GetObject("Resource_Image");
Bitmap myImage = (Bitmap)rm;
Image image = myImage;
Name of "Resource_Image", you can find from the project.
Under the project's name, you can find Properties. Expand it. There you can see Resources.resx file. Open it. Apply your file name as "Resource_Image".
JDS's answer worked best. C# example loading image:
Include the image as Resource (Project tree->Resources, right click to add the desirable file ImageName.png)
Embedded Resource (Project tree->Resources->ImageName.png, right click select properties)
.png file format (.bmp .jpg should also be OK)
pictureBox1.Image = ProjectName.Properties.Resources.ImageName;
Note the followings:
The resource image file is "ImageName.png", file extension should be omitted.
ProjectName may perhaps be more adequately understood as "Assembly name", which is to be the respective text entry on the Project->Properties page.
The example code line is run successfully using VisualStudio 2015 Community.
I suggest:
System.Reflection.Assembly thisExe;
thisExe = System.Reflection.Assembly.GetExecutingAssembly();
System.IO.Stream file =
thisExe.GetManifestResourceStream("AssemblyName.ImageFile.jpg");
Image yourImage = Image.FromStream(file);
From msdn:
http://msdn.microsoft.com/en-us/library/aa287676(v=vs.71).aspx
Using Image.FromStream is better because you don't need to know the format of the image (bmp, png, ...).
With and ImageBox named "ImagePreview
FormStrings.MyImageNames contains a regular get/set string cast method, which are linked to a scrollbox type list.
The images have the same names as the linked names on the list, except for the .bmp endings.
All bitmaps are dragged into the resources.resx
Object rm = Properties.Resources.ResourceManager.GetObject(FormStrings.MyImageNames);
Bitmap myImage = (Bitmap)rm;
ImagePreview.Image = myImage;
In my case -- I was using Icons in my resource, but I needed to add them dynamically as Images to some ToolStripMenuItem(s). So in the method that I created (which is where the code snippet below comes from), I had to convert the icon resources to bitmaps before I could return them for addition to my MenuItem.
string imageName = myImageNameStr;
imageName = imageName.Replace(" ", "_");
Icon myIcon = (Icon)Resources.ResourceManager.GetObject(imageName);
return myIcon.ToBitmap();
Something else to be aware of, if your image/icon has spaces (" ") in its name when you add them to your resource, VS will automatically replace those spaces with "_"(s). Because, spaces are not a valid character when naming your resource. Which is why I'm using the Replace() method in my referenced code. You can likely just ignore that line.
You can also save the bmp in a var like this:
var bmp = Resources.ImageName;
hope it helps!
Strangely enough, from poking in the designer I find what seems to be a much simpler approach:
The image seems to be available from .Properties.Resources.
I'm simply using an image as all I'm interested in is pasting it into a control with an image on it.
(Net 4.0, VS2010.)
I looked at the designer code from one of my projects and noticed it used this notation
myButton.Image = global::MyProjectName.Properties.Resources.max;
where max is the name of the resource I uploaded into the project.
Or you could use this line when dealing with WPF or Silverlight, especially where you have the source string already in the XAML markup:
(ImageSource)new ImageSourceConverter().ConvertFromString(ImagePath);
Where the ImagePath is something like:
string ImagePath = "/ProjectName;component/Resource/ImageName.png";
This is how I manage to create an ImageList from a Resource (.rc) file of a windows forms application:
ImageList imgList = new ImageList();
var resourceSet = DataBaseIcons.ResourceManager.GetResourceSet(CultureInfo.CreateSpecificCulture("en-EN"), true, true);
foreach (var r in resourceSet)
{
Logger.LogDebug($"Resource Type {((DictionaryEntry)r).Key.ToString()} is of {((DictionaryEntry)r).Value.GetType()}");
if (((DictionaryEntry)r).Value is Bitmap)
{
imgList.Images.Add(((Bitmap)(((DictionaryEntry)r).Value)));
}
else
{
Logger.LogWarning($"Resource Type {((DictionaryEntry)r).Key.ToString()} is of type {((DictionaryEntry)r).Value.GetType()}");
}
}
this.toolStrip1 = new System.Windows.Forms.ToolStrip();
this.toolStrip1.Location = new System.Drawing.Point(0, 0);
this.toolStrip1.Name = "toolStrip1";
this.toolStrip1.Size = new System.Drawing.Size(444, 25);
this.toolStrip1.TabIndex = 0;
this.toolStrip1.Text = "toolStrip1";
object O = global::WindowsFormsApplication1.Properties.Resources.ResourceManager.GetObject("best_robust_ghost");
ToolStripButton btn = new ToolStripButton("m1");
btn.DisplayStyle = ToolStripItemDisplayStyle.Image;
btn.Image = (Image)O;
this.toolStrip1.Items.Add(btn);

Categories