Uygulamalarımızda uzun süren işlemler sırasında, kullanıcıya işlemin sürdüğünü göstermek için genellikle yükleniyor (loading) göstergeleri kullanırız.

Windows 8 için geliştirdiğimiz Metro Style uygulamalarda bu yeteneği uygulamamıza katmak için ProgressRing sınıfından faydalanabiliriz.

Bu makalede uygulamanın açılışı esnasında bir yükleniyor (loading) göstergesi ekrana getireceğiz, 5 saniye bekledikten sonra (uygulamanın ihtiyaç duyacağı tüm modüllerin yüklenmesi 5 saniye sürecek diye varsayıyoruz) yükleniyor göstergesini ekrandan kaldıracak ve Gerekli Modüller Yüklendi metnini ekranda göstereceğiz.

Hemen yeni bir Visual Studio 2011 açarak örnek proje üzerinde geliştirmeye başlayalım;

Yeni Proje oluşturma dialog kutusunda Windows Metro Style grubunda yer alan Application proje şablonunu seçelim ve projemize bir isim verelim (bu örnekte benim kullandığım isim, ProgressRingOrnek)

Proje oluşturulduğunda MainPage.xaml dosyasının içeriği;

<UserControl x:Class="ProgressRingOrnek.MainPage"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
	mc:Ignorable="d"
	d:DesignHeight="768" d:DesignWidth="1366">

	<Grid x:Name="LayoutRoot" Background="#FF0C0C0C">
	</Grid>

</UserControl>

Öncelikle Grid elementi içerisine bir tane ProgressRing, bir tane de TextBlock nesnesi ekliyoruz;

<ProgressRing x:Name="ProgressItem" HorizontalAlignment="Center" VerticalAlignment="Center" Width="240" Height="240" />

<TextBlock x:Name="MessageItem" HorizontalAlignment="Center" VerticalAlignment="Center" Visibility="Collapsed" Text="Gerekli Modüller Yüklendi!" FontSize="22" />

ProgressRing elementini ekranda yatay eksende (HorizontalAlignment) ve dikey eksende (VerticalAlignment) ortalıyoruz (Center), ayrıca genişlik (Width) ve yükseklik (Height) değerlerini de belirliyoruz (240 px).

TextBlock elementini de ekranda yatay eksende (HorizontalAlignment) ve dikey eksende (VerticalAlignment) ortalıyoruz (Center), font boyutunu (FontSize) ayarlıyoruz (22 px), ekranda gözükmemesi için Visibility özelliğine Collapsed değerini veriyoruz.

HorizontalAlignment özelliğine verilebilecek değerler;

• Center
• Left
• Right
• Stretch

VerticalAlignment özelliğine verilebilecek değerler;

• Bottom
• Center
• Stretch
• Top

Visibility özelliğine verilebilecek değerler;

• Collapsed
• Visible

MainPage.xaml.cs dosyasında, MainPage sınıfının constructor‘ında ilk önce ProgressRing nesnesini ekranda gösterelim;

ProgressItem.IsActive = true;

5 saniye gecikme sağlayıp, istediğimiz işi yapacak kodu yazmaya başlayalım. Bu iş için DispatcherTimer sınıfını kullanacağız.

TimeSpan tipinde Interval özelliğine 5 saniye gecikme sağlayacak TimeSpan.FromSeconds(5) değerini veriyoruz;

timer.Interval = TimeSpan.FromSeconds(5);

DispatcherTimer nesnesinin Tick olayını yakalayıp, ProgressRing nesnesini ekrandan gizlemeli, TextBlock nesnesini ekranda göstermeliyiz;

timer.Tick += delegate(object sender, object e)
{
	timer.Stop();

	ProgressItem.IsActive = false;
	MessageItem.Visibility = Visibility.Visible;
};

Son olarak, DispatcherTimer nesnesinin Start() method’unu kullanarak, 5 saniyelik süreci başlatıyoruz.

DispatcherTimer nesnesinin Interval özelliğinde belirlediğimiz süre dolduğunda Gerekli Modüller Yüklendi mesajı ekranda belirecek;

Geliştirdiğimiz uygulamalarda kullanıcıyı bilgilendirmek ve/veya yönlendirmek için Mesaj Kutularını (MessageBox) kullanırız.

