WPF - Tooltip Özelliği

Windows Presentation Foundation ile uygulama geliştirirken kullanabileceğimiz kontrol paleti işlerimizi rahatlıkla yürütebileceğimiz kadar geniştir. Araç kutusu içerisinde yer alan kontroller Framework sürümünü arttırdıkça ve codeplex, code.msdn gibi sitelerde yer alan projeler yardımı ile daha da artmaya devam etmektedir. WPF 'in grafiksel ve görsel gücüne günlük yaşantı da kullanılan kontrollerin de kullanılabilir olması sayesinde en basit uygulamalardan en karmaşık uygulamalara kadar geliştirilebilme olanağı tanınıyor.

Bu yazımızda WPF üzerinde kullanılan en temel kontrollerin Tooltip özelliğini özelliklerini inceliyor ve nasıl kullanıldığını, özellikleri incelemeye çalışıyor olacağız.

WPF - Tooltip
WPF ile son kullanıcılar için uygulama geliştirirken bileşen paletinde yer alan bileşenlerden bir çoğunu kullanır ve düzenleriz. Yapmış olduğumuz işlemler sonrasında her kontrolün ne işe yaradığını ve tıklanması sonrasında ne işe yaradığını açıklayan bir döküman hazırlarız. Ancak dünyanın değişmeyen gerçekleri arasındadır. Son kullanıcılar kolay kolay hazırlanan dökümanları okumazlar. Bu sebepten ötürüdür ki tıklanacak kontrolerin üzerinde yazan metinleri çok dikkatli seçer ve kolayca algınacak metinler yazmaya çalışırız. Ancak en fazla iki üç kelime ile neler anlatabiliriz ki gibi sözler aklınıza gelmektedir. Bu durumda yardımımıza Tooltip yetişiyor. Bir kontrolün üzerinde fare üle durduğumuzda gerekli açıklamaları yazabildiğimiz, resimleri gösterebildiğimiz çok güzel bir özelliktir. Şimdi bu özelliğini nasıl kullanabileceğimizi örnekler yardımı ile açıklamaya başlayalım.

Neredeyse bütün kontrollerin özelliklerinde yer alan Tooltip özelliği fare ile bir kontrolün üzerine geldiğimizde açıklama bilgisi göstermeye yarayan hoş bir özelliktir. Kullanabilmek için Tooltip yazıp istediğimiz değeri atamak yeterli olacaktır.

<Button Content="Gönder">
    <Button.ToolTip>
        <ToolTip>
            <StackPanel>
                <TextBlock FontWeight="Bold">İstek Kabulu</TextBlock>
                <TextBlock>Sunucuya isteğiniz gönderilecektir..</TextBlock>
             </StackPanel>
        </ToolTip>
    </Button.ToolTip>
</Button>

Buton kontrolünün Tooltip özelliğine iki adert TextBlock kontrolü ekledik ve fare üzerine geldiğinde görüntülenmesine olanak tanıyacağız. Şimdi test amaçlı olarak projeyi çalıştırıyor ve sonuca bir göz atıyoruz.



İstediğimizi gerçekleştirmiş gibi görünüyoruz. Kullanıcı Gönder butonunun üzerine geldiğinde butonun ne işe yaradığını açıklayan çok kısa bir açıklama görüyor.

Tabii uygulama içerisinde her zaman bütün kontorllerin aktif olacağı şeklinde bir kural hiç bir zaman yoktur. Bazı durumlarda kontroller pasif durumda gösteriliyor olabilir. Ancak biz bu pasif olmuş olan kontrol içinde bir Tooltip hazırlamışız ve bunun herzaman görüntülenmesini istiyoruz. İşte bu durumda yapılması gereken TooltipService 'lerini devreye sokarak kontroler Disable olduğu durumlarda da gösterilmesine olanak tanırız.

IsEnabled="False" olan konroller olduğu durumda TooltipService.ShowOnDisable="True" özelliğini kullanarak Tooltip 'in görüntülenmesine olanak tanırız.

<Button IsEnabled="False" ToolTip="Bütün alanları doldurunuz..." ToolTipService.ShowOnDisabled="True" Content="Kaydet" />

