Windows 8 Navigation - Ömür Erdem

Herkese merhaba,

Uzun bir aradan sonra fırsat bulup bloğuma bir şeyler yazabildim. Yaklaşık 3 haftalık bir final programının ardından sizlere Windows 8′de sayfalar arasındaki geçişleri ve bu geçişler sırasında veri gönderip almayı dilim döndüğünce basitçe anlatacağım. Lafı uzatmadan konumuza geçelim…

Evet öncelikle “Navigation” nedir ondan başlamak istiyorum. Teknik olarak sayfalar arasındaki gezinme şeklinde ifade edebiliriz. Aslına bakarsanız son zamanlarda biz bu işlemi oldukça fazla yapıyoruz. Kullandığımız akıllı cep telefonlarından tutun da internet sitelerine kadar bir çok alanda karşımıza çıkıyor…

Bu konuyu iki sayfası olan bir örnek uygulama üzerinde görelim. Vakit kaybetmeden Microsoft Visual Studio 2011′i çalıştırıp File-> New->Project-> Windows Metro Style-> Blank Application ‘ı seçip projemizi oluşturuyoruz. BlankPage.xaml dosyamızı aşağıdaki gibi ayarlıyoruz.

[xaml]

<Page
    x:Class="Navigation.BlankPage"
    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 Background="FloralWhite">
        <TextBlock Name="textblock1" HorizontalAlignment="Left" Margin="358,212,859,517" TextWrapping="Wrap" Text="Username:" VerticalAlignment="Top" FontSize="32" Foreground="Black" d:LayoutOverrides="HorizontalMargin" />
        <TextBlock Name="textblock2" HorizontalAlignment="Left" Margin="358,278,0,0" TextWrapping="Wrap" Text="Password:" VerticalAlignment="Top" FontSize="32" Foreground="Black" />
        <TextBox Name="txt_username" HorizontalAlignment="Left" Margin="554,200,0,0" TextWrapping="Wrap" BorderBrush="Black" VerticalAlignment="Top" FontSize="32" Width="350" Height="50"/>
        <TextBox Name="txt_password" HorizontalAlignment="Left" Margin="554,266,0,0" TextWrapping="Wrap" BorderBrush="Black" VerticalAlignment="Top" FontSize="32" Width="350" Height="50"/>
        <Button Name="btn_login" Content="Login" HorizontalAlignment="Left" Margin="608,358,0,0" VerticalAlignment="Top" BorderBrush="Black" BorderThickness="3" Width="175" Foreground="Black" FontSize="32" Click="btn_login_Click"/>
    </Grid>
</Page>

<Page

x:Class="Navigation.BlankPage"

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>

</Page>

Ardından projemizin üzerine gelip mouse ile sağ tıklayarak Add-> New Item->BlankPage‘i seçip ismini Karsila.xaml olarak ayarlıyoruz.

Şimdi de Karsila.xaml sayfamızı aşağıdaki gibi tasarlıyoruz.

[xaml]

<Page
    x:Class="Navigation.Karsila"
    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 Background="Azure">
        <TextBlock Name="textblock1" HorizontalAlignment="Left" Margin="358,212,859,517" TextWrapping="Wrap" Text="Username:" VerticalAlignment="Top" FontSize="32" Foreground="Black" d:LayoutOverrides="HorizontalMargin" />
        <TextBlock Name="textblock2" HorizontalAlignment="Left" Margin="358,278,0,0" TextWrapping="Wrap" Text="Password:" VerticalAlignment="Top" FontSize="32" Foreground="Black" />
        <TextBlock Name="txt_username" HorizontalAlignment="Left" Margin="534,200,0,0" Foreground="Orange" TextWrapping="Wrap" VerticalAlignment="Top" FontSize="32" Width="350" Height="50"/>
        <TextBlock Name="txt_password" HorizontalAlignment="Left" Margin="534,266,0,0" Foreground="Orange" TextWrapping="Wrap" VerticalAlignment="Top" FontSize="32" Width="350" Height="50"/>
    </Grid>
</Page>

