I'm porting a windows forms program to run on Windows Phone 7.
Part of the windows program is a wizard style series of steps with Next and Prev buttons along with Save and Cancel. The screens are generates from metadata stored in a database. Some screens are optional and are only created after certain conditions are met.
My question is - how is this best implemented in WP7?
My initial idea was to use a pivot but then I read Tim Heuer's guide to Panaroma vs Pivot where he specifically states "don’t use pivot/pano for wizard-based UI".
I have a number of ideas - I could make each screen a page (not too keen on this due to back stack issues) or I could use one page with a tab control - but am up against it time wise and can't afford to waste days heading the wrong way.
Any ideas? My WP7 app is being built using MVVM via Caliburn Micro.
I could make each screen a page (not too keen on this due to back stack issues)
The Nonlinear Navigation Service may help you with the back button.
I could use one page with a tab control
I did one wizard-like app in WPF using restyled Tab control. Was a bit messy, works well though.
You need to design it first and consider a few scenarios. What happen when user clicks the back button, starts button or someone calls the user? (when app is tombstoned and user presses back button OS brings back the last page). Is the navigation very complex (decision tree)?
Make just one page with a grid with 3 grids/stack panels inside. Place them horizontally with margins 0; 480; 960. The only one internal grid can be shown at the time. You can see an example here (I made a joke for friends :P ).
I have used stack panels with composite transform.
<StackPanel Name="questionPanel" Grid.Row="0" HorizontalAlignment="Center">
<StackPanel.RenderTransform>
<CompositeTransform TranslateX="480"></CompositeTransform>
</StackPanel.RenderTransform>
with an animation
<UserControl.Resources>
<Storyboard x:Name="centerPanelIn">
<DoubleAnimation Duration="0:0:0.3" BeginTime="0:0:0.6" To="0"
Storyboard.TargetName="centerPanel"
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)">
<DoubleAnimation.EasingFunction>
<ExponentialEase Exponent="6.0" EasingMode="EaseOut"></ExponentialEase>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
When user presses the button, Completed event is added.
private void Button_Click(object sender, RoutedEventArgs e)
{
centerPanelOut.Begin();
centerPanelOut.Completed += new EventHandler(centerPanelOut_Completed);
}
This approach has an advantage, because everything is on one page and animations give the nice UX. For more complex wizard consider making you own UserControl.
My initial thought is to not do this and redesign the process. Without a greater understanding of your situation and app though, it is hard to advise appropriately.
If you're in a hurry and really must do this I'd recommend using a single page and updating the view model to create the appearance of multiple pages.
Alternatively you could use a series of pages and the Non-Linear Navigation Service.
This may have issues with how it integrates with the rest of the application though.
Have you tried using grids and toggling their visibility using a back and next button on the app bar? The back button would then act as a cancel button.
Related
I'm experimenting with creating a metro style app with Visual Studio 2012, I am not the most experienced designer but one thing with my applications is confusing me.
I have been working with 'basic pages' instead of blank ones for the different pages in my application for design consistency, however it seems that these 'basic pages' have a strange behaviour. Every item I place on the page (buttons, text boxes, etc) will all slide in one by one when the page opens. For example if I run the application and navigate to a page with 10 buttons, it will do a brief animation where each button will slide in from the right side to the left side. When dealing with a large number of items on one page this can take a lot of time as each item slides in seperatley.
Looking at the properties for each item I have been able to change the direction it slides in while loading the page by changing the flow direction. Also with a bit of research I am thinking it could potentially be due to either the metro style 'enterPage' or 'enterContent' animations, though I can not be certain.
I have tried to experiment and figure this out, and search to find out what causes this so I can modify it (Ideally I would like to just group items together to slide in with each other) however it's kind of a difficult thing to search with vague words, so I'm asking here.
What is causing this and how might I go about modifying it?
EnterPage shouldn't be sequencing the animations. They do offset some of the animations of a number of elements, but it shouldn't be each one sequentially.
Are you using WinJS navigation?
Well after a bit of experimentation I figured out that putting all my page content inside a grid made them all come in at once like I wanted. I probably should have tried that earlier but everything was already inside an outer grid for the page, so I thought that woulda handled it.
I don't quite understand it fully, but that works for now.
I want to create a form with iOS like transitions (in a Cocoa desktop application) between the form input. For instance, the user would input information to the form and click next to continue to input the remainder of the information. On the last form, the user would click submit. Upon clicking next, the form would have an animated transition, like on the iPhone before displaying the next set of forms. Sort of like how Turbo Tax ask a ton of questions before allowing you to submit that grouped information.
What would be the best approach to achieve this goal?
This is commonly referred to as a wizard.
You basically have two options:
Use a tabless tab view, following Apple's sample code in AnimatingTabView from http://developer.apple.com/library/mac/#samplecode/Reducer/Introduction/Intro.html
Manually swap the views in and out yourself.
There are pros and cons to both approaches. Which you choose will probably depend on your requirements. One issue with Core Animation on the desktop is lack of subpixel rendering for layer-backed views. This is mostly an issue with text display but some people find it not to be an issue.
I've needed this functionality a few times. I used this tutorial to get started.
On the IPhone, the map control allows you to switch between a list mode and map mode easily. I've been trying to find examples of this for WP7 but am at a loss.
Is there a best practice for implementing a list of objects on a map?
If not, do we just do it manually, I.E. Save the dataset and display it as a listbox or something?
If you do it manually, where is the best place to put a button to switch you between the 2 screen styles? I feel like that app bar isn't right.
I don't want to copy the IPhone UI standard and have a button in the title bar, although I'm running out of options.
For one "best practice" I'd take a look at how the default Bing Maps app works - it provides a "results list" text menu item accessible from the ApplicationBar - and this is displayed via a full screen dialog (at least I think that's what it is).
However, that is only one "best practice" - I don't think their UI is perfect for all apps.
Application bar is fine, just make sure the buttons are in the same positions for each bar and that toggling views 10 times does not require pressing Back 10 times to go to the previous page, maybe use a different page transition so it doesn't feel like every other transition on the app.
Usually, when a View requires a lot of bindings, or some UI Elements like a Bing Map, it takes a "while" to load (like between half a second and a second).
I don't want a delay between a "tap" action (like tapping an element on a ListBox) and the navigation action (displaying a new page).
I don't mind displaying the page progressively. For example, for a Bing Map, I don't mind displaying a black page with only a title, and a second later, having the Map appear.
What are the best practices ? It could post a sample if i'm not clear enough
edit: I'll keep the question open for a while, so other can answer. Thanks Matt and Mick for awesome answers. I'm already working on some improvements. The major one being binding my controls after the page loaded.
It's expected on resource constrained devices that non trivial actions will take at least a little time to execute.
The most commonly recommended best practice for dealing with this is to use animations to give the user the impression of perceived performance. This has been a recurring recommendation throughout the CTP and Beta phases by the product team and in presentations at Mix 10 and Tech Ed 2010.
Page transitions are a common approach to this.
Discussed here by Kevin Marshall, prior to inclusion in the November toolkit.
WP7 – Page Transitions Sample
And here, referencing the control in the toolkit.
Transitions for Windows Phone 7
There are also a number of very basic optimisations you can do that will give you some bang for a little effort.
don't name controls that you don't reference in code
use background worker to load any data to avoid impact the UI thread (already busy loading your page) and fire this off after the page is loaded (disable any controls not usable in leui of this) (Phạm Tiểu Giao - Threads in WP7)
use httpwebrequest over webclient for the same reason (WebClient, HttpWebRequest and the UI Thread on Windows Phone 7)
I would also reiterate Matt's suggestion for not loading controls that aren't used initially.
If you decide to go the extra mile, there is more you can do to optimise page loading. These two posts are worth absorbing in that regard.
Creating High Performing Silverlight Applications for Windows Phone
WP7 Development Tips Part 1 - Kevin Marshall's Epic Work Blog for Awesome People
If using Listboxes, also familiarise with Oren Nachman and David Anson's
WP7 Silverlight Perf Demo 1: VirtualizingStackPanel vs. StackPanel as a ListBox ItemsPanel
Keep a low profile LowProfileImageLoader helps the Windows Phone 7 UI thread stay responsive by loading images in the background
Never do today what you can put off till tomorrow DeferredLoadListBox (and StackPanel) help Windows Phone 7 lists scroll smoothly and consistently
and be sure image sizes are optimised for their display size.
My suggestions/recommendations:
Create and navigate to the new page as quickly as possible.
Display the page with placeholder content while it loads (if appropriate).
Give an indication that something is happening while the page loads. An indeterminate progress bar (use this one) is the convention on the platform.
If it's not possible to use the page until all controls are loaded, then prevent access to the page. A semi-transparent object displayed over the entire page is a common technique to not only prevent touching of controls but also to indicate that they can't yet be touched.
If possible/practical set the size of the items in xaml/code to prevent relayout due to resizing once an item is loaded.
Try delay loading of items which aren't on the screen initially to get the perceived total load time down.
and finally:
Optimize everything to get the load time down and the application as responsive as possible.
This may not be the kind of question one should ask on StackOverflow, but here's a frustration that I've been trying to find a work-around for.
When using the form designer, suppose the entire form does not fit in the space allotted to the form designer, and I have a control say, down near the bottom of the form.
If I try to re-size that control, or move it using the mouse, the work area will auto-scroll to the top of the work area. This essentially pulls my control to the top of the screen. It isn't possible to scroll with the scroll wheel while "holding" a control, and even ScrollLock does nothing for me.
Is there any way to just turn the auto-scrolling off? That way I can at least work on my form without guessing numbers to type into the properties window.
Can't you just turn off autoscroll for the form?
I think it's off by default.
Form.AutoScroll = False