Buton kontrolü pasif durumdayken fareyi üzerine getirdiğimizde ekran görüntüsü aşağıdaki gibi olur.


Gayet güzel. Buton aktif olduğu durumda da Tooltip görüntülenmeye devam edecektir. Ancak çağırdığımız servisi iptal edersek Tooltipin görüntülenmediğini gözlemleyeceksiniz. Tooltip 'in bir diğer özelliği de ne kadar bir zaman süresince görüntülenebileceğini belirleyebilmemiz mümkündür. Bunun için yine TooltipService. 'in ShowDuration özelliğinden yararlanmak yeterli olacaktır.

<Button ToolTip="Bütün alanları doldurunuz..." ToolTipService.ShowDuration="20" Content="Kaydet" />

Tooltip içerisine yazmış olduğumuz metin iki saniye boyunca ekranda görüntülendikten sonra kaybolacaktır.


Tooltip özelliğini çok kolay birşekilde farklı senaryolarda kullanbildiğimizi gördük. Şimdi ise işin görsellik yanı ile ilgilenelim. Bu kullandığımız tip leri zaten windows formlar üzerinde de rahatlıkla kullanabiliyorduk. Ancak unutmayalım ki biz uygulamalarımız WPF ile geliştiriyoruz ve bu teknlojinin bize sunduğunu görsellik ve esnekliğin hepsini kullanabilmemiz mümkündür. İşte bizde bu esneklikten yararlanarak tooltip i biraz daha görsel bir duruma dönüştüreceğiz. İçerisinde resim olan ve standart boyutların dışında bir tooltip olacaktır.

<Button Width="100" Height="30">Yaklaştır Fareyi
    <Button.ToolTip>
        <StackPanel Background="Honeydew" Height="200" Width="200">
            <StackPanel Background="BurlyWood" Height="30" Width="200" Orientation="Horizontal"                     HorizontalAlignment="Left" VerticalAlignment="Top" >
                <Image VerticalAlignment="Top" Width="30" Height="30" Source="Images/Copy.png"                         Name="image1" />
                    <TextBlock FontFamily="Aharoni" FontSize="24" FontWeight="Bold"                 Foreground="Black" TextWrapping="Wrap" VerticalAlignment="Top" Height="30" HorizontalAlignment="Right" Width="143">
                        <Run FontFamily="Andalus" FontSize="18" FontWeight="Normal" Text="Merhabalar,                             Renkliler."/>
                    </TextBlock>
                </StackPanel>
                <StackPanel Width="200" Orientation="Horizontal" HorizontalAlignment="Left"         VerticalAlignment="Top" >
                    <TextBlock TextWrapping="Wrap" Foreground="#FFF9F4F4" TextAlignment="Center"     Background="{x:Null}" HorizontalAlignment="Right" VerticalAlignment="Top" Width="181" Height="98">
                        <Run FontFamily="Verdana" FontSize="11" FontWeight="Normal" Foreground="#FF151514"
                        Text="Kontorllerin Tooltip lerine resim, video, müzik ve daha bir çok özellik ekleyebilmeniz mümkündür. Tek yapmanız gereken hayal edip uygulamak olacaktır."/>
                    </TextBlock>
                </StackPanel>
            </StackPanel>
      </Button.ToolTip>
</Button> 

Yaptığımız işlemler sonrasında ekran görüntüsü aşağıdaki gibi olacaktır.


Çok basit bir şekilde WPF 'in gücünü kullanarak çok şık bir Tooltip oluşturmuş olduk. Sizlerin hayal gücüne göre bu örnekleri arttırabilme olanağınız vardır.

Sonuç olarak bu yazımızda son kullanıcıya kontrollerin ne iş yaptığını anlatmakta yardımcı özelliklerden biri olan Tooltip kontrolünü WPF 'in gücünden yararlanarak incelemeye çalıştık.

Umarım yararlı olabilmiştir.

Yorum Gönder

2 Yorumlar

Mehmet Bilen dedi ki…
özünde basit bir kontrol gibi gözüksede gayet kullanışlı, makalede bir okadar sade ve net olmuş, teşekkür ederiz,
Turhal Temizer dedi ki…
Yararlı olabildiyse bizler için çok mutlu. İyi çalışmalar...

Ad Code

Responsive Advertisement