Windows Phone Navigation and Page Layout

,Page Navigation

Page Navigation, Fair Use

Navigation Framework

" Page navigation in Silverlight for Windows Phone functions in much the same way as page navigation in a web browser."

  • The navigation framework handles the process of navigating from one page to another. Page navigation in Silverlight for Windows Phone functions in much the same way as page navigation in a web browser. The Windows Phone framework supports:
    1. Back and Forward Navigation - allows the user to go back and forth on the pages visited in the current session.
    2. Journal Histories - stores the browsing history for the current session.
    3. Deep Linking - allows for navigating to a child page inside a hierarchy of pages.
    .Frame, Page, and Content

    Frame, Page, and Content, Fair Use

    Frame and Page Navigation

    "The frame is the top level container for the entire application. An app can have only one frame."

    • Silverlight for Windows Phone provides the PhoneApplicationFrame and PhoneApplicationPage classes to facilitate navigation to separate sections of content:
      • PhoneApplicationFrame:
        • acts as a container for page controls, and facilitates navigation to pages
        • is a host for PhoneApplicationPages and reserves space for the system tray and application bar
        • only one PhoneApplicationFrame is allowed per application
        • the PhoneApplicationFrame is initialized inside of the App.xaml.cs during the application startup
        • loads the page specified in the manifest (WMAppManifest.xml), as show below:
                <DefaultTask  Name ="_default" NavigationPage="MainPage.xaml"/>
      • PhoneApplicationPage:
        • acts as a container for sections (pages) of content
        • includes three methods which are called during page transitions:
          • OnNavigatedTo - called when a page becomes the active page in a frame:
            • retrieve the page state data during or after the method has been called.
          • OnNavigatedFrom - called when a page is no longer the active page in a frame.:
            • store the page state data during or before the method is called
          • OnNavigatingFrom - called just before a page is no longer the active page in a frame:
            • allows the navigation to be redirected or canceled.

    NavigationService Class

    "The NavigationService class enables movement between pages of a Windows Phone application."

    • The NavigationService class is used to control navigation between pages. The class includes five methods:
      • GoBack - navigates to previous entry in the active history journal. If no entry is available, then an exception occurs.

                    if (this.NavigationService.CanGoBack)

      • GoForward - navigates to next entry in the active history journal. If no entry is available, then an exception occurs.

                    if (this.NavigationService.CanGoForward)

      • Navigate - navigate to content specified by URI.

                   this.NavigationService.Navigate( new Uri( "/Views/Home.xaml", UriKind.Relative ));

      • Refresh - reload the current page.
        • If the current content is navigated to again, whether by calling Navigate or Refresh, a new entry is not added to navigation history.
      • StopLoading - cancel an asynchronous navigation action that hasn't been processed yet.
        • StopLoading can be called as soon as Navigate returns, and stops navigation that is in progress in child frames.

    .Grid Layout Control

    Grid Layout Control, Fair Use

    Page Layout Controls

    "Layout controls are derived directly or indirectly from the Panel class."

    • Page Layout Controls are used to present the page contents and often serve as containers for other controls or objects. Layout controls are derived directly or indirectly from the Panel class. Panels provide for an arrangement of child objects. All types of layout controls have the following properties:
      • Margin - (specify 1, 2, 4 values; Left, Top, Right, Bottom; default = 0) .
      • HorizontalAlignment - (Left, Center, Right, Stretch=default)
      • VerticalAlignment - (Top, Center, Bottom, Stretch=default)
      • Width, Height - (default = Auto)
      • MinHeight, MinWidth - (default = 0)
      • MaxHeight, MaxWidth - (default = Infinity)
    • Silverlight has two layout modes: Constrained and Unconstrained. A layout typically contains a mixture of these two modes.
      1. Constrained
        • Fixed Width or Height is specified by a container.
      2. Unconstrained
        • No fixed Width or Height is specified, so elements are free to choose their own size. For example, the StackPanel will always perform unconstrained layout in the direction of stacking .. so elements inside a vertical stack panel are vertically unconstrained. It will provide each element with the height it needs and then crop anything that does not fit into the StackPanel.
        • aka. "Size to Content"
        • Unconstrained layout is important in data binding where the size of the data is not known until runtime. However if there is no data the size becomes zero (not visible) which can make testing without appropriate data difficult.

    Page Layout XAML Example

    "Nested Layout Controls - Stack Panels and Grid."

    ,Horizontal Stack Panel in VerticalStack Panel inside Grid Control

    Page Layout, Fair Use

    Horizontal Stack Panel in VerticalStack Panel inside Grid Control
        <Grid x:Name="LayoutRoot"

                <Button Content="Button 1" />
                <Button Content="Button 2" />
                <Button Content="Button 3"
                        FontSize="20" />
                <Button Content="Button 4" />
                <Ellipse Fill="DarkGoldenrod"
                         Height="30" />
                <Button Content="Button 5" />

                <StackPanel Orientation="Horizontal">
                    <Rectangle Fill="Black"
                               Width="25" />
                    <Rectangle Fill="Green"
                               Width="45" />
                    <Ellipse Fill="RoyalBlue"
                             Width="25" />

    Layout controls for Windows Phone

    "A Grid contains a collection of UIElement objects, which are in the Children property."

    1. Grid
      • The Grid control allows the space to be allocated in rows and columns (like a table) .
      • The Grid is the most used control. It is the default root element for page templates and is the best control to use when you want the contents to shrink/expand to fill available space.
      • Use the Grid's element properties RowDefinitions, and ColumnDefinitions to define rows and columns.
      • The number of rows and columns start with 0. If no value is specified, it will default to 0.
      • Add the inline property ShowGridLines="True" to see the Grid boundaries.
      • If you do not specify as size for the grid's dimensions, the grid will resize itself according to the available space.
      • There are four attached properties for positioning an element within a grid:
        • Row - grid row to place element.
        • Column - grid column to place element.
        • RowSpan - the number of rows the element will span.
        • ColumnSpan - the number of columns and element will span.
    2. StackPanel
      • The StackPanel is used to position elements in a horizontal or vertical stack.
      • The default orientation is vertical.
      • StackPanel provides as much area as is required for each element.
      • The Grid can take over most the responsibilities of a stack panel. A Grid with one column and all the rows set to AUTO height is the same as a vertical stack panel. The main reason for the StackPanel is that the number of rows does not need to be specified. StackPanel is important for things like a list box where the number of items might change at run time.
    3. Border
      • The Border draws a border, background, or both around another element. It can only have one child element. (Properties: BorderBrush, BorderThickness, Margin, Padding, CornerRadius).
    4. Canvas
      • Canvas is a fixed layout so the defined area does not change when the screen is resized or the content changes.
      • Canvas defines an area where child elements can be explicitly positioned by using coordinates that are relative to the Canvas area.
      • Canvas is the highest performing layout panel in Silverlight.
      • The position of graphical elements is relative to the top-left corner of the canvas.
      • There are three attached properties for controlling an element inside a canvas:
        • Left - value in pixels from left border of canvas.
        • Top - value in pixels from the top border of canvas.
        • ZIndex - stacking order of elements. The larger the ZIndex value, the closer the element is to the foreground.
    5. Panorama
      • The Panorama control is a unique control designed for Windows Phone.
      • Panorama controls have a background image that slides behind the panorama as the user moves from one panorama section (ie. PanoramItem) to the next.
      • Usually a panorama section takes up one screen, with a portion of the next section showing on the right border of the display.
      • However, some sections can be larger than one screen. The user would scroll left and right to see the entire section.
      • Design guidelines specify you should have no more than four of five sections; fewer if you have landscape sections.
      • A general rule is to have the entire panorama background image be no more than 2,000 pixels wide.
    Panorama Control
    ,Panorama Control

    Panorama Control, Fair Use

    1. Pivot
      • The Pivot control is another unique control designed for Windows Phone.
      • It also can show multiple sections, but each section takes up the entire width of the page instead of having overlapping sections.
      • The Pivot control can handle a larger number of sections than does the Panorama control.
      • The Pivot control has labels at the top of the page with the name of the current section in white, with the name of other sections in gray.
    Pivot Control
    ,Pivot Control

    Pivot Control, Fair Use

    Splash Screen

    "Windows Phone 8.0 apps load quickly, so a Windows Phone 8.0 app usually doesn’t require a splash screen."

    • A splash screen is recommended for an app that takes more than a couple of seconds to load, or if branding for the app is desired.
      • The default name of the splash screen is SplashScreenImage.jpg
      • The Build Action property of the image file must be set to Content.
      • In WP 7.X, the splash screen needs to be 480 x 800 pixels as this was the only resolution supported.
      • In WP 8.0, use a splash screen size of 768 x 1280 and WP will scale the image for the supported resolutions (480x800, 768x1280, 720x1280).
      • In WP 8.0 it is also possible to use a different splash screen for each resolution size. This requires following a naming convention for the three files:
        1. SpashScreenImage.Screen-WVGA.jpg (480x800) - has scale factor = 1 for 800 x 400 logical pixels.
        2. SpashScreenImage.Screen-WXGA.jpg (768x1280) - has scale factor = 1.6 for 800 x 400 logical pixels.
        3. SpashScreenImage.Screen-720p.jpg (720x1280) - has scale factor = 1.5 for 853 x 480 logical pixels.
      • Instead of using SplashScreenImage.jpg with XNA Framework games, you should render a texture to display at startup while other content loads. In addition, you can minimize start time by keeping the entry assembly small.
      • Note: Windows Phone 8.0 apps load quickly, so a Windows Phone 8.0 app usually doesn’t require a splash screen. New Windows Phone 8.0 projects don’t include a default splash screen image file. However, if you want to use a splash screen in your Windows Phone 8.0 app, add an existing JPG image file to the root folder of your Windows Phone 8.0 project, and name the file SplashScreenImage.jpg.

      Screen Orientation

      "Silverlight apps default to start in Portrait orientation, while XNA apps default to start in Landscape."

      Silverlight Applications
      • In MainPage.xaml there are two properties of the PhoneApplicationPage class concerning screen orientation:
        1. SupportedOrientations is the list of screen orientations the page can support:
          • Portrait (the default)
          • Landscape
          • PortraitOrLandscape
        2. Orientation specifies the screen orientation the page will use when it starts:
          • Landscape
          • LandscapeLeft (screen is on the left, hardware buttons on the right)
          • LandscapeRight (screen in on the right, hardware buttons on the left)
          • Portrait
          • PortraitDown (Upside Down, screen on the bottom, hardware buttons on the top, not supported in WP)
          • PortraitUp (Normal Position, screen on the top, hardware buttons on the bottom)
      XNA Applications
      • In XNA, the GraphicsDeviceManager class controls the configuration and management of the graphics device. Its SupportedOrientations property retrieves or sets the display orientations that are available if automatic rotation and scaling is enabled:
        • Default
        • LandscapeLeft
        • LandscapeRight
        • Portrait

      Reference Articles