Namespaces

Variants
Actions

Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

Como usar Cimbalino Windows Phone Toolkit - NavigationService

From Wiki
Jump to: navigation, search

Este artigo tem como objetivo mostrar como usar Cimbalino Windows Phone Toolkit – NavigationService.

WP Metro Icon UI.png
SignpostIcon XAML 40.png
WP Metro Icon WP8.png
SignpostIcon WP7 70px.png
Article Metadata

Exemplo de código
Código fonte: NavigationService Example (github)

Testado com
SDK: Windows Phone 8.0 SDK, Windows Phone 7.1.1 SDK
Aparelho(s): Nokia Lumia 800, 920

Compatibilidade
Artigo
Tradução:
Por saramgsilva
Última alteração feita por hamishwillee em 25 Nov 2013

Contents

Introdução

Cimbalino Windows Phone Toolkit é um conjunto de itens uteis e poderosos para ajudar na implementação de aplicações Windows Phone. Projeto base do toolkit contendo serviços para implementação do padrão de MVVM, conversores, classes auxiliares, métodos de extensões;

Contruindo o exemplo

O código fonte pode ser obtido Exemplo NavigationService (github).

Os pacotes estão disponíveis em Nuget Package Manager (para ambos os "targets") e podem ser instalados, para mais detalhes consultar: Como instalar os pacotes Cimbalino Windows Phone Toolkit. O exemplo deste artigo usa MVVM Light para ajudar na implementação do padrão MVVM, para mais detalhes consultar:


O ecrã do exemplo criado

Registando os serviços

Devemos começar por registar cada serviço no ViewModelLocator, como podemos ver de seguida:

  1.    using Cimbalino.Phone.Toolkit.Services;
  2.     using GalaSoft.MvvmLight;
  3.     using GalaSoft.MvvmLight.Ioc;
  4.     using Microsoft.Practices.ServiceLocation;
  5.  
  6.     /// This class contains static references to all the view models in the
  7.     /// application and provides an entry point for the bindings.
  8.     public class ViewModelLocator
  9.     {
  10.         /// Initializes a new instance of the ViewModelLocator class.
  11.         public ViewModelLocator()
  12.         {
  13.             ServiceLocator.SetLocatorProvider(() => SimpleIoc.Default);
  14.  
  15.             if (!SimpleIoc.Default.IsRegistered<INavigationService>())
  16.             {
  17.                 SimpleIoc.Default.Register<INavigationService, NavigationService>();
  18.             }
  19.  
  20.             SimpleIoc.Default.Register<MainViewModel>();
  21.             SimpleIoc.Default.Register<Page2ViewModel>();
  22.         }
  23.  
  24.         /// Gets the main view model.
  25.         public MainViewModel MainViewModel
  26.         {
  27.             get
  28.             {
  29.                 return ServiceLocator.Current.GetInstance<MainViewModel>();
  30.             }
  31.         }
  32.  
  33.         /// Gets the page2 view model.
  34.         public Page2ViewModel Page2ViewModel
  35.         {
  36.             get
  37.             {
  38.                 return ServiceLocator.Current.GetInstance<Page2ViewModel>();
  39.             }
  40.         }
  41.  
  42.         /// Cleans up this instance.
  43.         public static void Cleanup()
  44.         {
  45.             // TODO Clear the ViewModels
  46.         }
  47.     }

Implementando a ViewModel

