Vývoj pre Windows 10 – Štruktúra používateľského rozhrania aplikácie / 10. časť

Ako na to

6.4.2016

Späť na úvod >> Späť na programovanie >> Späť na seriál

Len málo aplikácií vystačí s používateľským rozhraním, ktoré sa zmestí na jednu obrazovku. Preto dizajnéri a vývojári používajú rôzne spôsoby ako zväčšiť plochu, ktorú má používateľ k dispozícii na ovládanie aplikácie a na ktorej zároveň aplikácie zobrazuje požadované informácie. V prípade univerzálnych aplikácií je návrh štruktúry používateľského rozhrania obzvlášť dôležitý, pretože aplikácia môže bežať tak na veľkom monitore, ako aj na malom displeji telefónu.

Návrh používateľského rozhrania sa začína odvíjať od takzvanej hlavnej, alebo domovskej stránky aplikácie, ktorá musí mať prehľadne členené ovládacie prvky, napríklad tlačidlá, položky menu, alebo záložky, pomocou ktorých sa používateľovi zobrazujú ďalšie obrazovky, časti obrazovky, alebo dialógové okná. Veľa vývojárov si vo Windows 8.1 obľúbilo vodorovne rolovateľné virtuálne obrazovky, nazývané v originálnej terminológii hub.

V príklade si ukážeme navigáciu z domovskej obrazovky aplikácie na obrazovky pre jednotlivé funkcie, alebo skupiny funkcií a následný návrat na domovskú obrazovku. Začneme vytvorením projektu UWP aplikácie, ktorá zatiaľ pozostáva len z jedinej stránky MainPage.xaml

Do projektu pomocou kontextového menu Add NewItem pridáme tri stránky typu BlankPage. Nazveme ich Page1.xaml, Page2.xaml a Page3.xaml.

Pridanie sekundárnych stránok do projektu UWP aplikácie

Do XAML kódu jednotlivých stránok pridajte riadok s textovým reťazcom obsahujúcim návrh konkrétnej stránky. Pre Page1.xaml to bude
<TextBlock FontSize="48" Text="Page 1" />

Na domovskú stránku aplikácie MainPage.xaml pridajte tlačidlo (zatiaľ len jedno) pomocou ktorého sa budete navigovať na inú stránku. Zatiaľ vôbec neriešime dizajn ani usporiadanie stránok, ide nám len o funkčnosť

Dvojklikom v návrhovom zobrazení vytvoríme telo kódu obsluhy udalosti

private void navButton_Click(object sender, RoutedEventArgs e)
{
this.Frame.Navigate(typeof(Page1));
}

Prechod z hlavnej stránky na stránku Page1 funguje úplne bez problémov, ale pri takomto jednoduchom kóde zostanete na tejto stránke uväznení a nemáte ako sa vrátiť na pôvodnú, alebo akúkoľvek inú stránku.

Všimnite si v zdrojovom kóde v súbore App.xaml.cs riadok

