imamlar - Wpf Nedir Nasıl Kullanılır

Arkadaşlar Bu konumuzda Wpf Application ile Nasıl Uygulama Yapabiliriz ve Wpf'in Bize kazandırdığı ek özellikleri Sizlerle Tanıştıracağım.

Öncelikle arkadaşlar Programımız Wpf Application olarak açıyoruz.
Sonra ise Alttaki resimlerde Görüldüğü gibi wpf Application Ekranımız Önümüze Geldi .
Peki Nedir Bu Wpf? Ne gibi özellikleri var?Form Application da kullanabilirmiyiz?

1.Toolbox Penceresi:Kontrollere erişmek için kullanacağımız penceredeir.
2.Main Window:Form Tasarımın yapılacağı yer’dir.
3.Solution Explorer:Projede kulandığımız Tüm Formlar ,resimler gibi dosyaları göreceğimiz penceredir.
4.XAML penceresi:Form tasarımımıza göre XAML kodlarını oluştuğu pencere’dir.
5.Properties Penceresi:Kontrollere ait özellikleri görebileceğimiz pencere’dir.
Main Window alnına bir kontrolü eklemek için,kontrolü dürükleyerek Main Window ekranına sürükleyebiliriz yada o kontrol üzerinde çift tıklayabiliriz.

Özellik Adları Ve Açıklamaları

Özellik Adı	Açıklama
Width	Genişliği Ayarlar
Heigt	Yüksekliği Ayarlar
Horizontal Alignment	Sayfa Üzerindeki Yatay Yerini Belirler
Vertical Alignment	Sayfa Üzerindeki Dikey Yerini Belirler
Font	Yazı Karekterini Ve Boyutunu Ayarlar
Fore Color	Yazı Rengini Ayarlar
Background	Taban Rengini veya Taban Resmini Ayarlar
Name	Kontrolün isim Değeri

Alttaki Tabloda Gerekli Bilgileri bulabilirsiniz.

//////////////////////////////////////////////////////////////////////////////////////////////////////////
Wpf Kontrolleri ve Özellikleri Burdan Kullanabilirsiniz.

Kontrol Adı	Açıklaması
Frame	Web Siteleri göstermek için kullanılır
GridSplitter	Grid kullanarak alanlar oluşturmak için kullanılır.
Menu	Menü Yapmak İçin Kullanılır

Diğerleri Bildiğimiz için Yazmayı Gerek duymadım…
Aşağıda bir örnekle buton oluşturalım

<Window x:Class="wpfye_Giris.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="Ebubekir Yazılım" Height="350" Width="525">

<Grid>

</Grid>

</Window>
Eğer Buton veya Animasyon Yapmak istiyorsak(((<Grid>Buraya Yaz</Grid>)))
Şimdi Bir Örnek Yapalım Arkadaşlar Wpf’in Kodlaması C# ile Aynı’dır.Aynı Şekilde Butona Tıklayarak Ekleye Bilirsiniz.Bir Örnekle Sizlere Göstereyim………

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Data;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Imaging;

using System.Windows.Navigation;

using System.Windows.Shapes;

namespace wpfye_Giris

