WPF Windows Uygulamalarında Görsel Tetikleyiciler (Triggers)

0 dakikada yazıldı

5486 defa okundu

Düzenle

WPF uygulamarında görsel öğelerin ön planda olduğu kesin. Bu noktada
uzmanı olmamız gereken konulardan biri de tetikleyicileri (trigger)
nasıl kullanacağımızı bilmek olacaktır. Farklı tetikleyiciler ile WPF
uygulamarımızdaki nesnelerin görsel özellikleri üzerinde değişiklikler
yapabilir ve interaktivite katabiliriz. Makalemiz boyunca
tetikleyicilarin kullanımına ve çeşitlerine değineceğiz.

Nitelik (Property) Bazlı Tetikleyiciler

İlk aşamada inceleyeceğimiz tetikliyici tipi belki de kullanımı en sade
ve kolay anlaşılır olan tip. Farklı nesnelerin niteliklerindeki
değişiklikler ve öne süreceğimiz şartlar çerçevesinde başka nesnelerin
görsel özellikleri üzerinde değişiklik yapmamızı sağlayacak nitelik
bazlı tetikleyiciler ile ilgili gelin hemen bir örnek yapalım. İlk
olarak tetikleyicimizi yerleştireceğimiz görsel özellikleri de içerecek
olan stil objemizi yani taglarımızı yazalım.

<Style
TargetType="{x:Type
TextBox}
">

Tagımızı yazarken TargetType özelliği vererek WPF uygulamamız
içerisinde tüm TextBox tipindeki objelere uygulanmasını sağlıyoruz.

<Style.Triggers>

Stilimize ait tetikliyicileri Style.Triggers tagları arasına
yerleştiriyor olacağız.

<Trigger
Property="IsMouseOver"
Value="True">

Geldik tetikleyicimizi tanımladığımız kodlara. Hedef kontrolün, yani
bizim örneğimizde TextBox'ın IsMouseOver özelliği True
olduğunda çalışacak şekilde bir tetikleyici tanımladık. Tetikleyicinin
kontrol edeceği hedef kontroldeki özelliğin adını Property
parametresine değer olarak aktardıktan sonra karşılaştıracağımız değeri
de Value parametresine veriyoruz. Böylece sayfadaki herhangi bir
TextBox'ın fare ile üzerine gelindiğinde IsMouseOver özelliği
True olacak ve bizim de tetikleyicimiz çalışacak. Peki çalışıp da ne
yapacak?

<Setter
Property="Background"
Value="Red"
/>

Yukarıdaki kodumuz ile bir anlamda bir "tanımlayıcı" tanımlıyoruz ve
hedef kontrolün herhangi bir özelliğini istediğimiz bir değere
eşitleyebiliyoruz. Bizim kodumuzda hedef kontrolün Background
özelliği Red yani kırmızı olarak ayarladık. Şimdi gelin WPF
uygulamamızın tam koduna bir göz atalım.

WPF kodumuz içerisinde tanımladığımız tetikleyicilerimiz ile TextBox otomatik kırmızı oluyor.
WPF kodumuz içerisinde tanımladığımız
tetikleyicilerimiz ile TextBox otomatik kırmızı oluyor.

window1.xaml

<
Window
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       x:Class="Window1"
       x:Name="Window"
       Title="Window1"
       Width="320" Height="240">
       <Window.Resources>
             <Style
TargetType="{x:Type
TextBox}
">

                    <Style.Triggers>
                           <Trigger
Property="IsMouseOver"
Value="True">

                                 
<
Setter Property="Background"
Value="Red"
/>

                           </Trigger>
                    </Style.Triggers>
             </Style>
       </Window.Resources>
       <Grid
x:Name="LayoutRoot">
             <TextBox
Margin="35,48,66,0"
VerticalAlignment="Top"

                    Height="33" Text="TextBox"
TextWrapping="Wrap"/>

       </Grid>
</Window>

