I have been integrating image resources to my WPF assemblies for quite a time, but I never really found a really pretty way of binding them in my MVVM applications.
So I was wondering if some you, stackoverflow users, could share their own practice when it comes to assembly ressources:
How do you reference them in C#/VB and XAML?
When exposing them from code, what type do you expose? (BitmapImage, Uri, string, ...)
Do you prefer referencing them from the view or binding them through view-model?
Do you use a specific assembly to store them? How do you organize them?
Thanks for your help ;-)
This is what I do...
Images are kept in some folder such as Images in project's root folder. You can keep them in any assembly.
Individual image has Build Action property set to Resource type.
The ViewModel holds image name in string (say property MyImageName) and I convert it as a relative path when bound to the Source of Image object in XAML...
public class ImagePathConverter
{
public void Convert(...)
{
return "pack://application:,,,/MyApplicationName;component/Images/" + value.ToString();
}
}
where MyApplicationName is the short assembly's name that is having the Images folder under it.
In XAML, assuming the view model instance is bound to the data context of the entire view and / or atleast to the image's data contect ....
<Image Source="{Binding Path=MyImageName, Converter={StaticResource ImagePathConverter}}" />
But then thats one of the typical ways to refer images in a WPF project via MVVM. Other ways include an Image's binary stream loaded (from resx or Content type images or from binary database). In such case your converter will convert it into a BitMapImageSource.
Related
I'm building an application using PRISM and MVVM. I have a view model that needs to display a non-modal dialog box to the user indicating an operation is in progress. I'm using essentially an abstracted IDialogService.
My question is: where should I store the strings for the title and the message shown in this dialog box? The view model's logic causes the dialog box to be displayed and determines when it should be closed. Hence, I have code that looks like this in my view model:
let! closeDlgAction =
dialogSvc.ShowDialogModeless (
"Opening File",
"Please wait while your selected file is opened.") |> Async.AwaitTask
I'm thinking about localization scenarios. WPF has its own mechanism for providing localization through resource dictionary, etc. It seems like these strings belong in a resource dictionary, but the view model shouldn't have a dependency on WPF resource directories - especially because the same view model is going to be used on a Xamarin Forms application later.
The best solution that comes to mind is to use a service that abstracts the resource library away (e.g. IDialogStringService), but I wonder if there's a better or more preferred approach?
You shouldn't use resource dictionaries (xaml) to store text. Instead you have to use Resources (*.resx). In VS:
Right click on project
Add -> New Item...
Find "Resources File" template, type name, and click Add
Opt. Open this file (special editor will opened) and on top bar switch Access Modifier to Public, if you want get access to text from another project or from XAML. Add some key\value strings.
Right click on resource file and click Run Custom Tool. New class will generated with static properties with names based on your keys from Step 4.
How to use (if file has name Localizations.resx and has string with key "AppTitle")
From code:
let! closeDlgAction =
dialogSvc.ShowDialogModeless (
Localizations.AppTitle,
"Please wait while your selected file is opened.") |> Async.AwaitTask
From xaml:
<Window
x:Class="MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="{x:Static Localizations.AppTitle}"/>
*.resx file and *.cs file that is generated both don't depend on any WPF assemblies, so you can use them in different assemblies: in shared view models, from wpf views and from xamarin views. Just put you *.resx file in separate netstandard assembly and refer to it where do you need it from
Cons of this way:
resx generates class with strings and each string is public property, so static code analyze works
You don't have add new abstraction level
You can ref strings from code files or from XAML
I liked Vadim's answer, and I have used that approach before. If my View Models lived in the same project as the WPF project, that would be the best solution.
However, my View Models are in a different library (and a different language) and will be shared between a Prism MVVM WPF project and a Prism MVVM Xamarin Forms project. I could still use resources in the View Model library, but then localization concerns would exist separately in both the WPF project (for the Views) and the View Model library. IMO the localization concern should be centralized.
As such, I decided to abstract the resources behind a service. Implementing the resource service turned out to be more straightforward than I thought. To use an indexer intuitively, I defined a "resource container object" that is returned by IResourceService, as seen below:
public struct ResourceContainer
{
private readonly Func<string, string> _resourceGetter;
public string this[string resourceId] => _resourceGetter(resourceId);
public ResourceContainer(Func<string, string> resourceGetter) => _resourceGetter = resourceGetter;
}
public interface IResourceService
{
ResourceContainer Resources { get; }
}
And the service implementation in the WPF library is as follows:
public class ResourceService : IResourceService
{
public ResourceService()
{
Resources = new ResourceContainer((s) => Application.Current.Resources[s] as string);
}
public ResourceContainer Resources { get; }
}
In the WPF layer's XAML resource directory:
<s:String x:Key="FileOpenDialogTitle">Opening File</s:String>
<s:String x:Key="FileOpenDialogMessage">Please wait while your selected file is opened.</s:String>
And, finally, the View Model consumes this service by requesting IResourceService on its constructor, and is used as follows:
let! closeDlgAction =
dialogSvc.ShowDialogModeless (
resourceSvc.Resources.["FileOpenDialogTitle"],
resourceSvc.Resources.["FileOpenDialogMessage"]) |> Async.AwaitTask
This approach will ultimately require implementing the resources twice - once for the WPF project and once for the XF project, but I have to implement the Views twice, anyway. At least the localization concerns are centralized in both cases (or perhaps a shared resource library can be used between both projects).
EDIT: This technique could also leverage Vadim's suggestion by putting the localization resource (.resx) in the WPF project as well, and either having the XAML resource directory reference the static resources, or have the ResourceService return the resource directly. Having the resources in .resx format may make sharing them between multiple projects more straightforward.
I've added a XAML file to a Windows Phone 8 project. Its build action is "Page". I want to load the XAML as a text string (to feed into XamlReader.Load()). How can I accomplish this?
It's not available as a separate file in the XAP package; it's probably somewhere in the DLL.
When set to Page, the compiler will compile the XAML into BAML and add the BAML file as a resource to the assembly.
If you wish to get the original XAML back out from the BAML resource at runtime, then you will need to deserialize the BAML, and then serialize your object to XAML.
You can have a look at the Baml2006Reader, or a better option would be to use Application.LoadComponent which is what the InitializeComponent method uses internally. InitializeComponent is called by the partially generated class for your XAML code behind.
var uri = new Uri("/MyAppName;component/MyXaml.xaml", //Note extension: XAML, not BAML
UriKind.Relative);
Page rootObject = new Page(); //Assuming XAML root element is Page - it could be anything
Application.LoadComponent(rootObject, uri);
(assuming the root element of your XAML file is a Page).
You can then serialize the Page to a XAML string using the XamlWriter:
string xaml = XamlWriter.Save(rootObject);
Note that this is the XamlWriter in the System.Windows.Markup namespace, not System.Xaml. If your XAML has WPF types, then you should use this XamlWriter to avoid errors.
We have some WPF modules which are hosted in a cpp unmanaged/managed application. This enviroment is causing troubles when specifying relative Uri's for media content. For example, I have no problem of doing something like this in a testapp:
<MediaElement Grid.Row="0" x:Name="player" Source="media\Getting started with.wmv" LoadedBehavior="Manual" UnloadedBehavior="Stop" Stretch="Fill"
MediaOpened="Element_MediaOpened" MediaEnded="Element_MediaEnded"/>
But, as mentioned, this does not work in production code.
If I try to use the pack schema like this:
Source="pack://application:,,,/media/Getting started with.wmv"
I get the exception:
Cannot navigate to application resource 'pack://application:,,,/media/Getting started with.wmw' by using a WebBrowser control. For URI navigation, the resource must be at the application�s site of origin. Use the pack://siteoforigin:,,,/ prefix to avoid hard-coding the URI.
If I try to use the 'siteoforigin' schema like this:
Source="pack://siteoforigin:,,,/media/Getting started with Olga 7.wmv"
I get another error:
Application identity is not set.
The media file is set up as "Content" and with "copy always".
How can I specify the MediaElement source using an absolute uri in a Wpf desktop application?
I found a solution (kinda). I am guessing that the relative url's can not be resolved because the main .exe is an cpp mfc application. So in order to create absolute uri's I did something like this:
player.Source = new Uri(CreateAbsolutePathTo("media/Getting started with.wmv"), UriKind.Absolute);
private static string CreateAbsolutePathTo(string mediaFile)
{
return Path.Combine(new FileInfo(Assembly.GetExecutingAssembly().Location).DirectoryName, mediaFile);
}
I am binding to a viewmodel so this logic is wrapped into a property on the viewmodel and the source is databound in xaml.
Its working, but its not as pretty as I would like it to be.
Only you need to do this:
MediaElement bb = new MediaElement();
stage.Children.Add(bb);
bb.Source = new Uri("Recursos/MagicWandNoise.wav", UriKind.Relative);
Debug.WriteLine("URL:" + bb.Source);
bb.LoadedBehavior = MediaState.Manual;
bb.Play();
And then add the Binary Resources in your folder debug, check this link
Remember the media element to work fine, you need to add in a Visual Three
Canvas.Children.Add(bb);
I'm trying to use the Image control is a very basic way, like here:
http://www.silverlightshow.net/items/Using-the-Image-control-in-Silverlight-2-Beta-1.aspx
So I'm ending up with XAML like this:
<Image x:Name="imgSmall" Stretch="Fill" Source="../Img/Small/105.jpg" Margin="10,0,0,0"></Image>
Which isn't working. The Image is blank, and in the designer the URI is underlined with a message of "...is not part of the project or its build action is not set to 'Resource"
If I change the source to a property on my ViewModel, set like this:
new Uri(App.Current.Host.Source, "../Img/Small/105.jpg");
Then it works fine. I'd much prefer to use the simpler syntax and get the image directly. Is this possible?
(The images are one level up from ClientBin)
Setting all of my web sites images to build=Resource is not possible.
Thanks!
You have to create a converter that takes the relative image path and adds the "absolute" part. You can pass the relative Uri as binding value or as converterParameter.
class ImageConverter : IValueConverter
{
// method convert()
return new BitmapImage(new Uri(App.Current.Host.Source, ((string)parameter));
//...
}
It id doesn't work because image is not added to your project.
Add image to project and in then you can set source from xaml.
I can use data binding to set the initial Content of a WPF Frame, but subsequent changes to the the bound property (implemented using INotifyPropertyChange) do not seem to change the content.
Also, does anyone know if binding directly to the Content property in this way will cause the bound item to appear in the Frame or NavigationWindow's journal?
Some context: I realize that I should probably be using the NavigationService to interact with the Frame, but I'm attempting to follow the MVVM pattern. It seems like it would be much simpler to databind to the Content property...
You can use data binding against a Frame, but you need to make sure the Mode for your Binding is set to TwoWay.
XAML:
<Frame Content={Binding Path=MyProperty, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged} />
View Model:
public class MyViewModel : INotifyPropertyChanging, INotifyPropertyChanged
{
public Page MyProperty
{
get
{
return _viewModelPage;
}
set
{
this.OnPropertyChanging("MyProperty");
_viewModelPage = value;
this.OnPropertyChanged("MyProperty");
}
}
}
Many in the WPF community agree that the built-in navigation framework is broken. However, even if you were to use it, binding the Content property is not the correct approach. If you want to use MVVM with navigation you should combine it with the FrontController pattern where the ViewModel dispatches a navigation request to a Controller which then resolves that request for you. There aren't many examples of this concept available because (as I mentioned before) many developers pass on using WPF's built-in navigation.
If you want to look at a very robust navigation engine for WPF, look at nRoute It is a port of the MVC routing engine to WPF.
The Frame is a navigation host, so it is more correct to use the NavigationService to navigate to different content. If you use the INotifyPropertyChange, I suppose that you call the related event whenever the content is changed. Then, I also suppose that there is no difficult to use the NavigationService instead.
I ran into this issue a few days ago. I had a main window with a frame, and I loaded different pages into the frame (by using Navigate()). The pages' data bindings were broken, the data did not show up on the loaded page.
To repair the bindings, create or give your existing DataContext to the page inside the frame, and the bindings will work again.