I have a Windows 10 (UWP) app with a few screens in a SplitView. When navigating among pages a page transition animation is shown (I added animations to the SplitView's Frame).
One page of the app is a bit different. In the left half a calendar is shown. In the right half a detail for a day is shown. When a user taps a day in the calendar (on the left), the detail is shown on the right.
When the windows is narrow or the app runs on a phone, only the calendar or the day are shown. So the users sees the calendar, taps on a day and the calendar hides (Visibility=Collapsed) and the day detail shows (Visibility=Visible). And vice versa on back key press.
The problem is that this feels awkward, because there is no animation that would look like transitioning from calendar to day.
So the question is, how to simulate a page transition animation when showing a Grid?
I took a look at the UWP sample for a master-detail scenario (my situation is basically a master-detail scenario). In the sample Microsoft has two pages instead of on, a master page with a list and a detail and a separate, duplicated, detail page. And a ton of ugly code behind for navigating depending on screen size, manipulation the back stack when windows size changes and so on. Not really an elegant solution.
Not sure about an elegant solution to simulate a navigation transition, but I wouldn't use Visibility. It doesn't play well with animations.
I'd consider using something like a Transform animation to offset the two element by one screen width. I won't simulate a navigation transition, but it'll be better than a jarring switch.
Alternatively you could simulate something like the Pivot transition when it changes tabs.
Related
I am revisiting an issue where the behaviour of our app on an Amazon Kindle does not work as expected. When using VoiceOver on an Android device it works correctly on version 5.1, 6.0, 7.0, 9.0 and 10. However, on a Kindle Fire 7 (7th generation) running Fire OS 5.6.7.0 the interaction with VoiceOver is a poor experience.
To rule out our app I have tested using the sample code from https://github.com/xamarin/xamarin-forms-samples/tree/master/Navigation/MasterDetailPage. This displays the same issue which is that the MasterDetailPage hamburger menu is unusable when VoiceView is enabled. On any Android device I can tap on any of the menu options and the screen reader highlight will be displayed correctly.
On the Kindle if you are lucky you might get a random element focused, and then drag the highlight, but this is not consistent.
So does Xamarin Forms MasterDetailPage work with Kindle VoiceView? I have tested from 4.1.0sr5 to 4.8.0 with no obvious change. If the answer is that it doesn't work then at least I know to give up trying.
So the main issue is that VoiceView navigation is not intuitive. You cannot tap on elements but you need to swipe left and swipe right to select whole words. I'm guessing this was based on the ebook controls and was kept consistent with the Fire.
So to navigate the menu you have to tap and then swipe left to navigate up and swipe right to navigate down.
There is still a bug with the MasterDetailPage in that when the Master page is shown the hamburger has focus, but swiping left moves up to the toolbar and swiping right goes down to the back button. That might be possible to work around by unselecting the icon after it has been pressed - something to look at.
For a really good example of how painful VoiceView is do the following
Start the Silk Browser
Do a search so that the browser has a list of pages to click
Enable VoiceView
Attempt to select a link.
Once VoiceView is enabled the only way is to swipe left/right every linked element on the page which is not pleasant at all.
I have an app which has navigation bar at the bottom. I'd like to keep that part of the page static - it would be 'base' for all other pages. I could add the exact same part of the code to every xaml page, however, I feel like initializing navigation bar on each page is waste of resources and time.
To make it more clear, below is an image of Facebook app (iPhone), pretty much same UI on Windows 10. Red bordered part of the UI never changes no matter what page you move to. For those using Facebook app you know that when you slide left/right only content in the middle (without red border) changes and slide animation is applied only to that part of the page.
That is basically what I'd like to achieve. Static part of the code that will initialize only once, stay visible on all pages, and no animations or page transitions would apply to it while switching between pages. I've been reading documentation and have not found any helpful information on how to achieve that.
You can easily implement this by creating a page with the shared controls and a ContentControl object, which will be responsible of showing the actual page content.
The ContentControl represents a control with a single piece of content of any type; which means you can put, for example; a UserControl inside of it, even a Page.
That being said, keep in mind that by doing so; you will lose the Frame functionality and will need to handle many things on your own, such as the navigation stack and back button functionality.
I'll leave you this question on SO which can be of help in your case.
I'm working with a Windows Forms Application (.net/c#)
Using MetroFramework. Home page contains some MetroTiles. I need to focus on first tile when I launch Home page.
I Can do this focus is working fine. but it could show any indication for selected/focused tile at all. I could not find any properties.
In above image back Tile is selected now. but could not identify this as user and when I press 'enter' BACK button functionality is working fine. Same for other tiles also. Please help.
There is no property, but you can use the 'selected' event to change something yourself, like a slightly changed color or drawing a thin line around it.
As far as I know Metro still hasn't a built in a functionality for this case.
So try to use the workaround if possible.
I have an app where you could go through in views like;
play -> normal or custom -> select map -> summary -> start
I would like to make a shortcut option from play to summary, but I also want navigation back to select map page with the back button functionality.
So the normal workflow p->noc->sm->summary but I want to implement p->sm with the noc<-sm<-summary back functionality too (with the windows phone back button).
I saw how can I delete items from the backstack, but google not helped me how can I navigate through a couple of windows without showing that to the user.
Am I need to override the back button or there is a "better" way to do that?
It's a WP8 project.
Edit:
I didnt need the exact codesnippet for this just a design concept in this patform. (just for the is it duplicated guy)
My normal or custom and select map page should be randomized when I do the shortcut, both of these pages has a "button" which can randomize those settings, I just want a swipe->press->swipe->press->swipe actions shortened to a button press without loosing the 'post modification after randomized' feature.
After I read your comments I think I will handle the back button all of the mentioned views so the backstack will not be getting inconsistent at any state. If I understand well I can tell it in every page what is the "backed" page.
You can't inject pages into the backstack. You can override the back button and do a forward navigation with the animations you would normally do when going backward (and then remove the page you just came from off the stack), but honestly, this all gets complicated and for good reason. One of the few hard truths of Windows Phone design is that you shouldn't mess with the backstack.
Instead, I would rethink your flow. It seems like your second page is a setting of some sort (Normal or Custom). If that is changeable, maybe make a button that can float a modal popup on top of the page and move things around according to the new decision.
Looking again at your flow, it seems like several of the pages may be settings. Can you combine those into one page, maybe on a pivot or panorama? That way making changes is just a swipe away.
Regardless, while it is possible to do what you are looking to achieve, I would look long and hard at whether it is actually the best experience for your users.
I have app layout with several GridViews, now the navigation between GridViews is done using TAB key, and you navigate inside each GridViews with arrows. What I would like to do, is: when I'm on the marginal element of one GridView, to press an arrow key to go to other GridView.
This is 100% possible, but requires 100% code. And if your grid item quantity is dynamic then the logic is that much more complex. But to your point, I know of apps that do this. Every one of them rolled their own solution to detect keyboard arrows and calc based on selected item in the grid.
It's why we are developers, right? Solving problems with code!
Best of luck!