I have an application where I'm taking a XAML template from a database record, plugging in new text strings and image references, and showing it in a window.
I take the XAML text and create a DependencyObject using this property:
public DependencyObject ParsedXamlTree
{
get
{
String xaml;
DependencyObject theDependencyObj;
xaml = ProcessedXaml;
byte[] xamlData = Encoding.Unicode.GetBytes(xaml);
using (MemoryStream ms = new MemoryStream(xamlData))
{
theDependencyObj = (DependencyObject)XamlReader.Load(ms);
}
return theDependencyObj;
}
}
Within the XAML will be an Image tag. For example:
<Image x:Name="categoryImage"
HorizontalAlignment="Center"
Height="240"
Margin="72,42,408,318"
VerticalAlignment="Center"
Width="320"
Source="SampleAssets\pacman-151558_640.png"/>
The problem I'm having is that when I parse the DependencyObject tree and get to the corresponding Image object, the string "SampleAssets\pacman-151558_640.png" from the Source attribute seems to be missing.
I notice that when it reads and parses the XAML, there is an IO exception being thrown within WPF itself. That's the line where XamlReader.Load is called. This exception is caught within the library so I'm only seeing evidence of it in the debug trace window.
I'm guessing that it's trying to find "SampleAssets\pacman-151558_640.png" for the Image tag and failing. That's fine in itself, as I always figured the image sources would have to be patched up at runtime.
The question is, how do I retrieve the "SampleAssets\pacman-151558_640.png" string that was in the original XAML? Is there somewhere in the Image object I can get this?
Worst case scenario would be parsing the XAML myself to find the tag and extracting the attribute string from it, but I'm hoping that's not necessary.
WPF has a built-in type converter (ImageSourceConverter) that converts URI strings to ImageSource objects (the type of the Image.Source property). If an image could not be loaded from an URI string, the converter returns null, so the Source property of your Image control will also be null.
There is nothing in the object tree that will keep the URI of a non-available image. You will have to parse the XAML Template before loading and replace invalid image URIs by valid ones.
Related
I've successfully been able to use a static .svg file as an image in WPF by following the guidance in another question.
The basic approach there is to use the SharpVectors library, and do:
<svgc:SvgViewbox Source="path/to/file.svg"/>
In place of an <Image .../> tag.
However I am struggling trying to find a similar method to use an SVG within a System.Windows.Controls.Ribbon - where i'd like to use it as the SmallImageSource of a RibbonMenuButton.
I have tried the following:
<RibbonMenuButton Label="Test">
<RibbonMenuButton.SmallImageSource>
<svgc:SvgViewbox Source="path/to/file.svg"/>
</RibbonMenuButton.SmallImageSource>
</RibbonMenuButton>
Which produces the compiler error message:
The specified value cannot be assigned. The following type was
expected: "ImageSource".
I think the key problem is that an svgc:SvgViewBox is not an "image source", but I don't know how to properly convert or otherwise work around this.
I'm open to alternate approaches which don't use SharpVectors, but it is extremely convenient to have source image files in SVG format and not have to manually convert to any other format.
SharpVectors includes a converter extension which can be used to 'output' an ImageSource.
This is documented in section "1.2 WPF Extensions and Type Converters" of their usage guidelines.
Example:
<RibbonMenuButton Label="Test" LargeImageSource="{svgc:SvgImage path/to/file.svg}"/>
(where svgc is the defined name of the SharpVectors namespace in your XAML.)
The svgc:SvgImage binding extension produces a DrawingImage which is a type of ImageSource. This works perfectly at runtime with the SVG image rendered into the button.
Unfortunately at design-time the button image is blank.
Please try using the newly added property; AppName, which is used to try and resolve the URI of the resource file at design-time.
See the samples for the SvgImage and newly added SvgImageConverter, especially the toolbar demo using the SVG icons.
https://github.com/ElinamLLC/SharpVectors/tree/master/TutorialSamples/ControlSamplesWpf
SvgImageConverter provides binding support, if you need it unlike the SvgImage.
I have got a class that gaves me a list of images with two URL addresses as property, one for thumbnail and second for full image. In XAML code of different class I successfully bound to those thumbnail data and showed thumbnails of images. Although now I wanna work with second property in C# code after click on thumbnail and I don't know how to access to DataContext. Thank you for a help.
http://s30.postimg.org/ecx7qepnl/prb2.png
As you can see in debugger DataContext is set to instance of MyPlaces.FlickrImage so all you need to do is get the value of img.DataContext and cast it to your type:
var flickrImage = img.DataContext as MyPlaces.FlickrImage;
if (flickrImage != null)
{
// do something with flickrImage.Image1024
}
How do I get the image url? My xaml is:
<toolkit:HubTile Name="Demo" Title="Demo" Source="demo\0.png" Margin="15" Tap="Demo_Tap"/>
and in c# I try to get the url from the sender (because I have a lot of entry's in the same tap)
my c# so far
((Microsoft.Phone.Controls.HubTile)(sender)).Source
and I get errors
what I need rests inside
System.Windows.Media.Imaging.BitmapImage m_string;
but how do I access that?
If Source is a BitmapImage you can just cast the sender source as BitmapImage
(((Microsoft.Phone.Controls.HubTile)(sender)).Source as BitmapImage).UriSource.OriginalString
Source
Source is a dependency property of type ImageSource. It gets or sets the image source of the HubTile control.
Are you casting to an ImageSource when getting the value? Also, it would help if you displayed the error message.
Update
Per your update, casting to a BitmapImage and getting the UriSource would probably get you what you want:
(BitmapImage).UriSource
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)
I am currently building an application that consists of several components, each of which is essentially a WPF user control with a little C# code around it for the plugin system to work (using MEF).
The problem I am having is that each component should include an icon and for niceness purposes I defined that as a System.Windows.Media.Brush so I can just use the DrawingBrush exported from Design there. Now I need to access that piece of XAML from non-WPF C# where I currently have the horrible workaround of instantiating the user control and asking it for the resource:
private Brush CachedIcon = null;
public override Brush Icon
{
get
{
if (CachedIcon == null)
{
CachedIcon = (Brush)(new BlahControl().TryFindResource("Icon"));
}
return CachedIcon;
}
}
I couldn't find a way to read that resource (which is a .xaml file, and referenced in a ResourceDictionary in the custom control) from a "normal" C# class. Anything belonging to WPF has that nice TryFindResource method but how to do that otherwise? I don't want to have the XAML file with the icon lying around un-embedded.
In your XAML code make sure the icon resource has the build option set to "Resource", and then reference the resource to make it a xaml static resource
<UserControl.Resources>
<BitmapImage x:Key="icon1" UriSource="Resources/Icon1.ico" />
</UserControl.Resources>
Then in your .Net 2.0 code you will find the resource in the "{xamlName}.g.resource" stream
Example code that loads all icons from a xaml dll into a dictionary:
using System.IO;
using System.Reflection;
using System.Collections;
using System.Resources;
...
var icons = new Dictionary<String, Bitmap>();
var externalBaml = Assembly.LoadFile(Path.Combine(Environment.CurrentDirectory, "MyXaml.dll"));
Stream resourceStream = externalBaml.GetManifestResourceStream(externalBaml.GetName().Name + ".g.resources");
using (ResourceReader resourceReader = new ResourceReader(resourceStream)) {
foreach (DictionaryEntry resourceEntry in resourceReader) {
if (resourceEntry.Key.ToString().ToUpper().EndsWith(".ICO")) {
icons.Add(resourceEntry.Key.ToString(), Image.FromStream(resourceEntry.Value as Stream) as Bitmap);
}
}
}
My suggestions are:
Provide metadata on your control about where the icon can be found. You can do this with your own custom attribute (see example 1 below). This metadata will allow you to load the icon without creating an instance of the control.
Since you're using MEF, you can use metadata in your export to achieve the same as above. Details here. See example 2 below.
Treat your icon as an ImageSource rather than a Brush. You can use WPF's Image control to show your ImageSource, or you can paint it with an ImageBrush.
Use the technique provided by TFD to read the resource with the name specified in the metadata. Unfortunately, WPF does not appear to provide anything like a BamlReader, which would make it much cleaner to load the WPF resource from a non-WPF context.
Example 1:
[Icon("MyIconResourceName")]
public class BlahControl : Control
{
...
}
Example 2:
[Export(typeof(IApplicationComponent))]
[ExportMetadata("IconResource", "MyIconResourceName")]
public class BlahControl : Control
{
...
}
You can read resources from your assembly as stream.
Example code here:
http://www.wpftutorial.net/ReadWPFResourcesFromWinForms.html
Define the icons at the app level instead of in the control, either in the app.xaml or a master resource dictionary xaml file. Then you can use the same TryFindResource method, but without creating an instance of the control.