Em seguinda devemos implementar o MainViewModel, como podemos ver de seguida:

  1. using System;
  2.     using System.Windows.Input;
  3.  
  4.     using Cimbalino.Phone.Toolkit.Services;
  5.  
  6.     using GalaSoft.MvvmLight.Command;
  7.  
  8.     /// This class contains properties that the main View can data bind to.
  9.     public class MainViewModel : ViewModelBase
  10.     {
  11.         /// The navigation service.
  12.         private readonly INavigationService _navigationService;
  13.  
  14.         /// Initializes a new instance of the MainViewModel class.
  15.         public MainViewModel(INavigationService navigationService)
  16.         {
  17.             _navigationService = navigationService;
  18.             NavigateWithoutParameterCommand = new RelayCommand(NavigateWithoutParameter);
  19.             NavigateWithParameterCommand = new RelayCommand(NavigateWithParameter);
  20.         }
  21.  
  22.         /// Gets the navigate without parameter command.
  23.         public ICommand NavigateWithoutParameterCommand { get; private set; }
  24.  
  25.         /// Gets the navigate with parameter command.
  26.         public ICommand NavigateWithParameterCommand { get; private set; }
  27.  
  28.         /// Navigates the without parameter.
  29.         private void NavigateWithoutParameter()
  30.         {
  31.             _navigationService.NavigateTo(new Uri("/Page1.xaml", UriKind.Relative));
  32.         }
  33.  
  34.         /// Navigates the with parameter command.
  35.         private void NavigateWithParameter()
  36.         {
  37.             _navigationService.NavigateTo(new Uri("/Page2.xaml?parameter=1", UriKind.Relative));
  38.         }
  39.     }

e a Page2ViewModel deverá ser algo do género:

  1. using System.Windows.Input;
  2.  
  3.     using Cimbalino.Phone.Toolkit.Services;
  4.  
  5.     using GalaSoft.MvvmLight;
  6.     using GalaSoft.MvvmLight.Command;
  7.  
  8.     public class Page2ViewModel : ViewModelBase
  9.     {
  10.         /// The navigation service
  11.         private readonly INavigationService _navigationService;
  12.  
  13.         /// Initializes a new instance of the <see cref="Page2ViewModel"/> class.
  14.         public Page2ViewModel(INavigationService navigationService)
  15.         {
  16.             _navigationService = navigationService;
  17.             GoBackCommand = new RelayCommand(GoBack);
  18.         }
  19.  
  20.         /// Gets the parameter.
  21.         public string Parameter
  22.         {
  23.             get
  24.             {
  25.                 return _navigationService.QueryString["parameter"].ToString();
  26.             }
  27.         }
  28.  
  29.         /// Gets a value indicating whether [can go back].
  30.         public bool CanGoBack 
  31.         {
  32.             get
  33.             {
  34.               return _navigationService.CanGoBack;
  35.             }
  36.         }
  37.  
  38.         /// Gets the go back command.
  39.         public ICommand GoBackCommand { get; private set; }
  40.  
  41.         /// Goes back.
  42.         private void GoBack()
  43.         {
  44.             _navigationService.GoBack();
  45.         }
  46.     }

Implementando Views

A MainPage.xaml poderá ser algo do género, deve-se consultar Como usar MVVM Light Toolkit para Windows Phone para perceber como se conecta a ViewModel com a View.

<phone:PhoneApplicationPage x:Class="CimbalinoSample.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
DataContext="{Binding MainViewModel,
Source={StaticResource Locator}}"

FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
Orientation="Portrait"
SupportedOrientations="Portrait"
shell:SystemTray.IsVisible="True"
mc:Ignorable="d">
 
<!-- LayoutRoot is the root grid where all page content is placed -->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
 
<!-- TitlePanel contains the name of the application and page title -->
<StackPanel x:Name="TitlePanel"
Grid.Row="0"
Margin="12,17,0,28">
<TextBlock Margin="12,0"
Style="{StaticResource PhoneTextTitle2Style}"
Text="Cimbalino Sample" />
<TextBlock Margin="9,-7,0,0"
Style="{StaticResource PhoneTextTitle2Style}"
Text="NavigationService" />
</StackPanel>
 
<!-- ContentPanel - place additional content here -->
<Grid x:Name="ContentPanel"
Grid.Row="1"
Margin="12,0,12,0">
<Button Height="120"
Margin="0,120,0,404"
Command="{Binding NavigateWithoutParameterCommand}"
Content="Navigate without parameter" />
<Button Height="120"
Margin="0,50,0,0"
Command="{Binding NavigateWithParameterCommand}"
Content="Navigate with parameter" />
</Grid>
</Grid>
</phone:PhoneApplicationPage>

