80 likes | 208 Views
HelloWorld. Create a window store App Part 3: Navigation, layout, and views Follow the tutorial : http:// msdn.microsoft.com/en-us/library/windows/apps/jj215600.aspx The complete code:http ://msdn.microsoft.com/en-us/library/windows/apps/jj676795.aspx. UI design.
E N D
HelloWorld Create a window store App Part 3: Navigation, layout, and views Follow the tutorial : http://msdn.microsoft.com/en-us/library/windows/apps/jj215600.aspx The complete code:http://msdn.microsoft.com/en-us/library/windows/apps/jj676795.aspx
UI design • Includes the organization of pages in the app, • The navigation between pages • The layout of content and commands on each page. • Tutorial is about: • Add pages and navigation • Arrangecontrols and content on a page • Adapt the page layout to differentorientations and views
Navigation • TheFrame control hosts Pages • has a navigation history • you can use to go forward and back through pages you've visited.
About creating a UI with XAML • supports both static and fluid layouts. • Static layout • you give controls explicit pixel sizes and positions • Fluid layout • Fluid layouts shrink, grow, and reflow to adapt to the visual space • Make sure that the overall UI is fluid and adapts to different resolutions
XAML layout system • XAML layout system provides various Panel controls • Grid • arrange content in rows and columns • StackPanel • arrange content in single line • Canvas • arrange content in single line • Panels: serve as containers in which you arrange your content
app bars • app bars are for grouping commands • they are hidden by default. • The user can show the commands when needed by swiping from the top or bottom edge of the screen, or by right-clicking. • The app bar at the top of the screen is typically used for navigation,