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

Arşiv

Etiketlenen yazılar usercontrol

Windows 8 Uygulamalarında MessageBox yerine MessageDialog Sınıfının Kullanımı

23 November 2011 1 yorum

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 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>

WPF ve Windows 8 Uygulamalarında Arkaplan Rengi

01 November 2011 1 yorum

Windows 8 uygulamaları WPF ile geliştirildikleri için, WPF uygulamalarında arkaplan’a verebildiğimiz geçiş renkleri (gradient) Windows 8 uygulamalarında da kullanılabiliyor.

LinearGradientBrush sınıfını kullanarak uygulamamızın arkaplan renginin birden fazla renk arasında geçişli (gradient) olmasını sağlayabiliriz.

İlk olarak Visual Studio 2011‘imizi açarak New Project dialog penceresinde Windows Metro Style grubundan Application şablonunu seçelim ve yeni oluşturacağımız projeye bir isim verelim;

İlk önce iki renk içeren bir geçişe sahip arkaplan hazırlayalım;

<UserControl x:Class="RenkliUygulama.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">
		<Grid.Background>
			<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
				<GradientStop Color="#3f98f1"/>
				<GradientStop Color="#003c7b" Offset="1"/>
			</LinearGradientBrush>
		</Grid.Background>
	</Grid>

</UserControl>

LinearGradientBrush element’inin StartPoint özelliğine 0,0 değerini, EndPoint özelliğine 1,1 değerini verdik.

StartPoint ve EndPoint alanlarına vereceğimiz değerler için, aşağıdaki şablona bakabilirsiniz;

Yukarıdaki Xaml koduna sahip formu çalıştırdığımızda aşağıdaki ekran ile karşılaşırız;

Eğer iki renk değil, beş renk geçişli bir arkaplan oluşturmak istiyorsak, GradientStop elemanlarını artırmamız lazım;

<UserControl x:Class="RenkliUygulama.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">
		<Grid.Background>
			<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
				<GradientStop Color="White"/>
				<GradientStop Color="#FEFFBF3C" Offset="0.25"/>
				<GradientStop Color="#FEFF607C" Offset="0.5"/>
				<GradientStop Color="#FED68FAC" Offset="0.75"/>
				<GradientStop Color="#FF4C68AD" Offset="1"/>
			</LinearGradientBrush>
		</Grid.Background>
	</Grid>

</UserControl>

Yukarıdaki Xaml koduna sahip formu çalıştırdığımızda aşağıdaki ekran ile karşılaşırız;

LinearGradientBrush sınıfı yerine RadialGradientBrush sınıfını da kullanabiliriz.

RadialGradientBrush kullanarak yaptığınız form arkaplan görüntülerini yorum alanında paylaşın.

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>