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>

Daha önce yazdığımız C# ile WebCrawler Uygulamasına ek olarak, bu sefer, sayfadaki resimleri bulup, ekranda gösteren bir uygulama yazacağız.

Uygulamamız, bir web sayfasına bağlacak, sayfadaki img taglarının src değerlerini bir diziye dolduracak ve bu diziyi ekranda gösterecek. Dizi’den bir satır seçildiğinde, ilgili resmi ekrana getirecek.

Hemen aşağıdaki ekran görüntüsünü oluşturarak uygulamayı yazmaya başlayalım;

Bir web sayfasındaki resimleri bulmak için, List<string> tipinde değer döndüren ResimleriBul() isimli fonksiyon yazacağız. Bu fonksiyon adres bilgisini parametre olarak alacak, sayfadaki her img tagının src özelliğini bir listeye ekleyecek. Geriye bu liste’yi döndürecek.

private List<string> ResimleriBul(string adres)
{
	List<string> arrReturn = new List<string>();

	WebRequest wr = WebRequest.Create(txtAdres.Text);
	WebResponse ws = wr.GetResponse();
	StreamReader sr = new StreamReader(ws.GetResponseStream(), Encoding.UTF8);
	string response = sr.ReadToEnd();
	sr.Close();
	ws.Close();

	string imageHtmlCode = "<img";
	string imageSrcCode = "src=\"";

	int index = response.IndexOf(imageHtmlCode);
	while (index != -1)
	{
		response = response.Substring(index);

		int tagSonu = response.IndexOf('>');
		int baslangic = response.IndexOf(imageSrcCode) + imageSrcCode.Length;
		int bitis = response.IndexOf('"', baslangic + 1);

		if (bitis > baslangic && baslangic < tagSonu)
			arrReturn.Add(response.Substring(baslangic, bitis - baslangic));

		if (imageHtmlCode.Length < response.Length)
			index = response.IndexOf(imageHtmlCode, imageHtmlCode.Length);
		else
			index = -1;
	}

	return arrReturn;
}

ResimleriBul butonunun Click olayında, ResimleriBul() fonksiyonunun döndürdüğü her öğe, ListBox kontrolüne dolduracak.

private void btnResimleriBul_Click(object sender, EventArgs e)
{
	lbResimListe.Items.Clear();

	foreach (string image in ResimleriBul(txtAdres.Text))
		lbResimListe.Items.Add(image);
}

Son olarak, ListBox’ın seçili elemanı her değiştiğinde, PictureBox’ta seçili resim gösterilecek.

private void lbResimListe_SelectedIndexChanged(object sender, EventArgs e)
{
	pbResim.Load(lbResimListe.SelectedItem.ToString());
}

Uygulamanın kaynak kodlarını buradan indirebilirsiniz.

İstediğiniz resimleri, aşağıdaki css tekniği ile önyükleyebilirsiniz.

#preloadedImages
{
  width: 0px;
  height: 0px;
  display: inline;
  background-image: url(path/imageA.png);
  background-image: url(path/imageB.png);
  background-image: url(path/imageC.png);
  background-image: url(path/imageD.png);
  background-image: url(path/imageE.png);
  background-image: url();
}