Windows Phone Navigation transitions delay and blank screen in between - c#

I'm using WP Toolkit to do the transitions between my app pages, it works fine , but I get this strange delay in between transitions while navigating from one page to another, it just shows a blank screen which obviously doesn't look good, without any transition it opens the page straight away without any delay or blank screen. This has taken almost 2 days of my time and I don't know what's wrong, I'd appreciate it if someone can help me with it or suggest another page transition library .
(I tried WP7Contrib transitions but I have the same problem with that, not sure if its my app or the libraries)

In fact the background between transitions is black and to avoid that kind of behavior I solved the issue by setting the background in the App.Xaml.cs
private void InitializePhoneApplication()
{
if (phoneApplicationInitialized)
return;
// Create the frame but don't set it as RootVisual yet; this allows the splash
// screen to remain active until the application is ready to render.
RootFrame = new TransitionFrame();
var brush = new ImageBrush
{
ImageSource = new System.Windows.Media.Imaging.BitmapImage(new Uri("Images/Background.jpg", UriKind.Relative)),
Opacity = 0.8d
};
RootFrame.Background = brush;
RootFrame.Navigated += CompleteInitializePhoneApplication;
// Handle navigation failures
RootFrame.NavigationFailed += RootFrame_NavigationFailed;
// Ensure we don't initialize again
phoneApplicationInitialized = true;
}
With that all my pages have my background and the black background is no longer displayed during the transition.

I would suggest you to create your own slide transitions between pages. Its quite simple actually. Create a storyboard and play them at onNavigatingFrom and onNavigatedTo functions in both the page you are navigating from and page you are going into respectively. It just gives me what and how i wanted in my applications. Removing additional references makes your code more optimized.

Related

How do I Focus a Camera in Windows Universal Apps?

I am working with the Windows Universal Sample for OCR located here:
https://github.com/Microsoft/Windows-universal-samples/tree/master/Samples/OCR/cs
Specifically the OcrCapturedImage.xaml.cs
It seems that the camera often becomes unfocused, blurry, and nowhere near as good quality as the native camera app. How can I set up autofocusing and/or tap to fix exposure?
What I have tried so far is looking at the other camera samples which help set resolution, but I cannot find anything about focus/exposure.
Update:
I think
await mediaCapture.VideoDeviceController.FocusControl.FocusAsync();
and
await mediaCapture.VideoDeviceController.ExposureControl.SetAutoAsync(true);
But this isn't working (does nothing-still blurry etc.) and could be built upon if someone knows how to tap a certain area and apply focus/exposure accordingly.
Native Camera:
App Camera:
Update based on answer:
I must have been putting my focus methods in the wrong spot because my original update code works. Sergi's also works. I want to used the tapped event in combination with it, something like this:
Point tapped=e.GetPosition(null); //Where e is TappedRoutedEventArgs from a tapped event method on my preview screen
await mediaCapture.VideoDeviceController.RegionsOfInterestControl.ClearRegionsAsync();
await mediaCapture.VideoDeviceController.RegionsOfInterestControl.SetRegionsAsync(new[] { new RegionOfInterest() { Bounds = new Rect(tapped.X, tapped.Y, 0.02, 0.02) } }); //Throws Parameter Incorrect
But it throws parameter incorrect. Also, How would I show the overlay a Rectangle on the preview screen, so the user knows how big the region of interest is?
This is a great link https://github.com/Microsoft/Windows-universal-samples/blob/master/Samples/CameraManualControls/cs/MainPage.Focus.xaml.cs
Configuration of the auto focus using the Configure method of the FocusControl class.
mediaCapture.VideoDeviceController.FocusControl.Configure(
new FocusSettings { Mode = FocusMode.Auto });
await mediaCapture.VideoDeviceController.FocusControl.FocusAsync();
In order to focus on a certain area, the RegionOfInterestControl propery can be used. It has the SetRegionsAsync method to add a collection of RegionOfInterest instances. RegionOfInterest has the Bounds property which defines the region of focus. This example shows how to set the focus in the center:
// clear previous regions of interest
await mediaCapture.VideoDeviceController.RegionOfInterestControl.ClearRegionsAsync();
// focus in the center of the screen
await mediaCapture.VideoDeviceController.RegionOfInterestControl.SetRegionsAsync(
new []
{
new RegionOfInterest() {Bounds = new Rect(0.49,0.49,0.02,0.02) }
});

