Xamarin Forms - Master Detail Page Dinâmica (revisitado)

 Neste artigo vamos recordar como criar uma Master Detail Page dinâmica em uma aplicação Xamarin Forms.

Para saber mais sobre Master Detail Page no Xamarin Forms assista os vídeos abaixo sobre o assunto:

  1. Xamarin Forms - Apresentando MasterDetailPage - Macoratti

  2. Xamarin Forms - Usando MasterDetailPage - Menu de ... - Macoratti

Hoje vamos recordar os conceitos básicos e criar uma aplicação Xamarin Forms com uma Master Detail Page dinâmica.

Recursos Usados

Criando o projeto Xamarin Forms

Abra o  VS 2017 Community update 15.5 e clique em New Project e a seguir escolha Cross Platform -> Cross Platform App (Xamarin.Forms) e informe o nome XF_MasterDetail.

Ao criar um projeto Xamarin Forms em uma versão anterior à atualização 15.5, você tinha duas opções para compartilhar o código entre as plataformas:

  1. Shared Project
  2. Portable Class Library (PCL)

Pois a partir da versão 15.5 do Visual Studio(lançada em dezembro/2017) a opção Portable Class Library (PCL) foi substituida pela .NET Standard:

Marque as opções Android e/ou iOS, marque Xamarin Forms e a seguir marque .NET Standard e clique no botão OK.

Pronto nosso projeto já esta criado.

Definindo as páginas da aplicação

Vamos criar uma pasta Menu no projeto principal e a seguir criar a classe MasterPageItem.cs com o código abaixo:

using System;
namespace XF_MasterDetail.Menu
{
    public class MasterPageItem
    {
        public string Title {get;set;}
        public string Icon {get;set;}
        public Type TargetType { get; set; }
    }
}

Vamos criar também uma pasta Views e nesta pasta criar 4 páginas que iremos usar em nossa aplicação :

Além dessas páginas temos também a página principal MainPage.xaml que iremos definir como uma MasterDetailPage.

<?xml version="1.0" encoding="utf-8" ?>
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:XF_MasterDetail"     
             x:Class="XF_MasterDetail.MainPage">
    <MasterDetailPage.Master>
        <ContentPage Title="Menu">
            <Grid BackgroundColor="Transparent">
                <Grid.RowDefinitions>
                    <RowDefinition Height="200" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <Grid>
                    <Image Source="bg.png" Aspect="AspectFill" />
                    <StackLayout Padding="0,20,0,0" HorizontalOptions="CenterAndExpand" 
                           VerticalOptions="CenterAndExpand">
                        <Image Source="home.png" Aspect="AspectFit" WidthRequest="60" HeightRequest="60" />
                        <Label Text="Xamarin Mestre Detalhe" TextColor="White" FontSize="Large" />
                    </StackLayout>
                </Grid>
                <StackLayout Grid.Row="1" Spacing="15">
                    <ListView x:Name="paginaMestreList" RowHeight="60" SeparatorVisibility="None" 
                              BackgroundColor="#e8e8e8" 
                                ItemSelected="OnMenuItemSelected">
                        <ListView.ItemTemplate>
                            <DataTemplate>
                                <ViewCell>
                                    <StackLayout>
                                        <StackLayout VerticalOptions="FillAndExpand" Orientation="Horizontal" 
                                                    Padding="20,10,0,10" Spacing="20">
                                            <Image Source="{Binding Icon}" WidthRequest="30" HeightRequest="30" 
                                                     VerticalOptions="Center" />
                                            <Label Text="{Binding Title}" FontSize="Medium" VerticalOptions="Center" 
                                                      TextColor="Black"/>
                                        </StackLayout>
                                        <BoxView HeightRequest="1" BackgroundColor="Gray"/>
                                    </StackLayout>
                                </ViewCell>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>
                </StackLayout>
            </Grid>
        </ContentPage>
    </MasterDetailPage.Master>
    <MasterDetailPage.Detail>
        <NavigationPage>
        </NavigationPage>
    </MasterDetailPage.Detail>
</MasterDetailPage>

No arquivo MainPage.xaml.cs temos o código onde os itens do menu, as imagens a serem exibidas e a respectiva página detalhe :
 
using System;
using System.Collections.Generic;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;
using XF_MasterDetail.Menu;
using XF_MasterDetail.Views;
namespace XF_MasterDetail
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class MainPage : MasterDetailPage
    {
        public List<MasterPageItem> menuList { get; set; }
        public MainPage ()
        {
	InitializeComponent ();
            menuList = new List<MasterPageItem>();
            // incluindo items de menu e definindo : title ,page and icon
            menuList.Add(new MasterPageItem() { Title = "Home", Icon = "home.png", TargetType = 
typeof(HomePage) });
            menuList.Add(new MasterPageItem() { Title = "Configuração", Icon = "settings.png", TargetType = 
typeof(ConfiguracaoPage) });
            menuList.Add(new MasterPageItem() { Title = "Ajuda", Icon = "help.png", TargetType = 
typeof(AjudaPage) });
            menuList.Add(new MasterPageItem() { Title = "LogOut", Icon = "logout.png", TargetType = 
typeof(LogoutPage) });
            // Configurando o ItemSource fpara o ListView na MainPage.xaml
            paginaMestreList.ItemsSource = menuList;
            // navegação inicial
            Detail = new NavigationPage((Page)Activator.CreateInstance(typeof(HomePage)));
        }
        // Evento para a seleção de item no menu
        // trata a seleção do usuário no ListView
        private void OnMenuItemSelected(object sender, SelectedItemChangedEventArgs e)
        {
            var item = (MasterPageItem)e.SelectedItem;
            Type page = item.TargetType;
            Detail = new NavigationPage((Page)Activator.CreateInstance(page));
            IsPresented = false;
        }
    }
}

 

Este exemplo é bem simples e foi feito para recordar o conceito de Master Detail Page.

Pegue o código do projeto compartilhado e as imagens aqui :  XF_MasterDetail.zip (sem as referências)

"Disse-lhes, pois, Jesus: Quando levantardes o Filho do homem, então conhecereis que EU SOU, e que nada faço por mim mesmo; mas isto falo como meu Pai me ensinou."
 João 8:28
 

Veja os Destaques e novidades do SUPER DVD Visual Basic (sempre atualizado) : clique e confira !

Quer migrar para o VB .NET ?

Quer aprender C# ??

Quer aprender os conceitos da Programação Orientada a objetos ?

Quer aprender o gerar relatórios com o ReportViewer no VS 2013 ?

  Gostou ?   Compartilhe no Facebook   Compartilhe no Twitter

Referências:

José Carlos Macoratti