{

/// <summary>

/// Interaction logic for MainWindow.xaml

/// </summary>

public partial class MainWindow : Window

{

public MainWindow()

{

InitializeComponent();

}

private void button1_Click(object sender, RoutedEventArgs e)

{

if (checkBox1.IsChecked == true )

{

MessageBox.Show("Bütün Butonlara Tıklanmış");

}

else

{

MessageBox.Show("Lütfen Butonları Kontrol ediniz.");

}

<Window x:Class="wpfye_Giris.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="Ebubekir Yazılım" Height="350" Width="525">

<Grid>

</ComboBox>

</Grid>

</Window>
////////////////////////////////////////////////////////////////////////////////////// Efekler’e Giriş
WPF Efektleri – ShadowEffect, BlurEffect, Swirl, Pixelate

Bu makalede WPF’te kullanabileceğimiz efektlerin bize sağladığı kolaylıkları, neden kullanmamız gerektiğini ve nasıl kullanabileceğini incelemeye çalışacağım.

Windows Presentation Foundation (WPF), bizlere daha önce Photoshop ve türevi programlarla resim üzerinde yapmaya alışık olduğumuz gölgelendirme, soluklaştırma, çerçeve renklendirme, doldurma gibi birçok efekti kendi kütüphanelerinden getirip istediğimiz her nesneye uygulayabilmemizi sağlıyor. Hem XAML hem C# kodlarıyla ulaşılan bu efektler System.Windows. Media.Effect veMicrosoft.Expression.Media.EffectDLL’lerinden çağırılıyor. Elbette kullanım oranı arttıkça gerek bileşen üreten şirketler, gerekse geliştiricilerin yazdığı DLL’ler kütüphanelerin zenginleşmesini sağlayacaktır.

WPF’inefektleriyle birlikte bize sağladığı kolaylıkları kısaca özetlemek gerekirse:

• Hem C#, hem XAML kodlarıyla ulaşılabilir ve yaratılabiliyor olması,

• Hem Visual Studio hem ExpressionStudio ortamında kullanılabiliyor ve yaratılabiliyor olması,

• ExpressionStudio ile kolay bir şekilde animasyon ve efekt yaratmamıza olanak sağlıyor olması,

• Sunduğu efektlerin ‘Performans’ ya da ‘Kalite’ odaklı çalışabiliyor olması,

• Window da dahil tüm nesnelere uygulanabiliyor olması.
DropShadowEffect

Buttonumuzu “Ebubekir Yazılım” Content’iyle oluşturduktan sonra efekt verme işlemine geçiyoruz. İlk efektimizin adı Content’ten anlaşılacağı üzere “DropShadowEffect”’tir. System.Windows. Media.Effect isimli kütüphanede yer alır ve altı farklı özelliğe sahiptir:

Efect’ten önceki nesne adı, efektin uygulanacağı nesneyi gösterir. Bu efektler aynı zamanda ComboBox, ListBox, RadioButton vb. nesnelerin hepsine uygulanabilir. Uygulamak için <Button.Effect> yerine efekti uygulayacağınız nesneyi yazmak yeterli olacaktır.

• <DropShadowEffect/> etiketi, uygulanacak efekti temsil ediyor. (Bu efekteExpressionBlend 4’in Assets Effects DropShadowEffect kısmından da erişebilirsiniz.) ElbettekiDropShadowEffect göründüğü kadar sade değil, inceleyelim:

• BlurRadius: Gölgenin dağılmasını, blurlaşmasını sağlar. Yayılacağı alanı belirler.
Kullanımı: <DropShadowEffect BlurRadius="33"/>

• Color: Oluşturulacak gölgenin rengini belirler.
Kullanımı: <DropShadowEffect Color="Red" />

• Direction: Gölgenin uygulanacağı alanı belirler. Nesnenin üstü, altı, sağı, solu gibi yerleşim yerini ayarlar.
Kullanımı: <DropShadowEffect Direction="139"/>

• Opacity: Gölgenin saydamlığını belirler.
Kullanımı: <DropShadowEffect Opacity="0.825"/>

• ShadowDepth: Gölgenin nesneye olan yakınlığını uzaklığını belirler.
Kullanımı: <DropShadowEffectShadowDepth="8"/>

Tüm bu efekt özelliklerini kullandıktan sonraki görüntü ve XAML çıktısı aşağıdaki gibidir:

Efekti uyguladığımız Buttonun XAML Kodları Aşağıda Belirtilmiştir.

<Button Content="Ses " Height="23" HorizontalAlignment="Left" Margin="313,246,0,0" Name="button5" VerticalAlignment="Top" Width="75" >

<Button.Effect>

</Button.Effect>

</Button>
BlurEffect

BlurEffectefekti, uygulandığı nesneye adından anlaşılabileceği üzere blur efekti (soluklaştırma) uygular. System.Windows. Media.Effect isimli kütüphanede yer alır. Bu efektin üç özelliği vardır:
Kullanımı Alttaki Gibidir.

<Button.Effect>
<BlurEffect Radius="1" RenderingBias="Quality" KernelType="Box"/>
</Button.Effect>
Bir Örnek İle Açıklayalım:

<Button Content="Ses" Height="23" HorizontalAlignment="Left" Margin="195,257,0,0" Name="button4" VerticalAlignment="Top" Width="75" Click="button4_Click" >

<Button.Effect>

</Button.Effect>

</Button>

Radius: Blur’un tonunu, keskiniliğini belirler. Bu özelliğin animasyon kullanımında işe yarayacağını sanıyorum. (3-5 saniye gibi bir aralıkta blurlaşarak yok olan bir button olabilir.)
Kullanımı: <BlurEffect Radius="1" />

KernelType: Uygulanacağı nesnenin görünümüyle ilgili iki seçenek sunar; Box ve Gaussian’dır. Hoşunuza giden şekli kullanabilirsiniz.
Kullanımı: <BlurEffect KernelType="Box"/>

Swirl

Swirl efekti, Microsoft.Expression.Media.Effect kütüphanesinde yer alır ve iki özelliğe sahiptir. Uygulandığı nesnenin iskeletini ve Content’ini istenilen yöne, istenilen oranda döndürmeye, eğip bükmeye yarar.

Bu efekti de diğerlerinde olduğu gibi bir Button üzerinde uygulayacağız. Resim ve kod çıktısına bakalım ve açıklayarak devam edelim:

Ekran çıktısında da görünen “Eğil salkım söğüt eğil” adlı Zülfü Livaneli eseri aslında bir Button, resim değil. Yalnızca SwirlEfecti uygulanmış ve TwistAmount’ü yükseltmiş. Kırmızı olan kısımsa kenarlıkları. Alışık olduğumuz kenarlıklardan çok farklıya benziyor? Bunu sağlayan Swirlefektinin özelliklerini inceleyelim:

TwistAmount: Uygulandığı nesnenin iskeletini döndürmeyi eğmeyi şekil vermeyi sağlar.
Kullanımı: <ee:SwirlEffect TwistAmount="2" />

Center: TwistAmount uygulandığında, uygulanacağı ve iskeletin oturacağı yerleşim alanını belirler.
Kullanımı: <ee:SwirlEffect TwistAmount="2" Center="0.66,0.5"/>

Özelliğin Adı	Türediği Sınıf
TwistAmount	double
Center	Point

Elbette bu efekti geliştirmeyi ve harika sonuçlar almayı hayal gücüne insafına bırakıyorum. J

Pixelate

Pixelateefekti, daha çok resimlerin pikselleriyle oynamamızı sağlayan bir efekttir. Ama bu efekti kullanmak için bir image nesnesine sahip olmak zorunda değiliz. Herhangi bir nesneye de uygulayabilirz. Diğerlerine nazaran en kısır özellikli efektPixelate efektidir. Microsoft.Expression.Media.Effect kütüphanesinde yer alır. Yalnızca tek bir özelliği vardır. Ekran ve XAML çıktısına baktıktan sonra açıklamaya çalışayım:

<Image Height="246" HorizontalAlignment="Left" Margin="12,12,0,0" Name="image1" Stretch="Fill" VerticalAlignment="Top" Width="273" Source="/WPFTest;component/Images//Makaleler/Resimler/1000002520_koala.jpg" >
            <Image.Effect>
                <ee:PixelateEffect Pixelation="0.5"/>
            </Image.Effect>
        </Image>
Küçük dostumuz koalaya uyguladığımıza pixelation işlemi sonucu bir titreklik, bozukluk olduğunu görebilirsiniz.

Pixelation: Uygulandığı nesnenin pikselleriyle oynamamızı sağlar.
Kullanımı: <ee:PixelateEffect Pixelation="0.5"/>

Özelliğin Adı	Türediği Sınıf
Pixelation	double

Efektlerle ilgili küçük bir ipucu da ExpressionStudio kullanmayanlar için:

XAML kodlarıyla efekt uygulamak zor geliyorsa; örneğin Button nesnesinin XAML kodlarına gelelim ve şu kodları ekleyelim.

<Button.Effect><DropShadowEffect/></Button.Effect>(DropShadowEffect zorunlu değildir. Diğer efektler için de geçerlidir.)

Kodları ekledikten sonra DropShadowEffect etiketlerine tıklayalım ve Properties’a girelim. Properties’a girdiğimizde DropShadowEffect’e ait özellikler karşımıza çıkacaktır.
  Trigger(Tetikleyiciler)
Trigerlar(Tetikleyiciler) Maous’un Butonun üstüne Geldiği Anda Olan olaydır.Yani Maous Buttonun sütüne geldiğinde Ne olcağını renginin ve Yazı tipinin Değişmesi vb. Yapabiliriz.Bu işlevleri Yapmak İstediğimiz’de ise Trigger’lar Yardımımıza Koşuyor. Trigger’ları 2 Şekilde Yapabiliriz.
1.)Form Üzerinde OluşturaBiliriz.
2.)Yeni Proje Açtık’dan Sonra ‘Resource Dictionary(WPF)’ Olarak.