protected override void OnLaunched(LaunchActivatedEventArgs e)
{
Frame rootFrame = Window.Current.Content as Frame;

Trieda Frame podporuje niekoľko dôležitých a užitočných metód na navigáciu medzi stránkami, predovšetkým Navigate, GoBack, a GoForward, a taktiež niekoľko parametrov ako napríklad BackStack, ForwardStack, a BackStackDepth

V našom príklade je odkaz na stránku Page1 odovzdaný v metóde Navigate. Táto metóda určuje obsah aktuálneho okna danej aplikácie k rámu, ktorý určíte a načíta do neho obsah stránky. V tomto príklade sme rámec nijako nevymedzili, takže Page1 v predvolenom nastavení prekryla stránku MainPage.xaml. Page1 je podtriedou triedy stránky. Trieda Page má vlastnosť Frame iba na čítanie, ktorý dostane Frame, obsahujúci stránku. Keď sa handler udalosti Click.

Náš príklad upravíme tak, aby mal navigačné tlačidlá, opäť s jednoduchým dizajnom a rámec so sekundárnymi stránkami sa bude zobrazovať pod tlačidlami vo vnútri hlavnej stránky. Všimnite si spôsob odovzdávania hodnoty v prvku ValueTextBox cez globálnu premennú internal static string SomeImportantValue; v App.xaml.cs

Kompletné zdrojové kódy príkladu

App.xaml.cs

namespace NavigationExample
{
/// <summary>

/// Provides application-specific behavior to supplement the default Application class.

/// </summary>

sealed partial class App : Application
{

internal static string SomeImportantValue;

    /// <summary>
    /// Initializes the singleton application object. This is the first line of authored code
    /// executed, and as such is the logical equivalent of main() or WinMain().
    /// </summary>
    public App()
        {
      Microsoft.ApplicationInsights.WindowsAppInitializer.InitializeAsync(
       Microsoft.ApplicationInsights.WindowsCollectors.Metadata |
        Microsoft.ApplicationInsights.WindowsCollectors.Session);
      this.InitializeComponent();
            this.Suspending += OnSuspending;
        }

protected override void OnLaunched(LaunchActivatedEventArgs e)
{

Frame rootFrame = Window.Current.Content as Frame;

            if (rootFrame == null)
            {
                // Create a Frame to act as the navigation context and navigate to the first page
                rootFrame = new Frame();

rootFrame.NavigationFailed += OnNavigationFailed;

                if (e.PreviousExecutionState == ApplicationExecutionState.Terminated)
                {
                    //TODO: Load state from previously suspended application
                }

                // Place the frame in the current Window
                Window.Current.Content = rootFrame;
            }

            if (rootFrame.Content == null)
            {
                // When the navigation stack isn't restored navigate to the first page,
                // configuring the new page by passing required information as a navigation
                // parameter
                rootFrame.Navigate(typeof(MainPage), e.Arguments);

            }
            // Ensure the current window is active
            Window.Current.Activate();
        }

        void OnNavigationFailed(object sender, NavigationFailedEventArgs e)
        {
            throw new Exception("Failed to load Page " + e.SourcePageType.FullName);
        }

        private void OnSuspending(object sender, SuspendingEventArgs e)
        {
            var deferral = e.SuspendingOperation.GetDeferral();
            //TODO: Save application state and stop any background activity
            deferral.Complete();
        }
    }
}

MainPage.xaml

</Frame>
</StackPanel>
</Page>

MainPage.xaml.cs

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409

namespace NavigationExample
{
    /// <summary>
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
            MyFrame.Navigate(typeof(Page1));
        }

    private void HomeButton_Click(object sender, RoutedEventArgs e)
    {
      MyFrame.Navigate(typeof(Page1));
    }

    private void BackButton_Click(object sender, RoutedEventArgs e)
    {
      if (MyFrame.CanGoBack)
      {
        MyFrame.GoBack();
      }
    }

    private void ForwardButton_Click(object sender, RoutedEventArgs e)
    {
      if (MyFrame.CanGoForward)
      {
        MyFrame.GoForward();
      }
    }

    private void NavigateButton_Click(object sender, RoutedEventArgs e)
    {
      this.Frame.Navigate(typeof(Page2));
    }
}
}

Page1.xaml

Page1.xaml.cs

namespace NavigationExample
{
/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
public sealed partial class Page1 : Page
{
    public Page1()
    {
      this.InitializeComponent();
    }

    private void HyperlinkButton_Click(object sender, RoutedEventArgs e)
    {
      Frame.Navigate(typeof(Page2));
    }
}
}

Page2.xaml

</Page>

Page2.xaml.cs

namespace NavigationExample
{
/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
public sealed partial class Page2 : Page
{
    public Page2()
    {
      this.InitializeComponent();
    }

    private void HyperlinkButton_Click(object sender, RoutedEventArgs e)
    {
      App.SomeImportantValue = ValueTextBox.Text;
      Frame.Navigate(typeof(Page3), ValueTextBox.Text);
    }

    protected override void OnNavigatedTo(NavigationEventArgs e)
    {
      if (!String.IsNullOrEmpty(App.SomeImportantValue))
      {
        ValueTextBox.Text = App.SomeImportantValue;
      }
    }

}
}

Page3.xaml

</Page>

Page3.xaml.cs

namespace NavigationExample
{
/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
public sealed partial class Page3 : Page
{
    public Page3()
    {
      this.InitializeComponent();
    }

    protected override void OnNavigatedTo(NavigationEventArgs e)
    {
      var value = (string)e.Parameter;
      ValueTextBox.Text = value;
    }

}
}

Zobrazit Galériu

Vývoj pre Windows 10 – Štruktúra používateľského rozhrania aplikácie / 10. časť

Pridať komentár

Mohlo by vás zaujímať

Mohlo by vás zaujímať

Kde vziať oku lahodiace kombinácie farieb na svoj web či projekt a ako nezabudnúť na farboslepých

Ako si na bezplatnom Spotify vytvoriť kópiu cudzieho playlistu

Ako vyriešiť otravnú ikonu pomocníka z okna Prieskumníka vo Windows 10