WP8 Change the color behind the application bar

I am writing a WP8 app that overrides the color theme on the phone to always be white. Now before people discredit me for this decision, the app itself is supposed to be a messenger like application and the white background simply makes everything easier to read. In the future I do want to allow people to be able to choose between black or white in case battery life is important but I need to get over this hurdle first.
Currently the problem is that even after overriding the theme colors the color BEHIND the application bar still refuses to change. I'm not talking about the background color of the application bar but the rectangle drawn behind the application bar as it is animated to pop upwards from the bottom of the screen. It is very visible and it is quiet annoying even if it only appears for about a second.
I know there must be a way to do this as applications like Office, Google Mail and Skype all override the color theme and implement the white theme instead and they do not have this same problem.
If anyone could help that would be great!
I've found a solution but it's not a very nice one. If anyone finds a better solution please let me know.
I solved this problem by setting the application bar opacity to be near 1 but not 1 (I set it to 0.99). This will tell windows to not rescale the window (which is the cause of the black background).
I then set the bottom margin of that page to be the height of the application bar.
Here's the code for anyone interested:
private void panoramaMain_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
Panorama p = (Panorama) sender;
if(p.SelectedIndex == 1) {
messageList.Margin = new Thickness(0, 0, 0, ApplicationBar.DefaultSize);
ApplicationBar.IsVisible = true;
} else {
messageList.Margin = new Thickness(0, 0, 0, 0);
ApplicationBar.IsVisible = false;
}
}

Windows 8 app XNA on two monitors with different resolutions

I'm using Monogame to write an XNA game for Windows 8 app store. I'm also using a laptop hooked up to an external monitor. Naturally the resolution on my external monitor is much higher than my laptop's screen. When I drag the app from one screen to another the resolution on the view port changes.
In my constructor I'm using
_graphics = new GraphicsDeviceManager(this);
_graphics.PreferredBackBufferHeight = 768;
_graphics.PreferredBackBufferWidth = 1366;
To set my viewport resolution. This makes the app to work fine when the application runs on either monitors, however dragging the app from one monitor to another changes the resolution on the GraphicsDeviceManager. Is there anyway to prevent this change?
So I figured it out
First I wrote a method that checks to see if the port resolution on the graphic device has changed
private bool hasResolutionChanegd()
{
if ((GraphicsDevice.Viewport.Width != ScreenManager.Instance.ScreenWidth) || (GraphicsDevice.Viewport.Height != ScreenManager.Instance.ScreenHeight))
{
return true;
}
else
{
return false;
}
}
I call this method on every update
if (hasResolutionChanegd())
{
Debug.WriteLine("Resolution Change new width= " + GraphicsDevice.Viewport.Width +" new height="+ GraphicsDevice.Viewport.Height);
_graphics.PreferredBackBufferHeight = 768;
_graphics.PreferredBackBufferWidth = 1366;
_graphics.ApplyChanges();
}
This way every time the resolution changes on the Graphic Device Manager (when the user drags the app from one screen environment to another), the preferred resolution is enforced.
I get the same thing as the original poster, but with XNA, not MonoGame. When I drag the window between the two monitors, the resolution changes, but the ClientSizeChanged event is not (of course) triggered. The suggestion above to use the SizeChanged event is helpful but only for Windows8 the documentation says.
I appear to have fixed it by handling the Window.ScreenDeviceNameChanged event - I hooked it up to the same handler as the ClientSizeChanged.
I would have put this in as a comment to the original post, but I don't have enough "reputation" points for the system to let me.

Drawing things on a Canvas