                            1.)Form Üzerinde Şu Şekilde Kullanabiliriz.

<Window x:Class="Triger.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="MainWindow" Height="350" Width="525">

<Window.Resources >

<Style.Triggers >

</Trigger>

</Trigger>

</Style.Triggers>

</Style>

</Window.Resources>

<Grid>

</Grid>

</Window>

2.)Yöntem.

Yeni Sitil Dosyamızı Açıyoruz.

Gördüğünüz Üzere Kodumuz oluşmuştur.Yazdığımız Kod:
<Style TargetType="{x:Type TextBox}">

</Style>

Animasyonlar

Yukaridaki Örnekde Wpf İle Bir Animasyon Yapmaktayız.Bu animasyonu En Çok Kullandıklarımızdan olan Button ile Yapıyoruz.Pare ile Butonun üstüne gelindiğinde Buton 360 Derece Dönmektedir.Bu değeri 160 60 vb. veya sadece ileri geri olarak ta yapabiliriz.
Şimdi Kodları inceleyelim.İlk başda XAMl Kodlarını Vereceğim.
<Window x:Class="AnimasyonIslemleri.KodlaRotateAnimasyon"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="Kodla Rotate Animasyon" Height="250" Width="325">

<Grid>

<Button.LayoutTransform>

</TransformGroup>

