get image from resource XAML - wpf

I have a WPF application, I should set button image depending on current culture. It works fine for strings:
<Label Content="{x:Static res:Resources.Buy}"></Label>
show string depending on culture, but with image:
<Image Source="{x:Static res:Resources.GetItFree}"></Image>
I get an error. Why and how to do correctly?

I have done this before, but using a library: Infralution.Localization.Wpf. It is very simple the way of doing the images resources references:
<Window Language="{UICulture}" x:Class="WpfApp.MainWindow"
...
Icon="{Resx ResxName=WpfApp.MainWindow, Key=Window.Icon}">...</Window>
This is the final image you get (it changes with culture):
Hope this reference could helps, it works for me...

Related

View in a module not displaying image but it will display text

I am using MEF, Prism and WPF. I have a simple module (for now, I'll do more with it when I get past this roadblock) that displays a single image sourced as static resource in that module. Here is the xaml for the view:
<UserControl x:Class="SplashScreenModule.SplashView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
Height="960" Width="1180">
<Grid>
<Label>
<Image Source="Images/My Image.png"/>
</Label>
</Grid>
The image shows up in the designer but when I run the code the window is blank. If I replace the image with simple text the text is display as expected.
<Label>
This shows up in the window.
</Label>
I've spent the last 3 hours trying to figure this out and am stumped. I would appreciate any help.
Thanks,
Bill
You have to know that there is a difference on how ressources are managed at DesignTime and at RunTime. At DesignTime there is no compilation required, thus it is able to display a ressource even if it is not include in the project.
At runtime this is normally possible, but it is better to include the ressources in your project (ie create a folder Images in your solution, and add the "My Image.png" in this folder), to be sure of the location of your ressource compared to your exe.
If you do it and the image still doesn't show up, try to remove the label and execute again.
By doing this it works fine for me. As soon as the image show up, you can add back the label.
Hope it helps.
The following code is working for me:
<Window x:Class="LabelImage.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Label>
<Image Source="Images/visual studio.png" />
</Label>
</Grid>
</Window>
I structured my solution like you did: I have the picture inside a folder named Images. The MainWindow is located directly under the project node (it's not in any subdirectory).
Make sure that the Build Action for your image is set to resource, otherwise it won't work with the WPF Resource Finding System (which internally uses PACK-Uris: http://msdn.microsoft.com/en-us/library/aa970069(v=vs.110).aspx)
I use .NET 4.5 with VS 2013. If you have any further questions, please feel free to ask.
Update after Bill's comment:
That's a whole different thing when your resource resides within another assembly. The syntax for referencing the image should be like this:
<Image Source="/ClassLibraryForResources;component/Images/visual studio.png" />
where you do the following steps:
Begin with a slash "/"
Specify the name of the assembly that holds your resource (this can also be a strong assembly name)
Continue with ";component/"
End with the path of the image (or other resource)
(Please note that you have to omit the quotation marks).
The solution that I used is structured like this:
This should resemble what you have described. Again: it's all about the PACK URIs that WPF uses (see link above).

Cannot see binded imges in VS 2012 at design time in WPF

I am using MVVM to bind images to my WPF page, but I have a lot of buttons and wihout pics, hard to determine button purpose. The problem is that VS designer does not show me binded images if I use such URI:
xAxis = new BitmapImage(new Uri("/SettingsManager;component/Icons/CameraIcons/X.png",
UriKind.Relative));
But when I use:
xAxis = new BitmapImage(new Uri("../../Icons/CameraIcons/X.png", UriKind.Relative));
Designer correctly displays image.
I make binding via source:
<ToggleButton.Content> <Image Source="{Binding Source={StaticResource
CameraIcons}, Path=XAxis, Mode=OneWay,
UpdateSourceTrigger=PropertyChanged}"></Image> </ToggleButton.Content>
Does someone know why this happening?
In your first example (that doesn't work), it looks like you provide an absolute URI, but declare it as UriKind.Relative.
In your second example (that does work), it looks like you provide a relative URI, and declare it as UriKind.Relative.
I assume that is why the first example work, but the second one doesn't. You could try using UriKind.Absolute instead in the first example.

MahApps panoram control not displaying photo's

I want use the MahApps PanoramaControl to display a bunch of photo's. However I see only the string paths appear in the control, which will be correct if you look at my code.
But I can't figure out howto get it working to show the images instead of the links.
Xaml:
<Controls:Panorama Grid.Row="2"
Grid.ColumnSpan="4"
ItemBox="140"
ItemsSource="{Binding PhotoCollection, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
ViewModel:
string[] filePaths = Directory.GetFiles(#"D:\Google Drive\Images\Backgrounds");
test = new PanoramaGroup("My Photo's", filePaths);
PhotoCollection = new ObservableCollection<PanoramaGroup> { test };
Anyone an idea on how to make it show the images? The control is load as I can scroll sideways on the text.
There is not much documentation on their site on how to get it working...
Or are you using some other Metro style lib for the 4.0 framework?
In order to get MahApps Panorama control i would offer the follow solution below. As to other frameworks that provide this level of detailed MODERN UI experience I have not come across any but interested to know if you do.
Hope the solutions works for you.
You need to add a Data Template the represent the object you're showing.
Start off by defining the object in a POCO class (as illustrated below). Then in the population of the items ensure you translate them to the newly created POCO object instead of leaving them as string values.
public class Photo {
public string Path { get; set; }
}
Next in the definition of you XAML window you need to create a reference to the namespace where the POCO object resides.
xmlns:model="clr-namespace:project.models;assembly=project"
Last, but not least, you want to then create a DataTemplate to represent the object. This is added to the window resources.
<Window.Resources>
<DataTemplate DataType="{x:Type model:Photo}">
<Image Source="{Binding Path}"/>
</DataTemplate>
</Window.Resources>
This should then let the render take place in the interface where it belongs. Hope this works for you.

Images bound to images added to resx files using XAML

My WPF application includes a resource file MyResources.resx, containing several strings and images. Because the application will need to be localized, all my references to globalized resources must be made via named properties of the auto-generated MyResources class. The following code works well for string resources:
<Button Content="{x:Static local:Properties.MyResources.ButtonText}" />
However the same does not work for images. Assuming I have an image eflag.bmp added to the resources as a resource named Flag, I would like to be able to do something like this:
<Image Source="{x:Static local:Properties.MyResources.Flag}" />
Please note that the following alternative approach:
<Image Source="/MyNamespace;component/Resources/eflag.bmp" />
cannot be used in this case because it will not be able to handle localization. The problem can be solved using code behind but I am looking for a XAML based solution.
Turn your x:Static into a Binding.Source and add a Converter which does Bitmap to ImageSource.
Source="{Binding Source={x:Static local:Properties.MyResources.Flag},
Converter={StaticResource BitmapToImageSourceConverter}}"
Alternatively you can make the converter a custom markup extension which takes a Bitmap and returns the ImageSource in ProvideValue.
Source="{me:BitmapToImageSource {x:Static local:Properties.MyResources.Flag}}"

Binding images to Image in Silverlight 2

I'm building a Silverlight 2 application and I need to bind some images to Image object declarated in XAML. I'm doing some other binding in the application and it works just fine, I'm having problem with only images!
This is it's XAML:
<Image Source="{Binding Path=ThumbNail}" Style="{StaticResource ThumbNailPreview}" />
And this is the C# code-behind:
ThumbNail = (string)story.Element("thumbnail").Attribute("src")
I'm just parsing the URL's from a XAML file. When I try to do a foreach loop over all of the ThumbNail properties, it returns the URL as expected. As I said, all other binding works great, so it has to be a problem between the Image control and the ThumbNail property. I also tried chanding the datatype from string to Uri, but nothing happened. Could anyone help me?
I think this has already been asked and answered in StackOverflow here
The key is that the ImageSource property is not a string but a System.Windows.Media.Imaging.BitmapImage type and so needs to be converted.
HTH

Resources