Verticalalignment | Engin Polat\'ın Windows 8 , Windows Phone 8 ve C# içerikli programcılık sitesi

Arşiv

Etiketlenen yazılar verticalalignment

Windows 8 Metro Style Uygulamalarda ProgressRing Kullanımı

23 November 2011 4 yorum

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;

Windows 8 Uygulamaya Application Bar Ekleme

16 November 2011 Yorum yapılmamış

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 Metro Style ilk uygulamamız

07 October 2011 1 yorum

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>