Tutorial Windows Phone #6 – Navegação Utilizando Variáveis Globais

Padrão

Olá pessoal! No último post da série sobre Windows Phone, vimos como transmitir dados entre páginas. No tutorial de hoje, vamos ver como realizar uma transição de páginas e compartilhar um atributo global entre elas.

Neste tutorial, teremos a MainPage e duas páginas secundárias, Pagina2Pagina3. Na página principal, poderemos marcar uma opção para que todas as páginas se tornem azuis. Esse atributo será lido pelas outras páginas para que apliquem essa propriedade também.

Para começar, crie um novo projeto e adicione as páginas Pagina2Pagina3, conforme fizemos nos últimos tutoriais. Primeiramente, vamos criar o atributo global. Abra o arquivo App.xaml.cs e adicione a o atributo PaginasAzuis.

/// <returns>The root frame of the Phone Application.</returns>
public PhoneApplicationFrame RootFrame { get; private set; }

public bool PaginasAzuis { get; set; }

/// <summary>
/// Constructor for the Application object.
/// </summary>
public App()

Neste trecho, criamos uma variável do tipo bool (booleano, ou seja, verdadeira ou falsa) e dissemos que ela poderá tanto ser lida (get) quanto atribuída (set).

O próximo passo é criar a interface da página principal. Utilizaremos o StackPanel (já utilizado no post anterior), um item CheckBox, que nos permitirá verificar a opção do usuário pelo fundo azul ou não, e dois HyperlinkButtons, para a navegação para as nossas duas páginas criadas. Adicione o seguinte trecho ao ContentPanel do arquivo MainPage.xaml.

<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <StackPanel>
        <CheckBox x:Name="chkCorAzul" Content="Eu quero as páginas azuis"
                  Checked="chkCorAzul_Checked" Unchecked="chkCorAzul_Unchecked" />
        <HyperlinkButton Content="Para a Página 2" x:Name="hbParaPagina2"
                         Click="hbParaPagina2_Click" />
        <HyperlinkButton Content="Para a Página 3" x:Name="hbParaPagina3"
                         Click="hbParaPagina3_Click" />
    </StackPanel>
</Grid>

No código acima, definimos um item CheckBox chamado chkCorAzul, que quando for checado, chamará o método chkCorAzul_Checked() e quando for desmarcado, chamará o método chkCorAzul_Unchecked(). Além disso, temos dois HyperlinkButtons, que direcionarão para as outras duas páginas que criamos. Vamos agora implementar os métodos chkCorAzul_Checked()chkCorAzul_Unchecked(), no arquivo MainPage.xaml.cs.

private void chkCorAzul_Checked(object sender, RoutedEventArgs e)
{
    App a = Application.Current as App;
    a.PaginasAzuis = true;
    ContentPanel.Background = new SolidColorBrush(Colors.Blue);
}

private void chkCorAzul_Unchecked(object sender, RoutedEventArgs e)
{
    App a = Application.Current as App;
    a.PaginasAzuis = false;
    ContentPanel.Background = new SolidColorBrush(Colors.Black);
}

Simplificadamente, fizemos um cast de Application.Current para um objeto App chamado simplesmente de a. Este objeto representa o contexto da nossa aplicação. Através dele, acessamos a propriedade PaginasAzuis que definimos anteriormente. Após isso, configuramos o fundo do ContentPanel para azul (checado) ou preto (desmarcado).

Em seguida, vamos implementar os métodos para realizar a navegação até as outras páginas. Neste ponto, não deve haver nenhuma novidade neles:

private void hbParaPagina2_Click(object sender, RoutedEventArgs e)
{
    this.NavigationService.Navigate(new Uri("/Pagina2.xaml", UriKind.Relative));
}

private void hbParaPagina3_Click(object sender, RoutedEventArgs e)
{
    this.NavigationService.Navigate(new Uri("/Pagina3.xaml", UriKind.Relative));
}

Tanto na Pagina2 quanto na Pagina3, vamos implementar o método que verifica a propriedade PaginasAzuis e modifica ou não a propriedade do seu ContentPanel. Adicione o seguinte método a ambos os arquivos .cs:

private void PhoneApplication_Loaded(object sender, RoutedEventArgs e)
{
    App a = Application.Current as App;
    if (a.PaginasAzuis == true)
    {
        ContentPanel.Background = new SolidColorBrush(Colors.Blue);
    }
}

Nenhuma novidade, não é? Apenas como último detalhe, vamos configurar nos arquivos xaml das duas páginas para que esse método recém-criado seja chamado ao concluir-se o carregamento da página (assim como fizemos no tutorial anterior).

<phone:PhoneApplicationPage
    x:Class="NavegacaoComVariavelGlobal.Pagina3"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480"
    shell:SystemTray.IsVisible="True" Loaded="PhoneApplication_Loaded">
. . .

E pronto! Já podemos executar nossa aplicação!

Para baixar o projeto, só clicar aqui!

Até a próxima!!! 😀

Deixe uma resposta