Merhaba arkadaşlar, bugünkü yazımda sizlere Windows 8 uygulamalarında sayfalar arasında nasıl geçiş yapabileceğimizden bahsedeceğim. Bu konu aslında "navigation" olarak adlandırılıyor. Bu tarz sayfalar arası geçiş hemen hemen tüm uygulamalarda karşımıza çıkıyor. Bu yüzden aslında uygulamalarımızın temelinde çok kullanacağımız bir özellik olarak düşünebiliriz. Bu sayfalar arası geçişi sizlere örnek bir uygulama üzerinden açıklamaya çalışacağım.
Öncelikle Visual Studio programını açıp yeni bir boş Windows Store uygulaması açıyoruz. Açtığımız uygulamada "MainPage.xaml" sayfasına 3 adet "textblock" sürükleyip bırakıyoruz. Bunların da yazılarını sırası ile ad,soyad ve telefon numarası olarak değiştiriyoruz. Her bir "textblock" yazısının karşısına da birer adet "textbox" sürükleyip bırakıyoruz. Bunların da "content" yazılarını silip içini boş bırakıyoruz. Tasarımınıza göre isterseniz yazı biçimlerini de ayarlayabilirsiniz. Ben yazıları biraz büyülttüm daha rahat okunması açısından. Arka plan rengini de tasarımınıza göre ayarlayabilirsiniz. "MainPage.xaml" sayfasının tasarım kodları aşağıdaki gibi olacak:
<Page
x:Class="navigation.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:navigation"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid>
<Grid.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black"/>
<GradientStop Color="#FFE81818" Offset="1"/>
</LinearGradientBrush>
</Grid.Background>
<TextBlock HorizontalAlignment="Left" Margin="456,321,0,0" TextWrapping="Wrap" Text="Ad:" VerticalAlignment="Top" FontSize="24"/>
<TextBlock HorizontalAlignment="Left" Margin="456,372,0,0" TextWrapping="Wrap" Text="Soyad:" VerticalAlignment="Top" FontSize="24"/>
<TextBlock HorizontalAlignment="Left" Margin="456,418,0,0" TextWrapping="Wrap" Text="Telefon Numarası:" VerticalAlignment="Top" FontSize="24"/>
<TextBox x:Name="ad" HorizontalAlignment="Left" Margin="747,318,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="212"/>
<TextBox x:Name="soyad" HorizontalAlignment="Left" Margin="747,369,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="212"/>
<TextBox x:Name="telefon" HorizontalAlignment="Left" Margin="747,415,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="212"/>
<Button Content="Gönder" HorizontalAlignment="Left" Margin="645,506,0,0" VerticalAlignment="Top" Height="66" Width="147" Click="Button_Click_1"/>
</Grid>
</Page>
Daha sonra yeni bir boş sayfa daha ekliyoruz ve ismini "goster.xaml" olarak ayarlıyoruz. Şimdi bu projede ne yapmak istediğimizden biraz bahsetmek istiyorum. Öncelikle burada iki adet sayfa oluşturduk ve ilkini ad,soyad ve telefon numarasını girebileceğimiz bir form oluşturduk. Amacımız bu formda girilen verileri "Gönder" tuşuna bastığımızda "goster.xaml" sayfasına yönlendirerek bu verileri çekebilmek. Böylece bir sayfada girdiğimiz verileri, yönlendirdiğimiz bir başka sayfada çekebiliyor olacağız ki "navigation" işlemlerinin temellerinde de bu yatıyor aslında.
Şimdi ikinci sayfamızı tasarlayalım. Bunun için yine üç adet "textblock" sürükleyip bırakıyoruz ve isimlerini diğer formdaki gibi "ad,soyad, telefon numarası şeklinde ayarlıyoruz". Bu sayfanın tasarımı da aşağıdaki gibi olacak:
<Page
x:Class="navigation.goster"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:navigation"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid>
<Grid.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black"/>
<GradientStop Color="#FF00AEFF" Offset="1"/>
</LinearGradientBrush>
</Grid.Background>
<TextBlock HorizontalAlignment="Left" Margin="525,332,0,0" TextWrapping="Wrap" Text="Ad:" VerticalAlignment="Top" FontSize="24"/>
<TextBlock HorizontalAlignment="Left" Margin="525,383,0,0" TextWrapping="Wrap" Text="Soyad:" VerticalAlignment="Top" FontSize="24"/>
<TextBlock HorizontalAlignment="Left" Margin="525,429,0,0" TextWrapping="Wrap" Text="Telefon Numarası:" VerticalAlignment="Top" FontSize="24"/>
<TextBlock x:Name="veriad" HorizontalAlignment="Left" Margin="782,332,0,0" TextWrapping="Wrap" VerticalAlignment="Top" FontSize="24" Foreground="#FFFF1111" FontWeight="Bold"/>
<TextBlock x:Name="verisoyad" HorizontalAlignment="Left" Margin="782,383,0,0" TextWrapping="Wrap" VerticalAlignment="Top" FontSize="24" Foreground="#FFFF1111" FontWeight="Bold"/>
<TextBlock x:Name="veritelefon" HorizontalAlignment="Left" Margin="782,429,0,0" TextWrapping="Wrap" VerticalAlignment="Top" FontSize="24" Foreground="#FFFF1111" FontWeight="Bold"/>
</Grid>
</Page>
Daha sonra "MainPage.xaml.cs" dosyasına gelip kodlarımızı yazmaya başlayabiliriz. Kodlar aşağıdaki gibi olacak:
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238
namespace navigation
{
/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
public sealed partial class MainPage : Page
{
string sad, ssoyad, stelefon;
string[] dizi = new string[3];
public MainPage()
{
this.InitializeComponent();
}
/// <summary>
/// Invoked when this page is about to be displayed in a Frame.
/// </summary>
/// <param name="e">Event data that describes how this page was reached. The Parameter
/// property is typically used to configure the page.</param>
protected override void OnNavigatedTo(NavigationEventArgs e)
{
}
private void Button_Click_1(object sender, RoutedEventArgs e)
{
sad = ad.Text;
ssoyad = soyad.Text;
stelefon = telefon.Text;
dizi[0] = sad;
dizi[1] = ssoyad;
dizi[2] = stelefon;
this.Frame.Navigate(typeof(goster), dizi);
}
}
}
Burada ad,soyad ve telefon numarasını tutmak için 3 adet string belirttik ve bu stringleri de tutmak için bir adet string tipinden dizi belirttik. Bu stringleri diziye attık çünkü diğer sayfaya tüm bu stringleri ayrı ayrı yollamayacağız. Sadece diziyi yollayacağız ve dizinin elemanlarını çekeceğiz. Burada en önemli kod kısmı "this.Frame.Navigate" metodudur. Bu metod iki adet parametre alıyor. Aldığı ilk parametreye sayfanın tipini, ikinci parametreye de göndereceğimiz veriyi giriyoruz. Bu sayfada yapacağımız işlemler bu kadar. Böylece "Gönder" tuşuna basıldığında diğer sayfaya ad, soyad, telefon numarası içeren bir adet dizi göndermiş olduk. Şimdi diğer sayfada da bu gönderdiğimiz verileri göstereceğiz.
"goster.xaml.cs" dosyasını açıp "OnNavigatedTo" metodunun içersine kodlarımızı yazacağız. Bu metod başka bir sayfadan bu sayfaya yönlendirme olduğunda tetiklenen bir metoddur. Bu sayfadaki kodlar da aşağıdaki gibi olacak:
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238
namespace navigation
{
/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
public sealed partial class goster : Page
{
public goster()
{
this.InitializeComponent();
}
/// <summary>
/// Invoked when this page is about to be displayed in a Frame.
/// </summary>
/// <param name="e">Event data that describes how this page was reached. The Parameter
/// property is typically used to configure the page.</param>
protected override void OnNavigatedTo(NavigationEventArgs e)
{
var veri = e.Parameter as String[];
veriad.Text = veri[0].ToString();
verisoyad.Text = veri[1].ToString();
veritelefon.Text = veri[2].ToString();
}
}
}
Bu sayfada da "NavigationEventArgs" argumanından gelen parametreyi "String" türündeki dizi değişkeni olarak "veri" adında tanımladığımız değişkene atıyoruz. Böylece diğer sayfada "dizi" adı ile tanımladığımız dizi şu anda "veri" değişkenine atanmış oldu. Daha sonrada bu dizinin elemanlarını sırası ile "textBlock" araçlarına yazdırıyoruz. Böylece programımız sonlanmış oldu. Ekran görüntüleri aşağıdaki gibidir:
Böylece bu hafta uygulamalarımızdaki sayfalarda nasıl geçiş yapabileceğimizi ve verileri nasıl taşıyabileceğimizi görmüş olduk.Haftaya Windows Store uygulamalarının yaşam döngüsünden bahsedeceğim. Görüşmek üzere...
0 yorum:
Yorum Gönder