×
Namespaces

Variants
Actions

Como usar Cimbalino Windows Phone Toolkit - NavigationService

From Nokia Developer 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.
63 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.

×