×
Namespaces

Variants
Actions
(Difference between revisions)

Como usar Cimbalino Windows Phone Toolkit - NavigationService

From Nokia Developer Wiki
Jump to: navigation, search
hamishwillee (Talk | contribs)
m (Hamishwillee - Fix categories)
hamishwillee (Talk | contribs)
m (Hamishwillee -)
Line 424: Line 424:
 
</code>
 
</code>
  
[[en: How to use Cimbalino Windows Phone Toolkit - NavigationService]]
 
<!-- Translation --> [[en:How to use Cimbalino Windows Phone Toolkit - NavigationService<!-- Title only - not link -->]]
 
  
 
== Código Fonte ==
 
== Código Fonte ==
 
O código fonte pode ser obtido [https://github.com/saramgsilva/CimbalinoToolkitSamples/tree/master/How%20to%20use%20Cimbalino%20Windows%20Phone%20Toolkit%20-%20NavigationService aqui].
 
O código fonte pode ser obtido [https://github.com/saramgsilva/CimbalinoToolkitSamples/tree/master/How%20to%20use%20Cimbalino%20Windows%20Phone%20Toolkit%20-%20NavigationService aqui].
 +
 +
<!-- Translation --> [[en:How to use Cimbalino Windows Phone Toolkit - NavigationService<!-- Title only - not link -->]]

Revision as of 08:06, 15 November 2013

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 15 Nov 2013

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

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:

Vamos começar!

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

   using Cimbalino.Phone.Toolkit.Services;
using GalaSoft.MvvmLight;
using GalaSoft.MvvmLight.Ioc;
using Microsoft.Practices.ServiceLocation;
 
/// <summary>
/// This class contains static references to all the view models in the
/// application and provides an entry point for the bindings.
/// </summary>
public class ViewModelLocator
{
/// <summary>
/// Initializes a new instance of the ViewModelLocator class.
/// </summary>
public ViewModelLocator()
{
ServiceLocator.SetLocatorProvider(() => SimpleIoc.Default);
 
if (!SimpleIoc.Default.IsRegistered<INavigationService>())
{
SimpleIoc.Default.Register<INavigationService, NavigationService>();
}
 
SimpleIoc.Default.Register<MainViewModel>();
SimpleIoc.Default.Register<Page2ViewModel>();
}
 
/// <summary>
/// Gets the main view model.
/// </summary>
/// <value>
/// The main view model.
/// </value>
public MainViewModel MainViewModel
{
get
{
return ServiceLocator.Current.GetInstance<MainViewModel>();
}
}
 
/// <summary>
/// Gets the page2 view model.
/// </summary>
/// <value>
/// The page2 view model.
/// </value>
public Page2ViewModel Page2ViewModel
{
get
{
return ServiceLocator.Current.GetInstance<Page2ViewModel>();
}
}
 
/// <summary>
/// Cleanups this instance.
/// </summary>
public static void Cleanup()
{
// TODO Clear the ViewModels
}
}

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

using System;
using System.Windows.Input;
 
using Cimbalino.Phone.Toolkit.Services;
 
using GalaSoft.MvvmLight.Command;
 
/// <summary>
/// This class contains properties that the main View can data bind to.
/// <para>
/// Use the <strong>mvvminpc</strong> snippet to add bindable properties to this ViewModel.
/// </para>
/// <para>
/// You can also use Blend to data bind with the tool's support.
/// </para>
/// <para>
/// See http://www.galasoft.ch/mvvm
/// </para>
/// </summary>
public class MainViewModel : ViewModelBase
{
/// <summary>
/// The navigation service.
/// </summary>
private readonly INavigationService _navigationService;
 
/// <summary>
/// Initializes a new instance of the MainViewModel class.
/// </summary>
public MainViewModel(INavigationService navigationService)
{
_navigationService = navigationService;
NavigateWithoutParameterCommand = new RelayCommand(NavigateWithoutParameter);
NavigateWithParameterCommand = new RelayCommand(NavigateWithParameter);
}
 
/// <summary>
/// Gets the navigate without parameter command.
/// </summary>
/// <value>
/// The navigate without parameter command.
/// </value>
public ICommand NavigateWithoutParameterCommand { get; private set; }
 
/// <summary>
/// Gets the navigate with parameter command.
/// </summary>
/// <value>
/// The navigate with parameter command.
/// </value>
public ICommand NavigateWithParameterCommand { get; private set; }
 
/// <summary>
/// Navigates the without parameter.
/// </summary>
private void NavigateWithoutParameter()
{
_navigationService.NavigateTo(new Uri("/Page1.xaml", UriKind.Relative));
}
 
/// <summary>
/// Navigates the with parameter command.
/// </summary>
private void NavigateWithParameter()
{
_navigationService.NavigateTo(new Uri("/Page2.xaml?parameter=1", UriKind.Relative));
}
}

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

using System.Windows.Input;
 
using Cimbalino.Phone.Toolkit.Services;
 
using GalaSoft.MvvmLight;
using GalaSoft.MvvmLight.Command;
 
public class Page2ViewModel : ViewModelBase
{
/// <summary>
/// The navigation service
/// </summary>
private readonly INavigationService _navigationService;
 
/// <summary>
/// Initializes a new instance of the <see cref="Page2ViewModel"/> class.
/// </summary>
/// <param name="navigationService">The navigation service.</param>
public Page2ViewModel(INavigationService navigationService)
{
_navigationService = navigationService;
GoBackCommand = new RelayCommand(GoBack);
}
 
/// <summary>
/// Gets the parameter.
/// </summary>
/// <value>
/// The parameter.
/// </value>
public string Parameter
{
get
{
return _navigationService.QueryString["parameter"].ToString();
}
}
 
/// <summary>
/// Gets a value indicating whether [can go back].
/// </summary>
/// <value>
/// <c>true</c> if [can go back]; otherwise, <c>false</c>.
/// </value>
public bool CanGoBack
{
get
{
return _navigationService.CanGoBack;
}
}
 
/// <summary>
/// Gets the go back command.
/// </summary>
/// <value>
/// The go back command.
/// </value>
public ICommand GoBackCommand { get; private set; }
 
/// <summary>
/// Goes the back.
/// </summary>
private void GoBack()
{
_navigationService.GoBack();
}
}

para conetar a view model com a página devemos adicionar a ViewModelLocator no App.xaml:

 <vm:ViewModelLocator x:Key="Locator" d:IsDataSource="True"  />

e adicionar o binding na página principal:

DataContext="{Binding MainViewModel, 
Source={StaticResource Locator}}"

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

<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:

<phone:PhoneApplicationPage x:Class="CimbalinoSample.Page1"
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"
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">
<TextBlock>Page1 wihtout parameter</TextBlock>
</Grid>
</Grid>
 
</phone:PhoneApplicationPage>

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

<phone:PhoneApplicationPage x:Class="CimbalinoSample.Page2"
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 Page2ViewModel,
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">
<TextBlock>
Page2 wiht parameter<Run Text="{Binding Parameter}" />
</TextBlock>
<Button Content="Go back" IsEnabled="{Binding CanGoBack}" Command="{Binding GoBackCommand}" Margin="0,66,0,0"/>
</Grid>
</Grid>
 
</phone:PhoneApplicationPage>


Código Fonte

O código fonte pode ser obtido aqui.

112 page views in the last 30 days.