All, I have the following start to a small application that checks .resx files for consistency of embedded brackets (so that runtime errors of non-matching "... {0}" strings don't happen). I have the following XAML for the MainWindow.xaml, and my particular problem relates to the image that is to be displayed on the button
<Window x:Class="ResxChecker.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="174.383" Width="495.869">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="350*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="30*"/>
</Grid.RowDefinitions>
<Label Content="Select .resx file:" HorizontalAlignment="Left" Margin="10,0,0,0" VerticalAlignment="Top" Height="24" Width="Auto" Grid.ColumnSpan="1"/>
<TextBox Grid.ColumnSpan="2" HorizontalAlignment="Stretch" Margin="10,0,0,0" Grid.Row="1" TextWrapping="Wrap" Text="" VerticalAlignment="Top"/>
<Button Grid.Column="2" HorizontalAlignment="Right" Margin="5,0,10,0" Grid.Row="1">
<Image VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Height="16 " Width="16" Source="pack://siteoforigin:,,,/Resources/UserCost2013Open16.png"/>
</Button>
</Grid>
</Window>
The image has 'Build Action = Resource', 'Copy to output directory = Do not copy' - the image shows in the designer but not at runtime. I have seen the following questions and read the relevant answers, but none resolve the problem:
WPF control images not displayed when consumed by an application
image problem in wpf (image does not show up)
Background Image of Button not showing in WPF
How do I get the button image to appear at runtime?
Change the build action to 'Resource'.
Also your pack url is wrong. Either use:
Source="pack://application:,,,/Resource/UserCost2013Open16.png"
or simply
Source="/Resource/UserCost2013Open16.png"
There are 2 Solutions:
1: Change the settings of the image:
Build Action = Content
Copy to output directory = Copy if newer
Source="pack://siteoforigin:,,,/Resources/UserCost2013Open16.png"
2: When Using application instead of siteoforigin in the source path, you have to possible ways:
a) Image will be in a SubFolder called "Resources" and .exe file will be small
Source="pack://application:,,,/Resources/UserCost2013Open16.png"
Build Action = Content
Copy to output directory = Copy if newer
b) Image will be included in the .exe and no Subfolder with imagefile will exist
Source="pack://application:,,,/Resources/UserCost2013Open16.png"
Build Action = Resource
Copy to output directory = Copy if newer
Assuming that you have set your Build Action to Resource.
Use the URI-PACK-FORMAT:
pack://application:,,,/ResourceFile.xaml or pack://application:,,,/Subfolder/ResourceFile.xaml or
pack://application:,,,/ReferencedAssembly;component/ResourceFile.xaml
Those are the most common examples.
Also, in my case it was still not showing.
Clean & Rebuild NOT just Build fixed it for me (VS 2019)!
In my case I had the images in a separate project named Common and the images were under a folder named Resources in this project. In my other project, I added a reference to Common and set the source of the images like this:
<Image Source="/Common;component/Resources/anImage.png"/>
The images have the Build Action set to Resource and Copy to Output Directory to Do not copy. However, for some strange reason it wasn't working until I deleted every assembly file in my solution and made a Clean Solution and Build Solution. Not sure why, but it all started working at runtime once I rebuilt everything. I still can't figure out why it was working at Design Time though.
Go to your image in the resources folder, right click on the image, go to properties, click on the Build Action property, and change it from None to Resource. That'll work.
You should add any thing inside Solution Explorer of Visual Studio.
Instead of just copying the image to folder in Windows Explorer, press Right Click on any folder in Solution Explorer go to Add > Existing Item... and select the path to your resource to be added.
I defined my image as next:
<Image Source="/Resources/Images/icon.png"/>
The image is displayed in Visual Studio designer but no image is displayed when I launched the app! It made me nuts!
I tried all Build Actions with clean/build, no luck.
In my case the problem is caused by the fact that the control (which uses Image) and the app itself are in different projects. Resources/Images folder is in the Controls project. As result the app attempted to find icon.png in its own Debug folder, but actually it is in Controls' Debug folder.
So two solutions work for me:
1) put Resources/Images in the app's project (not so good when there are several projects which use controls from Controls project, but it works)
2) specify the name of Controls project explicitly inside Image:
<Image Source="/Controls;component/Resources/Images/icon.png"/>
Visual Studio 2022 (but should work in other versions). Add your image to a folder named as you want, in this example I created an Assets named folder. Then set the image's property to Resource in the Build Action. Then select the image in the folder and drag and then drop the into <MenuItem.Icon> and it should path properly..
Note you may need to Rebuild the project, the compiler sometimes doesn't recognize new resources as a need to rebuild.
Make a new folder and put your pictures in the new folder and write this in XAML
<Image Source="/newfolder/icon.png"/>
For me, changing the "build action" to "Resource" and the "copy to output directory" to "Do not copy" has solved my problem.
Source="file:///D:/100x100.jpg"/> works for me.
I can't display an image on WPF window during runtime. However, it is shown during design mode. The image is located in Images folder and Build action is set to Content as well is Copy to output to Copy Always. The output Any suggestions?
===EDIT====
The output type of a project is : Class Libray, if I change it to Window Application the bellow are workign fine. However I still need to build it is Class library.
2nd try
<Image Source="pack://siteoforigin:,,,/Images/Logo2.png" Grid.Row="0"/>
3rd try
<Image Source="pack://application:,,,/Images/Logo2.png" Grid.Row="0"/>
Also,
If I put a full path to the image location it is working, apparently this is not ideal situation:
<Image Source="C:/.../Images/Logo2.png" Grid.Row="0"/>
Rebuild your entire solution and try again. It probably didn't do a build with images in it when you tried it again.
Also use your 3rd try again then build action to content, no need to make a copy always.
After several trials the answer was quite simple:
For Class Library Project set your images Build Action to Resource and get a reference in Xaml as:
<Image Source="/YOURNAMESPACE;component/Images/Logo.png"/>
It won't work with png, but convert to jpg and write:
<Image Source="/YOURNAMESPACE;component/Images/Logo.jpg"/>
That works for me :)
I'm trying to use resource files (.resx) in a class library. I'm having trouble using these resources in my library's XAML files because libraries do not come with an App.xaml file. So I can not do:
<Application.Resources>
<local:LocalizedStrings xmlns:local="clr-namespace:WPLocalization" x:Key="LocalizedStrings" />
</Application.Resources>
How do I go about localizing a self-contained WP8 library/assembly?
I found a way but it's rather a work around.
The solution is not to try to localize your controls from XAML, but instead from your behind code.
For example, you define a Button in XAML as follows:
<Button Name="MyButton" />
And then in your partial class behind you set the content of the button programatically as follows:
MyButton.Content = MyLocalizedStrings.Hello;
Of course, in this example you would have a resource file called "MyLocalizedStrings.resx" in your project with a string named "Hello" in it.
This approach solves the problem. The only down side is that you won't be able to see a preview of the localized XAML in the Visual Studio XAML window.
Ok i have in my project Resources about 5 Images. What i want to do is to Bind an Image.Source from my Project Resources. Im C# code its pretty easy, i just do :
ImageHolder.Source = Propetries.Resources.Image1.png.
How can this be done in XAML?
Something like this :
<Image Source={??????}/>
Thanks in advance.
Visual studio will create Resources folder and put your image file into it when you add image to the resx file.
In order to use this image in binding you will need to change build action from None to Resource. After that you can bind as follows:
<Image Source="Resources/your_image_name.png"/>
You can not bind directly to Propetries.Resources.your_image_name because of you will need to convert System.Drawing.Bitmap to WPF BitmapSource. But you can bind to strings in the Resource.resx:
<TextBlock Text="{x:Static properties:Resources.YourStringResource}"></TextBlock>
Read here how to convert System.Darwing.Bitmap to the WPF bitmap: Load a WPF BitmapImage from a System.Drawing.Bitmap
And here about binding to the values in the resx file: Get values from *.resx files in XAML
Make sure your Build Action for image is marked as Resource and then you can simply do this in your XAML -
<Image Source="Properties/Resources/a.png"/>
Assuming Propetries/Resources is folder structure in your project where your image is present.
I would like to load vector graphics stored as XAML files (separate files, not in a dictionary), embedded in my application, and I have a few questions to do so:
XAML looks a bit ambiguous, since it can be used to represent either static resources like vector images, or interfaces which are being dynamically built like the ones in WPF. Because of this, the format of a XAML vector image is unclear to me : what should be the root element, like the "svg" tag for svg vector images ? Currently, I'm using a Canvas as the top element since I want to plot my graphics in another Canvas.
What is the best method to load those file programmatically (I mean, to create the Canvas from the xaml files) ? I've seen (and tried) different solutions with XamlReader, but nothing worked: the app crashes and the debugger does not help (most problems I've encountered seem to occur during the parsing, and the error message was unclear).
I've read http://learnwpf.com/post/2006/06/04/How-do-I-Include-Vector-Based-Image-Resources-in-my-WPF-Application.aspx, but the link to the article dealing with resource files loading is dead, and the images are not created using C# code.
Okay, I found the solution by myself and here it is :
My project is named "Editor", and I've placed the XAML file I want to read in a "Graphics" folder. This file is named "Image.xaml".
The project tree looks like this :
The XAML file itself holds this code :
<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
Width="40" Height="40">
<Rectangle Canvas.Left="0" Canvas.Top="0" Fill="White" Stroke="Black" StrokeThickness="1" Height="40" Width="40" />
<!-- ... -->
</Canvas>
(the xaml namespace 'xmlns' reference is needed)
The code used to load the file is :
StreamResourceInfo sr = Application.GetResourceStream(new Uri("Editor;component/Graphics/Image.xaml", UriKind.Relative));
Canvas result = (Canvas)XamlReader.Load(new XmlTextReader(sr.Stream));
layoutRoot.Children.Add(result);
'layoutRoot' being the name of the main Canvas of my application.
Last subtility : the property 'BuildAction' of the *.xaml file must be set to 'Resource', or you will encounter a XamlParseException with hexadecimal value 0x0C (to change this property, right-click on the file in the project treeview).
Hope this can help.