Makale Özeti

Bu makalemizde WPF uygulamarında kullanabileceğimiz görsel tetikleyicileri inceleyceğiz. Bir veya birden çok koşulu XAML kodlarımız ile kontrol ederek farklı nesnelere farklı stiller uygulayacağız.

Makale

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.

Daron Yöndem
MCPD, MCITP, MCTS, MCSD, MCAD
MCDBA, MCP, ACP, ICSD, IEL'03
http://daron.yondem.com

Makalemizde uyguladığımız örneklere ait kaynak kodlarını buradan indirebilirsiniz.