Windows 10 Apps are universal apps they can be used in any device of any form factor. Normally apps running in windows tablet will be having back button on the screen. But when it comes to windows phone there is a default hardware back button. So the developer has to check what kind of device it is and then add back button in the page based on the device. This sometimes show difference in User Interface of the app and also wastage of screen space.
The screen space can be utilized much better instead of having back buttons on the screen. Windows 10 has introduced a new feature, where the back button can be displayed in the title bar of the application so that when the user runs the app in the windows tablet, he can use the title bar’s back button to navigate back. If the app is running in windows phone then the user can use the Hardware back button to navigate back. There will not be any difference in the Applications user interface and also Screen space can be utilized better.
Related Post : Adaptive screen Sizing of your Windows 10 Universal Application
The following API lets the developer to display the back button on the title bar.
SystemNavigationManager.GetForCurrentView().AppViewBackButtonVisibility = AppViewBackButtonVisibility.Visible;
Please check whether the page has back navigation before making the back button visible.
if (Frame.CanGoBack)
{
SystemNavigationManager.GetForCurrentView().AppViewBackButtonVisibility = AppViewBackButtonVisibility.Visible;
}
else
{
SystemNavigationManager.GetForCurrentView().AppViewBackButtonVisibility = AppViewBackButtonVisibility.Collapsed;
}
So when the user clicks on the back button the page should be navigate back, in order to do that we need to subscribe for the event BackRequested
So whenever the title bar’s back button is clicked then the BackRequested event get fired.
SystemNavigationManager.GetForCurrentView().BackRequested += (source, args) =>
{
if (Frame.CanGoBack)
Frame.GoBack();
};
in windows phone when the user clicks on the hardware back button then the page should be navigated back. To do that we need to subscribe for the HardwareButtons.BackPressed event.
Before subscribing to this event we need to check whether the event is supported using the following API.
Windows.Foundation.Metadata.ApiInformation.IsTypePresent("Windows.Phone.UI.Input.HardwareButtons")
This API returns true if the Hardware buttons are available. Then the developer can subscribe for the event.
if (Windows.Foundation.Metadata.ApiInformation.IsTypePresent("Windows.Phone.UI.Input.HardwareButtons"))
{
Windows.Phone.UI.Input.HardwareButtons.BackPressed += (source, args) =>
{
if (Frame.CanGoBack)
{
e.Handled = true;
Frame.GoBack();
}
};
}
Now we can use the back button in App’s title bar in windows tablets and use hardware back button in the windows phone for back navigation.
Hope this post helps in understanding how to display and use the back button in the title bar of the app.
Pingback: Dew Drop – July 29, 2015 (#2063) | Morning Dew
Hi! Can you add the back button to an universal app made from an already existing app?
BTW I really like your blog, I’m trying to develop my first windows universal app but I’m not a programmer, so you are really helping me with your posts. I still have some questions, so I was wondering if you could help me.
What if I just use an iframe instead of removing the default.html file?
If I want to add a livetile all I need to do is to add the feed url in the URI model and choose “every 30 minutes” as recurrence?
Hi Gabriel Butoeru,
Thanks for your comments.
Yes you can add the back button to the title bar of any universal app targeting windows 10.
Yes you can use an iframe also, no problem in doing it.
Yes you can use the add the feed URL in the URI Template and choose “every 30 minutes” as recurrence this will fetch the content from the URL and update the tile. But if you want to have more control on the tile update then you can do it programmatically. For example when you have a URL which provides you list of images but if the image sizes are 1920 * 1200 then the tile will not display those images as they are very high resolution, so you have to resize the image and then add to the tile. In this case updating the tile using programmatically is more useful.
From https://msdn.microsoft.com/en-us/library/windows/apps/xaml/mt188203.aspx, it sounds like we need to listen for only one event:
“In Windows 10, the back button event is a universal concept. Back buttons implemented in hardware or in software will all raise the BackRequested event, so that’s the one to handle.”
Yes Erich, You are right. Now we don’t need to write separately for Phone and Tablet.
Pingback: How to apply custom color to the Title Bar in Windows 10 Universal Apps ?
Please upload the source code file