I have a Windows 8.1 XAML app where I'd like to preload images before navigating between pages.
The naive code I have now is:
// Page1.xaml.cs
private void Button_Click(object sender, RoutedEventArgs e)
{
Frame.Navigate(typeof(Page2));
}
And on the second page:
// Page2.xaml.cs
this.image1.Source = new BitmapImage(new Uri("ms-appx:///Assets/image1.jpg"));
this.image2.Source = new BitmapImage(new Uri("ms-appx:///Assets/image2.jpg"));
Now, when I click the button to navigate, I can see the images being loaded and showing up one at the time. I would like to pre-load the images on the button click and only navigate after the images have been loaded.
Unfortunately, just creating the BitmapImage objects and waiting for the ImageOpened events doesn't work. It appears that the images aren't loaded if they aren't rendered to the screen.
Is there a way to force loading of the images from code without adding them to the visual tree?
(Note: a workaround would be to actually add all the images to the Window in some invisible way, but I'd like to avoid that if at all possible)
Final solution:
This is what I've come up with using SetSourceAsync, as suggested by Filip Skakun:
// Page1.xaml.cs
private async void Button_Click(object sender, RoutedEventArgs e)
{
bitmapImage1 = new BitmapImage();
bitmapImage2 = new BitmapImage();
// Load both images in parallel
var task1 = loadImageAsync(bitmapImage1, "image1.jpg");
var task2 = loadImageAsync(bitmapImage2, "image2.jpg");
await Task.WhenAll(task1, task2);
Frame.Navigate(typeof(Page2));
}
private Task loadImageAsync(BitmapImage bitmapImage, string path)
{
var filePath = ApplicationData.Current.LocalFolder.Path + "\\" + path;
var file = await StorageFile.GetFileFromPathAsync(filePath);
var stream = await file.OpenAsync(FileAccessMode.Read);
await bitmapImage.SetSourceAsync(stream);
}
// Page2.xaml.cs
this.image1.Source = bitmapImage1;
this.image2.Source = bitmapImage2;
WinRT XAML Toolkit's AlternativeFrame control and AlternativePage one have a ShouldWaitForImagesToLoad property that when you set to true and navigate to a page - will only display the page when the images have loaded. AlternativePage has a Preload() method you can also override to add more things to await before displaying the page. The way it is implemented though is the page is first added to an invisible container in the visual tree, so loading of those BitmapImages gets triggered.
Another option might be to use SetSourceAsync() which you can await and I think it starts loading before you use the BitmapImage in the UI, but then you need to download the file yourself.
Related
In Windows 10, when I hit e.g. SHIFT + WIN + S I can take a screenshot of my screen.
In other cases I have my webcam that can take a picture, and so on.
All those scenarios have the feature to "Share" the captured image to another app, e.g. Mail, OneNote, etc.
I would like to register my own UWP app to be the recipient of such Share, so that the user can manipulate the captured image in my UWP app.
Is there a way to configure my UWP app to do this?
Is there a way to configure my UWP app to do this?
Yes, you could make your UWP app a receiver when you want to share some content from other apps.
Declare your app as a share target. Open the manifest file. Find the Declarations tab, then choose Share Target from the Available Declarations list, and then select Add.
Set the file types and formats based on your requirements in the Declarations. For example, if you need to receive a screenshot, you will need to add Bitmap in the Data format.
Handle share activation in the App.Xaml.cs by handling the Application.OnShareTargetActivated event.
I've made a simple test about this and you could refer to it. For more information about this, you could also check this document: Receive data
Manifest file:
App.xaml.cs:
protected override async void OnShareTargetActivated(ShareTargetActivatedEventArgs args)
{
ShareOperation shareOperation = args.ShareOperation;
if (shareOperation.Data.Contains(StandardDataFormats.Bitmap))
{
var imageStream = await shareOperation.Data.GetBitmapAsync();
Frame rootFrame = Window.Current.Content as Frame;
if (rootFrame == null)
{
// Create a Frame to act as the navigation context and navigate to the first page
rootFrame = new Frame();
Window.Current.Content = rootFrame;
}
rootFrame.Navigate(typeof(ShareImagePage), imageStream);
Window.Current.Activate();
}
}
ShareImagePage:
protected async override void OnNavigatedTo(NavigationEventArgs e)
{
if (e.Content != null)
{
IRandomAccessStreamReference imageReceived = null;
imageReceived = e.Parameter as IRandomAccessStreamReference;
using (var imageStream = await imageReceived.OpenReadAsync())
{
var bitmapImage = new BitmapImage();
bitmapImage.SetSource(imageStream);
imgImage.Source = bitmapImage;
}
}
}
So I have a bit of a weird problem.
I've implemented a camera preview class (largely following this code here: https://learn.microsoft.com/en-us/samples/xamarin/xamarin-forms-samples/customrenderers-view/) but have added a button at the bottom to take a picture. This involves the use of both some xamarin forms code and some xamarin android code.
However, the CapturePage is only put on the stack when the user announces that they want to take a photo, and after the photo has been taken, I want to pop the Capture page to go back to the main screen. Currently, I have a static boolean value in the overall project that is changed from false to true when a capture has occurred. Is there some way to get my code in Main.xaml.cs to wait on this value changing, then pop whatever is on top of the navigation stack? Is this a use for a property changed? See code below:
The code in Project.Droid that handles the capturing and saving of the image:
void OnCapButtonClicked(object sender, EventArgs e)
{
// capButton.capture is an instance of Android.Hardware.Camera
capButton.capture.TakePicture(null, null, this);
// stop the preview when the capture happens
CameraInfoContainer.isPreviewing = false;
}
public void OnPictureTaken(byte[] data, Camera camera)
{
var filepath = string.Empty;
var clientInstanceId = Guid.NewGuid().ToString();
var saveLoc = Android.OS.Environment.GetExternalStoragePublicDirectory(Android.OS.Environment.DirectoryPictures);
filepath = System.IO.Path.Combine(saveLoc.AbsolutePath, clientInstanceId + ".jpg");
try
{
System.IO.File.WriteAllBytes(filepath, data);
//mediascan adds the saved image into the gallery
var mediaScanIntent = new Intent(Intent.ActionMediaScannerScanFile);
mediaScanIntent.SetData(Android.Net.Uri.FromFile(new File(filepath)));
Forms.Context.SendBroadcast(mediaScanIntent);
}
catch (Exception e)
{
System.Console.WriteLine(e.ToString());
}
// CameraInfoContainer is a static class in Project NOT in Project.Droid
CameraInfoContainer.savedCapture = filepath;
CameraInfoContainer.capType = CaptureType.Photo;
CameraInfoContainer.captureComplete = true; // here is where I set the value (in Project)
}
Now the code in Project that pushes the capture page on the stack and that I want to trigger when the capture has happened:
// this method puts the capture page on the stack and starts the whole process
private async Task ExecuteNewCapture()
{
var cp = new CapturePage();
var np = new NavigationPage(cp);
await Navigation.PushModalAsync(np, true);
}
// this is the method that I want to trigger when a photo is taken (in Project/Main.xaml.cs)
private async Task Complete(string fileLoc)
{
await Navigation.PopModalAsync();
}
Answer is in a comment from Junior Jiang. Ended up using Xamarin.Forms.MessagingCenter to get done what I needed.
I'm developing a quick application with the sole purpose of using picture-in-picture mode (compact view) in UWP to display Youtube videos over top of my work. Here's the way the current system works:
MainPage - Handles searching of youtube videos
YoutubeItem - A usercontrol that the mainpage creates for each youtube result. Approximately 50 of these are put into a wrap panel.
YoutubeViewer - A seperate page that runs in it's own window and displays the youtube video.
Here's my issue. I store all the information for the youtube video in each of the YoutubeItems. Using a button, I record the click event and handle it. Here's the code for handling the click:
private async void Button_Click(object sender, RoutedEventArgs e)
{
CoreApplicationView newView = CoreApplication.CreateNewView();
int newViewId = 0;
await newView.Dispatcher.RunAsync(CoreDispatcherPriority.Normal, () =>
{
Frame frame = new Frame();
frame.Navigate(typeof(YoutubeViewer), null);
Window.Current.Content = frame;
// You have to activate the window in order to show it later.
Window.Current.Activate();
newViewId = ApplicationView.GetForCurrentView().Id;
});
bool viewShown = await ApplicationViewSwitcher.TryShowAsStandaloneAsync(newViewId);
}
The problem arises when I have to send the link for the video to the YoutubeViewer. Originally, I was doing this through a constructor but upon using this method for the Windows Documentation, I am unable to use my own constructor from my knowledge. How would you folks recommend getting the link to the new window?
There are many ways.
the simplest, though not necessarily the most elegant, is to create a new class that inherits from Frameand add to it a property for the link. Something like this:
public class FooFrame: Frame
{
public string Link;
}
then in your code assign it upon initializing the frame:
FooFrame frame = new FooFrame(){Link = "youtube.link.com"}
How to upload or add an Image to UIImageView directly from iPhone/Ipad Captured camera Image.
I have uploaded an image to UIImageView from photo library.
Now, I want upload an image directly after taken an image through camera to ImageView.
Please suggest me how to implement this.
using IOS 8.0
This can be accomplished very easily with the Xamarin.Mobile component, which is free and works with all platforms.
http://components.xamarin.com/view/xamarin.mobile
From the example they give:
using Xamarin.Media;
// ...
var picker = new MediaPicker ();
if (!picker.IsCameraAvailable)
Console.WriteLine ("No camera!");
else {
try {
MediaFile file = await picker.TakePhotoAsync (new StoreCameraMediaOptions {
Name = "test.jpg",
Directory = "MediaPickerSample"
});
Console.WriteLine (file.Path);
} catch (OperationCanceledException) {
Console.WriteLine ("Canceled");
}
}
After you take the picture, it is saved to the directory you specified, with the name you specified. To easily retrieve this picture and display it with your ImageView using the above example you can do the following:
//file is declared above as type MediaFile
UIImage image = new UIImage(file.Path);
//Fill in with whatever your ImageView is
yourImageView.Image = image;
Edit:
Just a note that the above needs to be asynchronous. So if you want to launch the camera from a button call, for instance, you just slightly modify the .TouchUpInside event:
exampleButton.TouchUpInside += async (object sender, EventArgs e) => {
//Code from above goes in here, make sure you have async after the +=
};
Otherwise you could wrap the code from above in a function and add async to that:
public async void CaptureImage()
{
//Code from above goes here
}
You will need to use AVFoundation to do this. Check out the AVCam sample project in Xcode:
https://developer.apple.com/library/ios/samplecode/AVCam/Introduction/Intro.html
I am building an app for WP8, and the MainPage.xaml takes a couple of seconds to load.
I want to add an animated Splash Screen, so here's what I did:
I created a new, and set it as the default navigation page
I put a StoryBoard animation in the page, with nothing else around, so that it loads fast
Now if I try to navigate to the main page from this page, it takes a couple of seconds becouse it has to load all the content as always.
A user here on stackoverflow wrote a sample of code to do something like this, saying that if you create a new instance of the page before navigating to it, it will cause the page to actually preload, making the navigation really fast.
Here's his code:
private void OnLoaded(object sender, RoutedEventArgs routedEventArgs)
{
var sb = new Storyboard();
// create your animation here
sb.Completed += (sender, args) => PreLoad();
sb.Begin();
}
private void PreLoad()
{
// this is the part that actually takes time and causes things to get loaded
// you may need it in a try/catch block depending on what is in your constructor
var page = new PageToNavigateTo();
// now create an animation at the end of which we navigate away
var sbOut = new Storyboard();
// create your animation here
sbOut.Completed += (sender, args) => NavigateToNextScreen();
sbOut.Begin();
}
private void NavigateToNextScreen()
{
// navigate here
}
protected override void OnNavigatedFrom(System.Windows.Navigation.NavigationEventArgs e)
{
base.OnNavigatedFrom(e);
// remove the loading screen from the backstack so the user doesn't see it again when hitting the back button
NavigationService.RemoveBackEntry();
}
I just don't understand what he means with the line:
var page = new PageToNavigateTo();
What am I supposed to do there? I mean, which method do I have to call to create a new instance of the page I want to navigate to?
Also, inside the NavigateToNextScreen() method, do I have to use the usual
NavigationService.Navigate(new Uri("/CreditiInfo.xaml", UriKind.Relative));
or something else?
Could you help me completing this code? :)
Thank you!
Sergio
I would suggest that 'PageToNavigateTo()' should be the page constructor for the name of your next page. So in your case you would have:
var page = new MainPage();
For the navigation. That is the only way, that I know of navigating between pages on a Windows Phone 8 application.