Pythontr

husonet | Tarih: 15.05.2017

Xamarin Master-Detail Page

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="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
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.