Metro Style uygulamalar, System.Windows.Forms namespace’inde yeralan MessageBox sınıfına erişemezler. MessageBox sınıfı yerine MessageDialog sınıfını kullanarak kullanıcıya bilgilendirme kutusu gösterebilirler.

MessageDialog sınıfının constructor‘ı iki parametre alır;

• content (string) : Kullanıcıya göstermek istediğimiz mesaj
• title (string) : Mesaj kutusunun başlığı

Hemen yeni bir Visual Studio 2011 açarak örnek proje üzerinde geliştirmeye başlayalım;

Yeni Proje oluşturma dialog kutusunda Windows Metro Style grubunda yer alan Application proje şablonunu seçelim ve projemize bir isim verelim (bu örnekte benim kullandığım isim, MessageBoxOrnek)

Proje oluşturulduğunda MainPage.xaml dosyasının içeriği;

<UserControl x:Class="Windows8ApplicationBar.MainPage"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
	mc:Ignorable="d"
	d:DesignHeight="768" d:DesignWidth="1366">

	<Grid x:Name="LayoutRoot" Background="#FF0C0C0C">
	</Grid>

</UserControl>

Öncelikle uygulamamızın arkaplan rengini değiştirmek için Grid element’inin Background özelliğine Maroon değerini atayalım;

<UserControl x:Class="Windows8ApplicationBar.MainPage"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
	mc:Ignorable="d"
	d:DesignHeight="768" d:DesignWidth="1366">

	<Grid x:Name="LayoutRoot" Background="Maroon">
	</Grid>

</UserControl>

Grid element’inin içerisine bir adet Button elementi oluşturalım ve Click olayını bir method’a yönlendirelim;

<Button x:Name="btnMesaj" HorizontalAlignment="Center" VerticalAlignment="Center" Content="Karşıla" Click="btnMesaj_Click" />

Böylece MainPage.xaml dosyasının XAML kod’u aşağıdaki hale gelmiş oluyor;

<UserControl x:Class="MessageBoxOrnek.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="768" d:DesignWidth="1366">

    <Grid x:Name="LayoutRoot" Background="Maroon">

        <Button x:Name="btnMesaj" HorizontalAlignment="Center" VerticalAlignment="Center" Content="Karşıla" Click="btnMesaj_Click" />

    </Grid>

</UserControl>

MainPage.xaml.cs dosyasında btnMesaj_Click method’unu yazıyoruz;

private async void btnMesaj_Click(object sender, RoutedEventArgs e)
{
	MessageDialog dialog = new MessageDialog("Merhaba, uygulamamıza hoşgeldiniz...", "Sayın Kullanıcı");

	await dialog.ShowAsync();
}

MessageDialog sınıfı Windows.UI.Popups namespace’inde yer aldığı için, dosyanın using kısmına,

using Windows.UI.Popups;

satırını eklememiz gerekiyor.

Böylece, uygulamayı çalıştırdıktan ekranın ortasında gördüğümüz butona tıkladığımızda, aşağıdaki gibi bir Mesaj Kutusu ekranda belirecektir;

Gösterilen MessageDialog sadece Kapat (Close) butonuna sahiptir. Eğer Close butonu yerine kendi butonlarımızı kullanmak istersek, dialog değişkeninin Commands özelliğine IUICommand interface’ini implemente eden sınıfların birinden yeni bir instance eklememiz gerekir (Örneğin UICommand sınıfı).

Not : MessageDialog Commands özelliğine en fazla 3 adet buton ekleyebiliriz.

Yukarıdaki örnekte gösterdiğimiz MessageDialog‘a Yoksay, Kapat, Tümünü Kapat butonları ekleyelim, btnMesaj_Click method’unu aşağıdaki gibi değiştiriyoruz;

private async void btnMesaj_Click(object sender, RoutedEventArgs e)
	{
	MessageDialog dialog = new MessageDialog("Merhaba, uygulamamıza hoşgeldiniz...", "Sayın Kullanıcı");

	dialog.Commands.Add(new UICommand("Yoksay", (command) =>
	{
		/// yoksayıldı
	}));

	dialog.Commands.Add(new UICommand("Kapat", (command) =>
	{
		/// kapatıldı
	}));

	dialog.Commands.Add(new UICommand("Tümünü Kapat", (command) =>
	{
		/// tümü kapatıldı
	}));

	await dialog.ShowAsync();
}

