Makale Özeti

Bu makalemde sizlerle birlikte Windows 8 üzerinde XAML ve C# kullanarak bir Hello World uygulamasının nasıl yapılacağını ve bir MetroStyle uygulamada ne gibi dosyalar bulunduğunu inceleyeceğiz.

Makale

Bu makalemde sizlerle birlikte Windows 8 üzerinde XAML ve C# kullanarak bir Hello World uygulamasının nasıl yapılacağını ve bir MetroStyle uygulamada ne gibi dosyalar bulunduğunu inceleyeceğiz.

Öncelikle Windows 8 üzerine kurduğumuz Visual Studio'yu açıyoruz. Hemen ardından File->New->Project'i seçiyoruz. Açılan ekranda sol taraftaki treeview içerisinden Visual C#'ı ve sonrasında ise Windows Metro Style'ı seçiyoruz. Burada karşımıza 6 çeşit proje şablonu geliyor. Bu proje şablonlarının farklılıklarına bu makale serimin bir önceki makalesinde değinmiştim. Biz temel bir uygulama yapacağımız için Blank App'ı seçiyoruz ve Ok tuşuna basarak ilk uygulamamızı oluşturuyoruz:

 

Uygulamamızı oluşturduğumuzda karşımıza çıkacak dosyaları solution explorer'dan inceleyelim.


Öncelikle her c# projesinde olduğu gibi bir AssemblyInfo.cs dosyamız var. Bunun dışında referanslarımızı görebiliyoruz. Burada referans olarak bir kütüphane veya bir servis ekleyebiliyoruz. Bunun dışında uygulamamızda kullanacağımız asset'leri saklamamız için bir klasör, uygulama ile ilgili ayarları tutabildiğimiz app.xaml ve giriş sayfamız olan MainPage.xaml'i görüyoruz. Bunların yanısıra makale serimizin ilk makalesinde bahsettiğimiz Package.appxmanifest dosyasını yine burada görüyoruz.

Şimdi isterseniz MainPage.xaml dosyamızı açalım ve uygulamamızı geliştirmeye başlayalım. Başlangıçta MainPage.xaml dosyamızın görüntüsü ve xaml kodu aşağıdaki gibi olacaktır:

<Page
    x:Class="HelloWorldXAML.MainPage"
    IsTabStop="false"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:HelloWorldXAML"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

    </Grid>
</Page>

Şimdi ise gridimize 3 satır ve 2 sütun ekliyoruz. Bu ekleme işlemini gridimizin kenarlarına tıklayarak yapıyoruz.
İlk satırın ilk sütununa bir TextBlock koyuyor ve Text property'sine Ad Soyad yazıyoruz.
İlk satır ikinci sütuna ise bir textbox koyuyor ve adını txtNameSurname veriyoruz, ayrıca Text property'sini sıfırlıyoruz.
İkinci satır ikinci sütuna bir Button koyuyoruz, adını btnSubmit veriyoruz ve Content Property'sine Merhaba De yazıyoruz.
Üçüncü satır ikinci sütuna ise yine bir tane TextBlock koyuyor ve Text property'sini temizleyip adına tbOutput veriyoruz.
Tüm bu kontrollerin fontlarını büyütüyoruz. Şimdi karşımızda aşağıdaki gibi bir ekran ve xaml kodu oluyor.

 

<Page
    x:Class="HelloWorldXAML.MainPage"
    IsTabStop="false"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:HelloWorldXAML"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="171*"/>
            <ColumnDefinition Width="512*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="61*"/>
            <RowDefinition Height="77*"/>
            <RowDefinition Height="78*"/>
            <RowDefinition Height="168*"/>
        </Grid.RowDefinitions>
        <TextBlock HorizontalAlignment="Left" Margin="10,10,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Height="102" Width="322" FontSize="26" Text="Ad Soyad"/>
        <TextBox x:Name="txtNameSurname" Grid.Column="1" HorizontalAlignment="Left" Margin="10,10,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Height="102" Width="546"/>
        <Button x:Name="btnSubmit" Content="Merhaba De" Grid.Column="1" HorizontalAlignment="Left" Height="134" Margin="10,10,0,0" Grid.Row="1" VerticalAlignment="Top" Width="546" FontSize="28"/>
        <TextBlock x:Name="tbOutput" Grid.Column="1" HorizontalAlignment="Left" Height="136" Margin="10,10,0,0" Grid.Row="2" TextWrapping="Wrap" VerticalAlignment="Top" Width="546" FontSize="28"/>

    </Grid>
</Page>

Şimdi ise button'a tıklandığında bize uyarı verebilmesi için gerekli kodu yazalım. Kodumuzu button'un click event'ine yazacağız. Bu event handler i oluşturmak için button'a çift tıklayabiliriz veya button seçiliyken properties sekmesinden eventları listeleyip ilgili event'a çift tıklayabiliriz.

cs dosyasına yazdığımız kod aşağıdaki gibi olacaktır:

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 HelloWorldXAML
{
    /// <summary>
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class MainPage : Page
    {
        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 btnSubmit_Click(object sender, RoutedEventArgs e)
        {
            tbOutput.Text = "Merhaba " + txtNameSurname.Text;
        }
    }
}

Şimdi ise uygulamamızın tamamlanmış halinin ekran görüntüsüne bakalım.