A Page1.xaml poderá ser algo do género:

  1. <phone:PhoneApplicationPage x:Class="CimbalinoSample.Page1"
  2.                             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.                             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.                             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  5.                             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  6.                             xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
  7.                             xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
  8.                             FontFamily="{StaticResource PhoneFontFamilyNormal}"
  9.                             FontSize="{StaticResource PhoneFontSizeNormal}"
  10.                             Foreground="{StaticResource PhoneForegroundBrush}"
  11.                             Orientation="Portrait"
  12.                             SupportedOrientations="Portrait"
  13.                             shell:SystemTray.IsVisible="True"
  14.                             mc:Ignorable="d">
  15.  
  16.     <!--  LayoutRoot is the root grid where all page content is placed  -->
  17.     <Grid x:Name="LayoutRoot" Background="Transparent">
  18.         <Grid.RowDefinitions>
  19.             <RowDefinition Height="Auto" />
  20.             <RowDefinition Height="*" />
  21.         </Grid.RowDefinitions>
  22.  
  23.         <!--  TitlePanel contains the name of the application and page title  -->
  24.         <StackPanel x:Name="TitlePanel"
  25.                     Grid.Row="0"
  26.                     Margin="12,17,0,28">
  27.             <TextBlock Margin="12,0"
  28.                        Style="{StaticResource PhoneTextTitle2Style}"
  29.                        Text="Cimbalino Sample" />
  30.             <TextBlock Margin="9,-7,0,0"
  31.                        Style="{StaticResource PhoneTextTitle2Style}"
  32.                        Text="NavigationService" />
  33.         </StackPanel>
  34.  
  35.         <!--  ContentPanel - place additional content here  -->
  36.         <Grid x:Name="ContentPanel"
  37.               Grid.Row="1"
  38.               Margin="12,0,12,0">
  39.             <TextBlock>Page1 wihtout parameter</TextBlock>
  40.         </Grid>
  41.     </Grid>
  42.  
  43. </phone:PhoneApplicationPage>

A Page2.xaml poderá ser algo do género:

  1. <phone:PhoneApplicationPage x:Class="CimbalinoSample.Page2"
  2.                             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.                             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.                             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  5.                             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  6.                             xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
  7.                             xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
  8.                             DataContext="{Binding Page2ViewModel,
  9.                                                   Source={StaticResource Locator}}"
  10.                             FontFamily="{StaticResource PhoneFontFamilyNormal}"
  11.                             FontSize="{StaticResource PhoneFontSizeNormal}"
  12.                             Foreground="{StaticResource PhoneForegroundBrush}"
  13.                             Orientation="Portrait"
  14.                             SupportedOrientations="Portrait"
  15.                             shell:SystemTray.IsVisible="True"
  16.                             mc:Ignorable="d">
  17.  
  18.     <!--  LayoutRoot is the root grid where all page content is placed  -->
  19.     <Grid x:Name="LayoutRoot" Background="Transparent">
  20.         <Grid.RowDefinitions>
  21.             <RowDefinition Height="Auto" />
  22.             <RowDefinition Height="*" />
  23.         </Grid.RowDefinitions>
  24.  
  25.         <!--  TitlePanel contains the name of the application and page title  -->
  26.         <StackPanel x:Name="TitlePanel"
  27.                     Grid.Row="0"
  28.                     Margin="12,17,0,28">
  29.             <TextBlock Margin="12,0"
  30.                        Style="{StaticResource PhoneTextTitle2Style}"
  31.                        Text="Cimbalino Sample" />
  32.             <TextBlock Margin="9,-7,0,0"
  33.                        Style="{StaticResource PhoneTextTitle2Style}"
  34.                        Text="NavigationService" />
  35.         </StackPanel>
  36.  
  37.         <!--  ContentPanel - place additional content here  -->
  38.         <Grid x:Name="ContentPanel"
  39.               Grid.Row="1"
  40.               Margin="12,0,12,0">
  41.             <TextBlock>
  42.                 Page2 wiht parameter<Run Text="{Binding Parameter}" />
  43.             </TextBlock>
  44.             <Button Content="Go back" IsEnabled="{Binding CanGoBack}" Command="{Binding GoBackCommand}" Margin="0,66,0,0"/>
  45.         </Grid>
  46.     </Grid>
  47.  
  48. </phone:PhoneApplicationPage>

Código Fonte

O código fonte pode ser obtido aqui.

This page was last modified on 25 November 2013, at 02:42.
176 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×