Windows 8 uygulamalarında sık kullanılan özelliklerin Application Bar sayesinde hızlı erişilmesini sağlayabilirsiniz.

Hemen yeni bir Visual Studio 2011 açarak geliştirmeye başlıyoruz;

Öncelikle Yeni Proje oluşturma dialog kutusunda Windows Metro Style grubunda yer alan Application proje şablonunu seçelim ve projemize bir isim verelim (bu örnekte benim kullandığım isim, Windows8ApplicationBar)

Proje oluşturulduğunda MainPage.xaml dosyasının içeriği;

<UserControl x:Class="Windows8ApplicationBar.MainPage"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
	mc:Ignorable="d"
	d:DesignHeight="768" d:DesignWidth="1366">

	<Grid x:Name="LayoutRoot" Background="#FF0C0C0C">
	</Grid>

</UserControl>

İlk önce uygulamamızın altına hizalanacak bir Application Bar oluşturalım. Bunun için Grid‘in içerisine ApplicationBar elementinden bir tane ekliyoruz;

<ApplicationBar VerticalAlignment="Bottom">
	<Button Content="Çıkış" x:Name="btnCikis" />
</ApplicationBar>

ApplicationBar elementi içerisine eklediğimiz Button elementi sayesinde uygulamamızın altına Çıkış butonu içeren bir Application Bar oluşturmuş olduk.

ApplicationBar elementinin VerticalAlignment özelliği, oluşturulacak Application Bar‘ın ekranda nereye konumlandırılacağını belirliyor.

VerticalAlignment özelliğine verebileceğiniz değerler;

• Top : Ekranın üstüne konumlanır
• Center : Ekranın ortasına konumlanır
• Bottom : Ekranın altına konumlanır
• Stretch : Ekranı kaplar

Çıkış butonuna basıldığında uygulamanın kapanması için, butonun Click olayını bir method’a bağlamamız lazım. Çıkış butonunu şu şekilde güncelliyoruz;

<Button Content="Çıkış" x:Name="btnCikis" Click="btnCikis_Click" />

MainPage.xaml.cs dosyasına da btnCikis_Click method’unu yazmamız gerekiyor;

private void btnCikis_Click(object sender, RoutedEventArgs e)
{
	Application.Current.Exit();
}

Bu haliyle uygulamamızı bir çalıştıralım;

Application Bar‘ı açmak için, uygulamanın herhangi bir yerinde mouse’un sağ tuşuna basıyoruz;

Ekranın altında beliren Application Bar‘daki Çıkış butonuna tıklarsak uygulamamız kapanır.

Internet Explorer‘ın Windows 8 için geliştirilen versiyonu (IE 10) aynı anda iki Application Bar kullanacak şekilde yazılmış. Bir Application Bar ekranın altında belirirken, diğeri ekranın üstünde beliriyor.

Biz de uygulamamıza ikinci bir Application Bar ekleyebiliriz. İkinci ekleyeceğimiz Application Bar, ekranın üstüne konumlansın;

<ApplicationBar VerticalAlignment="Top"></ApplicationBar>

Yeni eklediğimiz Application Bar‘ın birden fazla nesne içerebilmesi için, kapsayıcı olarak bir StackPanel ekliyoruz. StackPanel içerisine ekleyeceğimiz nesnelerin yan yana dizilmesi için, Orientation özelliğini Horizontal olarak belirlememiz gerekiyor. Orientation özelliğine verebileceğimiz değerler;

• Vertical : Nesneler alt alta dizilir (Varsayılan değer)
• Horizontal : Nesneler yan yana dizilir

StackPanel‘in içerisine bir Button, bir TextBox ve bir Button daha ekliyoruz;

<Button x:Name="btnAyarlar">
	<Button.Content>
		<StackPanel Orientation="Horizontal">
			<Image Width="20" Height="20" Source="Images/SmallLogo.png" />
			<TextBlock Text="Ayarlar" Margin="5,0,0,0" />
		</StackPanel>
	</Button.Content>
</Button>
<TextBox Margin="15,0,0,0" Width="150" x:Name="txtAranan" />
<Button x:Name="btnAra" Content="Ara" />

İlk eklediğimiz Button‘un bir görsele de sahip olabilmesi için, Content’ine bir Image, bir de TextBlock ekliyoruz.

Image‘ın Source özelliğine, proje’nin Images dizininden bir görsel seçiyoruz; (SmallLogo.png)