Uygulamamız içerisinde yer alan metin kutusu yine uygulamamızın
Window.Resources kısmında tanımladığımız stiller tarafından
etkilenecek. Stilimiz içerisinde tanımladığımız tetkileyiciler
gerektiğinde çalışarak metin kutusunun fonunu kırmızı yapacak.

Çok Şartlı Tetikleyiciler

Tetikleyicileri farklı kontrollerin özellikleri üzerinden nasıl
kullanabileceğimize baktıktan sonra sıra geldi birden fazla koşulu
kontrol ederek tetikleyicilerimizi çalıştırmaya. Bir sonraki örneğimizde
yine bir metin kutusu kullanacağız, fakat bu sefer sadece fare ile metin
kutusu üzerine gelinmesini değil aynı anda metin kutusunun içerisinde
"Sihirli Kelime" yazmasını da kontrol edeceğiz. Eğer metin kutusu
içerisinde "Sihirli Kelime" yazıyorsa fare ile üzerine geldiğimizde
metin kutusunun fon rengi değişecek. Böylece metin kutusuna ait iki
farklı niteliği kontrol etmiş olacağız.

<MultiTrigger>

Kullanacağımız esas tag MultiTrigger tagı olacak. MultiTrigger
içerisinde istediğiniz sayıda farklı Trigger'lar
tanımlayabilirsiniz.

<MultiTrigger.Conditions>

Her bir MultiTrigger'ın birden çok koşulu olabildiğinden
bahsetmiştik. Bu koşullarımızı MultiTrigger.Conditions tagları
arasına yazmamız gerekiyor.

<Condition
Property="IsMouseOver"
Value="True"
/>

İşte ilk şartımızı tanımlıyoruz. Bir önceki örneğimizdeki ile aynı
özellikleri vererek tanımladığımız şartımızda hedef kontrolün
IsMouseOver durumunun True olup olmadığı kontrol edilecek.

<Condition
Property="Text"
Value="Sihirli
Kelime
" />

İkinci şartımızı da yukarıdaki şekilde tanımlıyoruz. Şartımız hedef
kontrolün Text özelliğinin yani TextBox'ın içeriğinin "Sihirli
Kelime" metnine eşit olması.

<Setter
Property="Background"
Value="Green"
/>

Şartlarımızı tamamladıktan sonra son olarak da yapacağımız işlemi yine
bir önceki bölümdeki ile aynı şekilde tanımlıyoruz. Oluşturduğumuz kodun
son halini aşağıda inceleyebilirsiniz.

WPF uygulamamızda iki farklı koşulu kontrol ederek metin kutusunun fon rengini değiştiyoruz.
WPF uygulamamızda iki farklı koşulu kontrol ederek
metin kutusunun fon rengini değiştiyoruz.

window2.xaml

<
Window
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       x:Class="Window2"
       x:Name="Window"
       Title="Window2"
       Width="320" Height="240">
       <Window.Resources>
             <Style
TargetType="{x:Type
TextBox}
">

                    <Style.Triggers>
                           <MultiTrigger>
                                 
<
MultiTrigger.Conditions>
                                       
<
Condition Property="IsMouseOver"
Value="True"
/>

                                       
<
Condition Property="Text"
Value="Sihirli
Kelime
" />

                                 
</
MultiTrigger.Conditions>
                                 
<
Setter Property="Background"
Value="Green"
/>

                           </MultiTrigger>
                    </Style.Triggers>
             </Style>
       </Window.Resources>
       <Grid
x:Name="LayoutRoot">
             <TextBox
Margin="55,88,65,72"
Text="TextBox"
TextWrapping="Wrap"/>

       </Grid>
</Window>

WPF uygulamamızda yine bir TextBox nesnesi var. Metin kutusu içerisinde
"Sihirli Kelime" yazdığımızda ve fare ile üzerine geldiğimizde her iki
koşul da yerine getirildiği için metin kutusunun fon rengi yeşile
dönüyor.

Hepinize kolay gelsin.

Örneklere ait kaynak kodları - 06092007_3.zip (141,21
KB)