</Button.LayoutTransform>

</Button>

</Grid>

</Window>
Şimdi İse Forum kodlarını Vereceğim..
using System;

using System.Collections.Generic;

using System.Text;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Data;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Imaging;

using System.Windows.Shapes;

using System.Windows.Media.Animation; // Animasyon tiplerinin yer aldığı isim alanıdır(Namespace)

namespace AnimasyonIslemleri

{

public partial class KodlaRotateAnimasyon : Window

{

private void AnimasyonuOlustur()

{

// Storyboard oluşturulur

Storyboard strBrd = new Storyboard();

// Birinci DoubleAnimation tipi oluşturulur.

// İlk parametre To değeridir ve burada 360 dereceyi işaret etmektedir. İkinci parametre ise Duration değeridir.

DoubleAnimation dblAni1 = new DoubleAnimation(0, new Duration(TimeSpan.FromSeconds(1)));

// Animasyon tipinin RTrans adına sahip elementin AngleProperty özelliğine uygulanacağı belirtilir.

Storyboard.SetTargetName(dblAni1, "RTrans");

Storyboard.SetTargetProperty(dblAni1, new PropertyPath(RotateTransform.AngleProperty));

// Animasyon tipi Storyboard' a eklenir.

strBrd.Children.Add(dblAni1);

// İkinci DoubleAnimation tipi oluşturulur.

// İlk parametre To değeridir ve burada 2.5 katını işaret etmektedir. İkinci parametre ise Duration değeridir. Buna göre zaman çizgisinin ilk 1.5 saniyesi içerisinde Button bileşeninin ScaleX değeri 2.5 kat artmaktadır.

DoubleAnimation dblAni2 = new DoubleAnimation(5.1, new Duration(TimeSpan.FromSeconds(24.6)));

// Animayonun STrans isimli ScaleTransform elementi içerisindeki ScaleX özelliğine uygulanacağı belirtilir.

Storyboard.SetTargetName(dblAni2, "STrans");

Storyboard.SetTargetProperty(dblAni2, new PropertyPath(ScaleTransform.ScaleXProperty));

// Animasyon tipi Storyboard' a eklenir.

strBrd.Children.Add(dblAni2);

// Üçüncü DoubleAnimation tipi oluşturulur.

DoubleAnimation dblAni3 = new DoubleAnimation(1.9, new Duration(TimeSpan.FromSeconds(1.5)));

// Animayonun STrans isimli ScaleTransform elementi içerisindeki ScaleY özelliğine uygulanacağı belirtilir.

Storyboard.SetTargetName(dblAni3, "STrans");

Storyboard.SetTargetProperty(dblAni3, new PropertyPath(ScaleTransform.ScaleYProperty));

// Animasyon tipi Storyboard' a eklenir.

strBrd.Children.Add(dblAni3);

// Zaman çizgisinin 3ncü saniyesine gelindiğinde Button kontrolünün ScaleX değeri ilk haline döner.

DoubleAnimation dblAni4 = new DoubleAnimation(2, new Duration(TimeSpan.FromSeconds(3)));

Storyboard.SetTargetName(dblAni4, "STrans");

Storyboard.SetTargetProperty(dblAni4, new PropertyPath(ScaleTransform.ScaleXProperty));

// Animasyon tipi Storyboard' a eklenir.

strBrd.Children.Add(dblAni4);

// Zaman çizgisinin 3ncü saniyesine gelindiğinde Button kontrolünün ScaleY değeri ilk haline döner.

DoubleAnimation dblAni5 = new DoubleAnimation(1, new Duration(TimeSpan.FromSeconds(3)));

Storyboard.SetTargetName(dblAni5, "STrans");

Storyboard.SetTargetProperty(dblAni5, new PropertyPath(ScaleTransform.ScaleYProperty));

// Animasyon tipi Storyboard' a eklenir.

strBrd.Children.Add(dblAni5);

// Mouse ile Button alanı üzerinde gelindiğinde animasyon başlatılır.

btnMerhaba.MouseEnter += delegate(object sender, MouseEventArgs e)

{

/* İkinci parametre Storyboard' un kontrol edilebileceğini gösterir. Bir başka deyişle programatik olarak animasyonun durdurulması, duraksatılması ve benzeri işlemlerin yapılabilmesi sağlanır. */

strBrd.Begin(this, true);

};

btnMerhaba.MouseLeave += delegate(object sender, MouseEventArgs e)

{

// Storyboard' un başlattığı animasyon çıkartılır. Dolayısıyla Button açısal konum ve büyüklük olarak ilk değerlerine döner.

strBrd.Stop(this);

};

}

public KodlaRotateAnimasyon()

{

InitializeComponent();

AnimasyonuOlustur();

}