Örnek uygulamanın XAML kodları’nın tamamı;

<UserControl x:Class="Windows8ApplicationBar.MainPage"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
	mc:Ignorable="d"
	d:DesignHeight="768" d:DesignWidth="1366">

	<Grid x:Name="LayoutRoot" Background="#FF0C0C0C">
		<ApplicationBar VerticalAlignment="Top">
			<StackPanel Orientation="Horizontal">
				<Button x:Name="btnAyarlar">
					<Button.Content>
						<StackPanel Orientation="Horizontal">
							<Image Width="20" Height="20" Source="Images/SmallLogo.png" />
							<TextBlock Text="Ayarlar" Margin="5,0,0,0" />
						</StackPanel>
					</Button.Content>
				</Button>
				<TextBox Margin="15,0,0,0" Width="150" x:Name="txtAranan" />
				<Button x:Name="btnAra" Content="Ara" />
			</StackPanel>
		</ApplicationBar>
		<ApplicationBar VerticalAlignment="Bottom">
			<StackPanel Orientation="Horizontal">
				<Button Content="Çıkış" x:Name="btnCikis" Click="btnCikis_Click" />
			</StackPanel>
		</ApplicationBar>
	</Grid>

</UserControl>

Windows 8 Programlama makalelerinde ilk uygulamamızı geliştirmeye başlıyoruz.

Windows 8 Başlangıç Ekranımızda (Start Screen) Visual Studio 2011 üzerine tıklayarak, yeni bir Visual Studio 2011 başlatıyoruz.

File / New / Project menüsünden Windows Metro Style kategorisindeki Application proje şablonunu seçiyoruz ve MetroStyleIlkUygulama ismini vererek projemizi oluşturuyoruz.

Proje oluşturulduğunda Visual Studio 2011 varsayılan olarak MainPage.xaml dosyasını açıyor. Uygulamamızın başlangıç ekranı varsayılan olarak MainPage.xaml dosyasıdır.

Grid elementi içerisine bir button, bir de label eklemek için aşağıdaki satırları yazıyoruz;

<Button Content="Mesaj Göster" FontSize="28" Width="250" Height="80" HorizontalAlignment="Center" />
<TextBlock x:Name="MessageText" FontSize="48" Foreground="White" />

WPF ve Silverlight‘ta Label nesnesi oluşturmak için TextBlock nesnesi kullanmamız gerekiyor. Bu elementler ile ekranımıza Mesaj Göster metinli bir button ve metin içermediği için ekranda gözükmeyen bir textblock nesnesi koymuş olduk.

Fakat bu kontrolleri ekranda ortalayabilmek için bir StackPanel içerisine koymamız gerekiyor;

<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
	<Button Content="Mesaj Göster" FontSize="28" Width="250" Height="80" HorizontalAlignment="Center" />
	<TextBlock x:Name="MessageText" FontSize="48" Foreground="White" />
</StackPanel>

StackPanel ve Button elemanlarına verdiğimiz Alignment özellikleri sayesinde elemanları ekranda ortalıyoruz.

Son olarak Button element’imize

Click="Button_Click"

özelliğini ekleyelim. Böylece butona tıklanma event‘i ile tetiklenen bir method‘umuz oluyor.

MainPage.xaml.cs dosyasına;

private void Button_Click(object sender, RoutedEventArgs e)
{
	MessageText.Text = "Windows 8 üzerinde çalışan\r\nilk uygulamamız!!";
}

method’unu ekliyoruz.

Son olarak F5 tuşuna basarak projeyi test amaçlı çalıştırıyoruz. Uygulama açılışında ilk önce bekleme ekranı ekrana geliyor.

Fakat çok kısa süre içerisinde ilk ekranımız açılıyor.

Butona tıkladığımızda TextBlock metin ile doluyor.

Kodların tamamı;

<UserControl x:Class="MetroStyleIlkUygulama.MainPage"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
	mc:Ignorable="d"
	d:DesignHeight="768" d:DesignWidth="1366">

<Grid x:Name="LayoutRoot" Background="#FF0C0C0C">
	<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
		<Button Content="Mesaj Göster" FontSize="28" Width="250" Height="80" HorizontalAlignment="Center" Click="Button_Click" />
		<TextBlock x:Name="MessageText" FontSize="48" Foreground="White" />
	</StackPanel>
</Grid>

</UserControl>