makaleler / Diğer Konular / Xamarin Master-Detail Page

Xamarin Master-Detail Page

15.05.2017 16:37:48

Xamarin Master-Detail Page Örneği

Merhabalar Arkadaşlar, (Not:Lütfen öneri ve sorularınızı yorum olarak atınız. Teşekkürler şimdiden)
Xamarin'de kullanılan tasarım çeşidi olan Master-Detail Sayfa tasarımından bahsedeceğim. Master-Detail sayfa tasarımı web uygulamasındaki MasterPage yapısıyla benzerlik göstermektedir. MasterPage yapısında her sayfada sabit olan kısımları Master'da belirtip değişen kısımları değişen bölümlere ayarlayarak Master'a bağlanabiliyor. Master-Detail yapısı da buna benzer olarak bir menü olup Master tarafında değişmeyen kısımlar bulunmaktadır. Detail kısmında da çağırılan formları açabiliyoruz. Bu yapıyla zarif bir tasarım yapabilmekteyiz. Aşağıda Master-Detail örnek kodlarını vereceğim.

Aşağıdaki kodlar AnaSayfa.xaml'a aittir.


<?xml version="1.0" encoding="utf-8" ?>
<MasterDetailPage xmlns="[url]http://xamarin.com/schemas/2014/forms[/url]"
             xmlns:x="[url]http://schemas.microsoft.com/winfx/2009/xaml[/url]"
             x:Class="AnaSayfa" Title="Mobil İşlemler" BackgroundColor="#eee9e9" x:Name="Master" >


    <ContentPage.ToolbarItems>
        <ToolbarItem  Text="Çıkış" Clicked="Guvenli_cikis" Order="Primary" />
    </ContentPage.ToolbarItems>

    <MasterDetailPage.Master >
        
        <ContentPage Padding="10"  Title="Test"  >
            <ContentPage.Content>
               
                <ScrollView >
                    <StackLayout>
                    <StackLayout  Margin="5,30,5,5" >
                        <Label Text="TEST">
                        </Label>

                        <Button x:Name="b1" Text="Test1" BackgroundColor="#eee9e9" Clicked="Test1_Click" ></Button>
                       
                        <Button x:Name="b2" Text="Güvenli Çıkış" BackgroundColor="Red" Clicked="Guvenli_cikis" ></Button>
                       
                    </StackLayout>

                    <StackLayout VerticalOptions="End">
                        <Image x:Name="b11" Source="test.png"></Image>
                    </StackLayout>
                    </StackLayout>
                </ScrollView>
            </ContentPage.Content>
        </ContentPage>
    </MasterDetailPage.Master>

    <MasterDetailPage.Detail>
        
        <ContentPage Padding="10" >
            <ContentPage.Content>
                <StackLayout Margin="5,30,5,5">
                    <Label Text="Test">
                    </Label>
                </StackLayout>
            </ContentPage.Content>
        </ContentPage>
    </MasterDetailPage.Detail>
</MasterDetailPage>

Şimdi sıra AnaSayfa.xaml.cs kısmı aşağıdaki şekildedir.


using Android.Net;
using Plugin.Connectivity;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using Xamarin.Forms;
using Xamarin.Forms.Xaml;



namespace Anasayfa
{
    [XamlCompilation(XamlCompilationOptions.Compile)]

    public partial class AnaSayfa : MasterDetailPage
    {
        public  AnaSayfa()
        {
            InitializeComponent();         
            IsPresented = false;
            Detail = new NavigationPage(new Test());
        }
        void Test1_Click(object sender, System.EventArgs e)
        {   
            IsPresented = false;
          
                Detail = new NavigationPage(new Test1());
             
        }
        void Guvenli_cikis(object sender, EventArgs e)
        {
            if (Device.OS == TargetPlatform.Android)
            {
                Android.OS.Process.KillProcess(Android.OS.Process.MyPid());
            }
        }
    }
}

İyi çalışmalar.

yazar okanyurt

Yorumlar

Bu içerik için sizde yorum yapabilirsiniz!
anasayfa | makaleler | haberler | dosyalar | linkler | hakkımızda