How would I draw something on a Canvas in C# for Windows Phone?
Okay, let me be a little more clear.
Say the user taps his finger down at 386,43 on the canvas. (the canvas is 768 by 480)
I would like my application to be able to respond by placing a red dot at 386,43 on the canvas.
I have no prior experience with Canvas whatsoever.
If this is too complex to be answered in one question (which it probably is), please give me links to other websites with Canvas and Drawing articles.
There are various ways of doing this. Depending on the nature of the red dot, you could make it a UserControl. For a basic circle, you can simply handle your canvas' ManipulationStarted event.
private void myCanvas_ManipulationStarted(object sender, ManipulationStartedEventArgs e)
{
Ellipse el = new Ellipse();
el.Width = 10;
el.Height = 10;
el.Fill = new SolidColorBrush(Colors.Red);
Canvas.SetLeft(el, e.ManipulationOrigin.X);
Canvas.SetTop(el, e.ManipulationOrigin.Y);
myCanvas.Children.Add(el);
}
I think you need to approach the problem differently. (I'm not including code on purpose, because of that).
Forms and controls in an Windows applications (including Phone) can be refreshed for several reasons, at any time. If you draw on a canvas in response to a touch action, you have an updated canvas until the next refresh. If a refresh occurs the canvas repaints itself, you end up with a blank canvas.
I have no idea what your end goal is, but you likely want to either keep track of what the user has done and store that state somewhere and show it in a canvas on the repaint of the canvas. This could be done with storing all the actions and "replaying" them on the canvas, or simply storing the view of the canvas as a bitmap and reload the canvas with that bitmap when refreshed. But, in the later case I think using a canvas isn't the right solution.

Resizing a grid control programatically over a period of time

G'day,
I am attempting to simulate the old XBox 360 GUI with the sliding tabs (Remember, you'd press left or right and the content would slide in depending on the tab?) Anyways, at the moment, I have this working well, however I cannot get the "animation" working.
When the user presses left arrow or right arrow, my OpenWindow(int iIndex) method will be called, where iIndex is the index to the next or previous "window" to be slid in. (Not a window... each "Window" is a struct with a parent grid control containing a button and a smaller grid control that contains the windows contents.)
Now, my problem lies with resizing the parent grid control. When it is slid in, it is resized by calling mygrid.Width += 1; That works, but I don't see it happen over a determined period of time, it just lags a bit and then resizes to the required width. Whereas if I call this.Width += 1 in the same method, (this being the main program window) the window resizes how I want the grid control to resize. I've tried UpdateLayout() but to no avail. This tells me my timing is okay.
If anyone could be of assistance, it would be greatly appreciated.
Here is my OpenWindow method...
public void OpenWindow(int iIndex)
{
int iInterval = 1;
for (int i = (int)myDict[iIndex].Shell.Width; i < (int)stack_outter.Width; i += iInterval)
{
myDict[iIndex].Shell.Width += 1;
myDict[iIndex].Shell.UpdateLayout();
System.Threading.Thread.Sleep(1);
}
myDict[iIndex].Shell.Width = stack_outter.Width - (BUTTON_WIDTH * (myDict.Count - 1));
}
myDict is a Dictionary, Shell is the grid that I am attempting to animate when resizing. Sorry about the code, it's messy, my code is always hacked when I am trying to get stuff working :)
Thanks,
Ash
Neried Web Solutions
Your OpenWindow method is happening on the Dispatcher thread. That's also the thread responsible for rendering, so as long as your OpenWindow method doesn't return, nothing gets rendered.
The proper way to fix this would be to animate the Width property. I don't have any experience in starting animations from code (I've only used them in the past for things like a fade-in button highlight on mouse over, which is more easily done from WPF), but I took a quick read-through this page, Animation Overview on MSDN, and I think you'll want something like this:
DoubleAnimation myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.From = myDict[iIndex].Shell.Width;
myDoubleAnimation.To = stack_outter.Width;
myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(0.5));
myDoubleAnimation.AutoReverse = false;
myDoubleAnimation.RepeatBehavior = new RepeatBehavior(1.0);
myStoryboard = new Storyboard();
myStoryboard.Children.Add(myDoubleAnimation);
Storyboard.SetTarget(myDoubleAnimation, myDict[iIndex].Shell);
Storyboard.SetTargetProperty(myDoubleAnimation, new PropertyPath(FrameworkElement.WidthProperty));
myStoryboard.Begin(myDict[iIndex].Shell);

Categories

Resources