Silverlight: ImageTools.ExtendedImage Loading External URL Image NOT Working at all - image

I'm using the ImageTools library (imagetools.codeplex.com) to load an image from external URL.
<Canvas x:Name="LayoutRoot" Background="Blue"
Width="466" Height="204" >
<Image Name="theImage" />
<Button x:Name="btnTest" Canvas.Top="0" Canvas.Left="-200" Click="btnTest_Click"
Width="100" Height="23"
Content="Test Button">
</Button>
</Canvas>
Init:
public MainPage()
{
InitializeComponent();
Encoders.AddEncoder<PngEncoder>();
Decoders.AddDecoder<PngDecoder>();
Encoders.AddEncoder<JpegEncoder>();
Decoders.AddDecoder<JpegDecoder>();
}
Then:
private void btnTest_Click(object sender, RoutedEventArgs e)
{
ExtendedImage ei = new ExtendedImage();
// ei.UriSource = new Uri(#"https://www.google.com/images/srpr/logo3w.png"); // NOT working
ei.UriSource = new Uri(#"/Images/header.png", UriKind.Relative); // Working
ei.LoadingCompleted += new EventHandler((ss, ee) =>
{
Dispatcher.BeginInvoke(() =>
{
theImage.Source = ei.ToBitmap();
});
});
}
I found that loading a local file /Image/header.png is working, but loading an external URL image (https://www.google.com/images/srpr/logo3w.png) is not working at all.
It behaves crazy: once I click the Test Button, the LayoutRoot canvas disappears.
However, according to this discussion: http://imagetools.codeplex.com/discussions/250624
Loading an external URL image should be working.

Can it be related with UriType ?
Relative,Absolute,RelativeOrAbsolute
ei.UriSource =
new Uri(#"https://www.google.com/images/srpr/logo3w.png"
,UriKind.RelativeOrAbsolute); // works ?
http://msdn.microsoft.com/en-us/library/system.urikind(v=vs.95).aspx
Hope helps!
EDIT: You need a file like that http://twitter.com/crossdomain.xml otherwise SL throws SecurityException normally.
For crossdomain implementation see
https://stackoverflow.com/a/1325011/413032
http://www.silverlighthack.com/post/2008/11/08/Silverlight-clientaccesspolicyxml-files-for-the-Enterprise-(Part-1-of-2).aspx

Related

Xamarin Camera Control Photo does not show on device

I used the following example to work with Camera Control in Xamarin
Example used: adamped/CameraXF
Following piece of code works fine in emulator. On device, it takes up the space of an image but image doesn't load. Any leads?
private async void CameraButton_Clicked(object sender, EventArgs e)
{
var photo = await Plugin.Media.CrossMedia.Current.TakePhotoAsync(new Plugin.Media.Abstractions.StoreCameraMediaOptions() { });
if (photo != null)
PhotoImage.Source = ImageSource.FromStream(() => { return photo.GetStream(); });
}
I would recommend you to use the CachedImage class from FFImageLoading. I have encountered this problem in lower-end devices and using CachedImage fixes it.
Here is the repo : https://github.com/luberda-molinet/FFImageLoading
Docs : https://github.com/luberda-molinet/FFImageLoading/wiki/Xamarin.Forms-API
Here is the xaml sample.
<ffimageloading:CachedImage HorizontalOptions="Center" VerticalOptions="Center"
WidthRequest="300" HeightRequest="300"
DownsampleToViewSize="true"
Source = "http://loremflickr.com/600/600/nature?filename=simple.jpg">
</ffimageloading:CachedImage>
Dont forget to set the DownsampleToViewSize="true".
This should solve your issue.

pass data from viewmodel to code behind windows phone

I was trying to use the MVVM pattern on my first (very simple) WP7 app but I got seriously stuck and now I am just trying to get it working without caring about MVVM.
I have a MainViewModel for my MainPage, which works fine. I have a button that passes some data and navigates to a "details page." I had setup a navigation service to navigate to the details page and pass parameters, which works fine. I just couldn't get the databinding to the view working. Since it is a simple app, I decided I would pass the data from the DetailsPageVieModel.cs to the DetailsPage.xaml.cs code behind and do the work there. Here is what that veiw model portion looks like.
public override void Initialize(IDictionary<string, string> parameters)
{
DetailsPage dp = new DetailsPage();
//DetailsPage dp = Application.Current.RootVisual as DetailsPage;
base.Initialize(parameters);
parameters.TryGetValue("url", out vidUrl);
dp.LoadVideoData(vidUrl);
}
In my DetailsPage.xaml.cs I have the following:
public void LoadVideoData(string url)
{
HtmlWeb doc = new HtmlWeb();
doc.LoadAsync("http://mydomain.com/video.php?url=" + url);
doc.LoadCompleted += doc_LoadCompleted;
}
private void doc_LoadCompleted(object sender, HtmlDocumentLoadCompleted e)
{
this.vidTitle.Text = e.Document.GetElementbyId("title").InnerText;
vidId = e.Document.GetElementbyId("youtubeId").InnerText;
this.vidUrl.Source = new Uri("http://mydomain.com/video.php?url=" + vidUrl, UriKind.Absolute);
BitmapImage bi = new BitmapImage();
using (IsolatedStorageFile myIsolatedStorage = IsolatedStorageFile.GetUserStoreForApplication())
{
using (IsolatedStorageFileStream fileStream = myIsolatedStorage.OpenFile("temp.jpg", FileMode.Open, FileAccess.Read))
{
bi.SetSource(fileStream);
this.vidImg.Height = bi.PixelHeight;
this.vidImg.Width = bi.PixelWidth;
}
}
this.vidImg.Source = bi;
}
And here is the relevant DetailsPage.xaml code
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<StackPanel>
<TextBlock x:Name="vidTitle" Canvas.ZIndex="99" />
<TextBlock Canvas.ZIndex="99" Text="Tap on the image to view the video." FontSize="14" Margin="0"/>
<Button Margin="0 -50" Padding="0" BorderThickness="0">
<Image x:Name="vidImg" Height="225" />
</Button>
<StackPanel Canvas.ZIndex="99" Height="516">
<phone:WebBrowser x:Name="vidUrl" IsScriptEnabled="True" Height="516" Margin="0"/>
</StackPanel>
</StackPanel>
</Grid>
I am guessing the problem lies with the following
DetailsPage dp = new DetailsPage();
//DetailsPage dp = Application.Current.RootVisual as DetailsPage;
Neither of these lines of code works. The first line executes properly but the page doesn't get updated with the proper data. And the second line gives me a runtime error message when it gets to the dp.LoadVideoData(vidUrl); line.
This is my first Windows Phone app and I would appreciate any help anyone can provide.
Kamal
After digging around some more, I found the following solution.
DetailsPage currentPage = (App.Current as App).RootFrame.Content as DetailsPage;
I put this code in DetailsPageViewModel.cs. But for other newbies like me, there is nothing special about the name of the file. It could have very well been Monkey.cs. The above code just gives you access to the code behind of the current page being displayed.

How to create a small Windows Phone 7 app with click event

I am a newbie in windows phone app and need to create a small Windows Phone 7 app. The app will perform the following task
App Screen has an image "image1' ,when i press on 'image1' it will shows a second image 'image2'
When I press on image2 it will shows image1 and so on
My XAML code
<Button Click="Button_Click">
<Image Source="resourse/image1.jpg"/>
</Button>
C# code
namespace Test
{
public partial class MainPage : PhoneApplicationPage
{
public MainPage()
{
InitializeComponent();
}
private void Button_Click(object sender, RoutedEventArgs e)
{
// here will shows the 'image2' and also give click event to turn 'image1'
}
}
}
Please help
I would tackle this by having a couple of images in your XAML:
<Button Click="Button_Click">
<Grid>
<Image x:Name="imageOne" Source="resourse/image1.jpg"/>
<Image x:Name="imageTwo" Source="resourse/image2.jpg"
Visibility="Collapsed"/>
</Grid>
</Button>
The use of x:Name causes visual studio to generate a field for each image. The second image is 'collapsed', i.e. hidden.
You click handler then does the following:
private void Button_Click(object sender, RoutedEventArgs e)
{
if (imageOne.Visisbility == Visibility.Visible)
{
imageOne.Visisbility = Visibility.Collapsed
imageTwo.Visisbility = Visibility.Visible
}
else
{
imageOne.Visisbility = Visibility.Visible
imageTwo.Visisbility = Visibility.Collapsed
}
}
On each click it toggled the visibility of each image.
This is easier than changing the Source of the image, which involves URIs etc...

How to swap images based on the current theme WP7

I've failed certification because I have an image that's all white. So when a user switches to the light theme it fails because you can't see it. How do I swap this imaged based on the theme applied?
Thank you in advance
Question Making an image control invert its colors depending on theme has a simple XAML only answer:
<Image HorizontalAlignment="Center"Stretch="None" Visibility="{StaticResource PhoneLightThemeVisibility}" Source="/MyApplication;component/imageDarkTheme.png" />
<Image HorizontalAlignment="Center" Stretch="None" Visibility="{StaticResource PhoneDarkThemeVisibility}"Source="/MyApplication;component/imageLightTheme.png" />
In XAML
<Image Source="{Binding ImageSource}" />
In the view model that contains property ImageSource
public string ImageSource
{
get
{
if( (Visibility)App.Current.Resources["PhoneDarkThemeVisibility"]
== Visibility.Visible ) {
return "/path/to/dark/image.png";
} else {
return "/path/to/light/image.png";
}
}
private set {}
}
This may not change the picture if the user tombstones your app, changes the theme and switches back to the app.
One way to handle that scenario is to cache the current theme setting in the App class constructor, then compare it with the current setting within App.Application_Activated, if they're different you'll need to somehow indicate that the above view model needs to fire a property changed notification for ImageSource.
For anyone following my comments above - I had to switch from ImageBrush to Image directly (xaml below)
<Button Tag="{Binding}" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="-10,20,0,0" BorderThickness="0" Width="105" Height="102" Click="ShowKioskOnMap_Click">
<Image Source="../images/arrow.png" Width="55" Height="53" ImageOpened="Image_ImageOpened"/>
</Button>
Next in the consructor of the page I'm using --I did the theme lookup to prevent any issues when the app state is restored from taking a phone call for instance (or just loading up the view for the first time)
InitializeComponent();
theme = ""; //field level var (could make it dark by default if needed)
if ((Visibility)App.Current.Resources["PhoneDarkThemeVisibility"] == Visibility.Visible)
{
theme = "dark";
}
else
{
theme = "light";
}
And I had to implement the following in my open event to switch based on theme
private void Image_ImageOpened(object sender, RoutedEventArgs e)
{
var brush = (sender as Image);
if (brush.Stretch == Stretch.Uniform)
{
if (theme == "light")
brush.Source = new BitmapImage(new Uri("../images/arrowLight.png", UriKind.Relative));
brush.Stretch = Stretch.Fill;
}
}

Windows Phone 7 Back button and application Tombstone?

In my application i had done this to map my uri in app.xaml.cs, now the thing is if my application deactivates my application exits on MainPage.xaml rather than Eula.xaml. Else the app exits on the same page on which it starts.
In App.xaml
<UriMapper:UriMapper x:Name="mapper">
<UriMapper:UriMapping Uri="/MainPageOrEULA.xaml"/>
</UriMapper:UriMapper>
and in App.xaml.cs
// Get the UriMapper from the app.xaml resources, and assign it to the root frame
UriMapper mapper = Resources["mapper"] as UriMapper;
RootFrame.UriMapper = mapper;
// Update the mapper as appropriate
IsolatedStorageFile isoStorage = IsolatedStorageFile.GetUserStoreForApplication();
if (isoStorage.FileExists("DataBase/MyPhoneNumber.txt"))
{
mapper.UriMappings[0].MappedUri = new Uri("/MainPage.xaml", UriKind.Relative);
}
else
{
mapper.UriMappings[0].MappedUri = new Uri("/EULA.xaml", UriKind.Relative);
}
Please guide me for the same.
Regards,
Panache.
I suggest that rather than having a whole separate page (which interrupts navigation as you've noticed), just put a grid or usercontrol containing the EULA on the front page that isn't visible. When the user first opens the page, you show the grid/usercontrol, but on subsequent runs, you don't.
<Grid x:Name="LayoutRoot">
<Grid Name="EULA" Visibility="Collapsed" >
<TextBlock Text = "You agree ...." />
<Button Grid.Row="1" Content="I Agree" Click="AgreeClick" />
</Grid>
<Grid Name="MainGrid" >
....
Then in your code behind you can add your test to the loaded event
private void MainPageLoaded()
{
IsolatedStorageFile isoStorage = IsolatedStorageFile.GetUserStoreForApplication();
if (!isoStorage.FileExists("DataBase/MyPhoneNumber.txt"))
{
EULA.Visibility = Visibility.Visible;
MainGrid.Visibility = Visibility.Collapsed;
}
}
Then when the "I agree" button is clicked you can store the file and show the main grid
private void AgreeClick(....)
{
// Create isolated storage file
....
// Hide eula control
EULA.Visibility = Visibility.Collapsed;
MainGrid.Visibility = Visibility.Visible;
}

Resources