1 / 8

Designing Navigation and Layout in a Windows Store App Using XAML

This tutorial focuses on the essential aspects of creating a user interface in a Windows Store app using XAML. You'll learn how to organize pages, implement navigation, and design responsive layouts. Key topics include adding pages, managing navigation history, and adapting layouts for various orientations and screen sizes. Discover the difference between static and fluid layouts, and how to utilize various XAML panel controls like Grid, StackPanel, and Canvas for effective content arrangement. Enhance your app's usability with app bars for command grouping.

dewey
Télécharger la présentation

Designing Navigation and Layout in a Windows Store App Using XAML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

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 • Arrangecontrols and content on a page • Adapt the page layout to differentorientations and views

  3. Flat navigation

  4. Hierarchical navigation

  5. Navigation • TheFrame 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 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

  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,

More Related