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

Arşiv

Etiketlenen yazılar wpf

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>