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)
Related
I am trying to show a web page relative to the local folder in a UWP app. This means, I have the page itself as string, but assets (images, scripts) are located in the apps local folder.
I tried to use the NavigateToString method that as I understood should serve this task, in combination with the Source-property of a WebView control.
var baseUri = new Uri("ms-appdata:///local/");
WebView.Source = baseUri;
var page = ...;
WebView.NavigateToString(page);
However, this gives me the following error message when assigning the Source-property of the web view:
Exception thrown: 'System.ArgumentException' in App.exe
Additional information: Value does not fall within the expected range.
So apparently, using the local app folder for assets is not supported?
The app targets minimum Windows 10 Build 10586.
Does anybody know whether there is a useful workaround for this?
Edit: I tried to make a minimum example. In the following, I created a small test app that does nothing but loading a static html file from the local storage. As far as I can tell, this code exactly resembles the XamlWebView example but does raise an ArgumentException.
MainPage.xaml
<Page
x:Class="App1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<WebView Name="WebView" />
</Grid>
</Page>
MainPage.xaml.cs
using System;
using System.IO;
using Windows.Storage;
using Windows.UI.Xaml.Controls;
// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409
namespace App1
{
/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
Initialize();
}
private async void Initialize()
{
var file = await ApplicationData.Current.LocalFolder.CreateFileAsync("index.html", CreationCollisionOption.ReplaceExisting);
using (var sw = new StreamWriter(await file.OpenStreamForWriteAsync()))
{
sw.WriteLine("<html>");
sw.WriteLine("<body>");
sw.WriteLine("This is some text");
sw.WriteLine("</body>");
sw.WriteLine("</html>");
}
WebView.Navigate(new Uri("ms-appdata:///local/index.html"));
}
}
}
I do not even know where the difference to the sample is, can't find any.
WebView.Source property is ued to gets or sets the Uniform Resource Identifier (URI) source of the HTML content to display in the WebView control.
We usually set the Source property in XAML. The XAML parser automatically converts the string to a Uri. The Source property can be set in code, but rather than doing so, we typically use one of the Navigate methods such as Navigate, NavigateToString and NavigateWithHttpRequestMessage method to load content in code.
And the URI you've used in your code is not a valid URI for WebView control, so you got a Value does not fall within the expected range. error. To load content from app’s local storage, we need to place the content in a subfolder under the local folder. Ref Remarks in WebView class:
To load uncompressed and unencrypted content from your app’s LocalFolder or TemporaryFolder data stores, use the Navigate method with a Uri that uses the ms-appdata scheme. The WebView support for this scheme requires you to place your content in a subfolder under the local or temporary folder. This enables navigation to URIs such as ms-appdata:///local/folder/file.html and ms-appdata:///temp/folder/file.html . (To load compressed or encrypted files, see NavigateToLocalStreamUri.)
Each of these first-level subfolders is isolated from the content in other first-level subfolders. For example, you can navigate to ms-appdata:///temp/folder1/file.html, but you can’t have a link in this file to ms-appdata:///temp/folder2/file.html. However, you can still link to HTML content in the app package using the ms-appx-web scheme, and to web content using the http and https URI schemes.
So when you use WebView.Navigate(new Uri("ms-appdata:///local/index.html"));, you still get the error as ms-appdata:///local/index.html is also not a valid URI for WebView.
Besides, although NavigateToString supports content with references to external files such as CSS, scripts, images, and fonts. But it only supports content in the app package using the ms-appx-web scheme, and web content using the http and https URI schemes. It can't work with assets located in the apps local folder. To achieve what you want you need to put these assets into a subfolder under the local folder and then also store the html string to a file under the same subfolder. In the html, you can use relative URI to reference these assets like what in my previous answer.
I'm looking for a method to make all my resource files work properly after I have written my project in a cd.
For example I have saved my images in Project Name\Project Name\obj\Debug\Images and I want them to be usable both in xaml and regular c# code, when I insert that cd in another machine.
Thanks for your time!
What worked for me was, using the Image class for both backgrounds and overlapping images.
In xaml the code is <Image x:Name="Image1" Source="..\obj\Debug\Images\image.jpg"/>
and you initialise it in c# using
public PageName()
{
InitializeComponent();
Image1.Source = new BitmapImage(new Uri(#"../Images/cafeteria.jpg", UriKind.Relative));
}
It's a shame because (atleast in my case) the ImageBrush Class didn't support relative uris for some reason..
I'm trying to display splash screen for my WPF application. Based on some condition I have to load one of two images I have created. So i have to use SplashScreen class instead of setting a static image as flashscreen. Which is easy and works in my case.
I'm doing something like following,(I have set the both images as Embedded Resource)
string splashImage = string.Empty;
if (Condition)
{
splashImage = "ApplicationType1.png";
}
else
{
splashImage = "ApplicationType2.png";
}
SplashScreen screen = new SplashScreen(splashImage);
screen.Show(true);
Which gives me exeception,
Cannot locate resource ApplicationType1.png
Finally i figured it out,
Problem was with the .png image i have added. Still i have no clue why it couldn't load that specific image. I just got the .jpg image and it works fine.
And it works with both build actions Embedded Resource or Resource
I have the following code
<Mvx.MvxHttpImageView xmlns:local="http://schemas.android.com/apk/res/TestServices.Droid"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
local:MvxBind="{'ImageUrl':{'Path':'ThumbNail'}}"
Where I am passing an image url to the ThumbNail property. The above code is part of an ItemTemplate which is being passed an ObservableCollection of TestModel objects as below.
public class TestModel
{
public string ThumbNail
{
get;
set;
}
public string Name
{
get;
set;
}
....
}
The Name property is also bound in the above Template to a TextView and it shows up properly as do other string values. The only issue is that the Image does not show up.
I have tried setting the Image Url upfront in the constructor of the ViewModel and it works then. But when I add fetched values to the collection in the Completed event of my web service thats when the Image is not displayed. I have verified the path to the image url in the completed event and it is right. What could be going wrong here. Many thanks
I'm not sure what's going wrong....
But some things to consider experimenting with are:
setting the MvxBindingTrace level to Diagnostic - does the output panel tell you anything interesting?
if you are updating the url dynamically then do you need to fire the property changed event
if you add a textview with its Text bound to the image url, then does this update correctly?
does using wrap_content for both height and width really make sense here? What happens if you fix height and width to 100dp instead?
does the app work if you use known good image URL - eg a URL from http://placekitten.com?
does the app work if you set a default image to a local file (eg a resource or asset) which is shown while the http image is loading?
do the sample apps work for you - eg the bestsellers or twitter samples? If so, then can you see what they do differently?
can you step into the mvx http image source - are the properties and methods being called at all? If they are, then do they look like they are being called correctly or oddly in any way?
Try those suggestions and I suspect you will find a way forwards. Good luck with the debugging.
if these suggestions don't help, please try adding more info, including info on which version of mvvmcross you are using, which version of Android, which phone or emulator, etc.
Got it, I was using backslashes for creating the url by concatenating strings, changing them to forward slashes turned it into a proper link and its working fine now. Thanks a lot for the help Stuart
I am not familiar with WPF, and I just feel quite confusing.
I am trying to create a little computer game, and there are elements I want to display dynamically. I use Image class and add the images to a canvas. But I'm not sure whether it's a good practice. I feel that adding controls to canvas seem to be a little wired. And I'm a little concerned about the performance, because I may need many images.
The real problem is, I can't load the images from the image files. I see an example in a text book like this (XMAL):
<Image Panel.ZIndex="0" Margin="0,0,0,0" Name ="image1">
<Image.Source>
<BitmapImage UriSource="Bell.gif" />
</Image.Source>
</Image>
Where Bell.gif is added into the project.
And I tried to copy this in code to create an image.
new Image { Source = new BitmapImage(new Uri("Blockade.bmp"))}
But I got invalid Uri exception. After some search in the Internet, I found that loading resources dynamically seems to be difficult. Can I load the files added to the project dynamically?
If I use absolute path then it's OK. But I can't expect every computer will put the files in the same location. Can I use relative path?
I tried
new Image { Source = new BitmapImage(new Uri(#"Pictures\Blank Land.bmp", UriKind.Relative)) }
But it doesn't work. (The image is blank)
Thanks.
I deleted the code. I just found the solution in "Pack URIs in WPF" in MSDN.
I can either use "pack://application:,,,/Blockade.bmp" (absolute) or "/Blockade.bmp" (Relative) for a resource in the local assembly.
(I didn't use '/' at first)
"pack://application:,,,/ReferencedAssembly;component/File.xaml" is for referenced assembly. (I guess the problem with the answer is that the authority part is missing)
The following works:
new BitmapImage(new Uri("/MyProject;component/Resources/next.png", UriKind.Relative));
Just replace "MyProject" with the name of your project, and adjust the path to your image.
Make sure the image is added to the project with the "BuildAction" set to "Resource".