Presentation is loading. Please wait.

Presentation is loading. Please wait.

HelloWorld Create a window store App Part 3: Navigation, layout, and views Follow the tutorial :

Similar presentations


Presentation on theme: "HelloWorld Create a window store App Part 3: Navigation, layout, and views Follow the tutorial :"— Presentation transcript:

1 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

2 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 Arrange controls and content on a page Adapt the page layout to different orientations and views

3 Flat navigation

4 Hierarchical navigation

5 Navigation The Frame control hosts Pages has a navigation history you can use to go forward and back through pages you've visited.

6 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

7 XAML layout system XAML layout system provides various Panel controlsPanel 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

8 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,


Download ppt "HelloWorld Create a window store App Part 3: Navigation, layout, and views Follow the tutorial :"

Similar presentations


Ads by Google