<Page

x:Class="Navigation.Karsila"

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>

</Page>

Artık kullanacağımız sayfalar hazır.:) Gelelim işin kod kısmına. Hemen BlankPage.xaml.cs dosyamıza geçiyoruz ve aşağıdaki kodları yazıyoruz.

[C#]

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
{

    public sealed partial class BlankPage : Page
    {
        string username, password;
        string[] dizi = new string[2];
        public BlankPage()
        {
            this.InitializeComponent();
        }

        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
        }

        private void btn_login_Click(object sender, RoutedEventArgs e)
        {
            username = txt_username.Text;
            password = txt_password.Text;
            dizi[0] = username;
            dizi[1] = password;
            this.Frame.Navigate(typeof(Karsila), dizi); 
        }
    }
}

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

{

public sealed partial class BlankPage : Page

{

string username, password;

string[] dizi = new string[2];

public BlankPage()

{

this.InitializeComponent();

}

protected override void OnNavigatedTo(NavigationEventArgs e)

{

}

private void btn_login_Click(object sender, RoutedEventArgs e)

{

username = txt_username.Text;

password = txt_password.Text;

dizi[0] = username;

dizi[1] = password;

this.Frame.Navigate(typeof(Karsila), dizi);

}

Buradaki kodları kısaca açıklamam gerekirse, öncelikle string tipinde username ve password isimli değişkenlerimizi oluşturuyoruz. Ardından textboxlara girilen değerleri bu değişkenlerimize aktarıyoruz. Elimizde username ve password olmak üzere iki tane bilgi var ve ben bunları butona basılınca Karsila.xaml sayfasına göndermek istiyorum. Elimizdeki iki tane veriyi aynı anda gönderebilmem için string tipinde bir dizi oluşturuyorum ve bu bilgileri diziye aktarıyorum. Aktarma işlemi bittikten sonra artık Karsila.xaml sayfamıza bilgilerle beraber gidebiliriz. “this.Frame.Navigate(typeof(Karsila), dizi);” komutu ile Karsila.xaml sayfasına gidiyorum beraberimde de diziyi götürüyorum.

Peki Karsila.xaml sayfasına geldik ben bu bilgileri nasıl kullanacağım, bunlara nasıl erişeceğim? Çok basit. Hemen Karsila.xaml.cs sayfamıza geçiyoruz. Sayfamızın OnNavigatedTo methodu içerisine aşağıdaki kodları yazıyoruz. (OnNavigatedTo eventı sayfaya navigate edildiğinizde tetiklenir.)

[C#]

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 Karsila : Page
    {
        public Karsila()
        {
            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 title = e.Parameter as string [];
            txt_username.Text = title[0].ToString();
            txt_password.Text = title[1].ToString();
        }
    }
}

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 Karsila : Page

{

public Karsila()

{

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 title = e.Parameter as string [];

txt_username.Text = title[0].ToString();

txt_password.Text = title[1].ToString();

}

Buradaki kodları kısaca açıklayayım. BlankPage.xaml sayfamızdan gönderilen dizi içerisindeki bilgilere burada NavigationEventArgs e ile erişeceğiz. title isminde bir değişken oluşturup bunun da string tipindeki bir dizi olduğunu ifade ediyoruz. Ardından textblocklara gelen bilgileri yazdırıyoruz. Hepsi bu kadar. Gelin programımızın ekran çıktılarına bakalım…

Yukarıda username alanına “ömür” password alanına da “erdem” bilgilerini girip Login butonuna tıklıyorum. Hemen Karsila.xaml sayfamıza yönlendiriliyoruz ve aşağıdaki ekran bizi karşılıyor.

Görmüş olduğunuz gibi göndermiş olduğum bilgilerin ikisine de eriştim. Ben burada sadece ekrana yazdırdım. Ama bu verileri başka şekillerde de kullanabilirsiniz. Bir sonraki yazımda görüşmek dileğiyle…

Windows 8 Navigation

İlgili

Bunu paylaş:

İlgili

Bir cevap yazın Cevabı iptal et