Silverlight 2.0 içerisinde ToolTip Kontrolü ve Tooltip şablonları

0 dakikada yazıldı

6830 defa okundu

Düzenle

Özellikle Windows uygulamalarında "erişilebilirlik" açısından çok önemli
olan noktalardan biri de "İpucu" balonlarıdır. "Tooltip" olarak geçen bu
sistem sayesinde herhangi bir kontrolün veya nesnenin üzerinde fare ile
belirli bir süre durduğunuzda gerekli açıklama metni gösterilir. Böylece
kullanıcı ufak yardım yönergeleri ile yönlendirilebilir.

Silverlight 2.0 Beta 2 için Tooltip işlevselliğini otomatik olarak
sağlayan bir TooltipService sınıfımız var. Gelin hemen bir örnekle
konumuzu inceleyelim.

<UserControl
x:Class="SilverlightApplication6.Page"

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

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

            Width="400"

            Height="300">

  <Grid
x:Name="LayoutRoot"

        Background="White">

    <Button
Margin="35,41,170,124"

            Content="Button"

            x:Name="Dugme">

**      <ToolTipService.ToolTip>**

**        <ToolTip
****
Content
="Bu bir
düğme
"
></ToolTip>**

**      </**ToolTipService.ToolTip>

    </Button>

  </Grid>

</UserControl>

Yukarıdaki kod içerisinde bir düğmeye ToolTipService ekleyerek
service de bir ToolTip kontrolü aktarıyoruz. ToolTip kontrolümüzün
Content özelliğine bir metin aktararak ip ucu olarak bu metnin
gösterilmesini sağlıyoruz. Bu şekilde istediğiniz Silverlight kontrolüne
ToolTipService ekleyebilirsiniz.

Basit bir Tooltip.
Basit bir Tooltip.

Eğer Tooltip'in görünümünü değiştirmek isterseniz Background, FontSize,
FontWeight, Foreground gibi birçok özelliğe sahipsiniz. İsterseniz fon
rengi gibi özelliklere farklı Brush yapıları da aktarabilirsiniz.

<UserControl
x:Class="SilverlightApplication6.Page"

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

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

            Width="400"

            Height="300">

  <Grid
x:Name="LayoutRoot"

        Background="White">

    <Button
Margin="35,41,170,124"

            Content="Button"

            x:Name="Dugme">

      <ToolTipService.ToolTip>

        <ToolTip
Content="Bu bir
düğme
">

        **  <**ToolTip.Background>

            <LinearGradientBrush EndPoint="0.5,1"

                                StartPoint="0.5,0">

              <GradientStop
Color="#FF000000"
/>

              <GradientStop
Color="#FFFFFFFF"

                            Offset="1" />

            </LinearGradientBrush>

          </ToolTip.Background>

**          <**ToolTip.BorderBrush>

            <LinearGradientBrush EndPoint="0.519999980926514,-0.0670000016689301"

                                StartPoint="0.519999980926514,0.899999976158142">

              <GradientStop
Color="#FF000000"
/>

              <GradientStop
Color="#FFFFFFFF"

                            Offset="1" />

            </LinearGradientBrush>

          </ToolTip.BorderBrush>

        </ToolTip>

      </ToolTipService.ToolTip>

    </Button>

  </Grid>

</UserControl>

Görüldüğü üzere rahatlıkla Tooltip'in görselliği değiştirilebiliyor. Bir
Tooltip'in fonuna VideoBrush yerleştirmeye sizin hayallerinize
bırakıyorum. Tooltip'e ait VerticalOffset ve HorizontalOffset
özellikleri ile Tooltip'in fareden ne kadar uzakta gözükeceğini de
ayarlayabilirsiniz.

Özelleştirilmiş Tooltip
Özelleştirilmiş Tooltip

Biraz daha ileri giderek ToolTip'in Content özelliğine istersek farklı
Silverlight kontrolleri de yerleştirebiliriz. Content içerisine sadece
bir Silverlight kontrolü yerleştirebilirsiniz fakat bu kontrolün
içerisinde başka kontroller bulunabilir, yani Canvas veya Grid gibi
Container kontrollerini kullanarak farklı görsel şemalar
yaratabilirsiniz. Aşağıdaki kod içerisinde biraz olayı abartarak ToolTip
içerisine bir video yerleştirdik.

<UserControl
x:Class="SilverlightApplication6.Page"

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

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

            Width="400"

            Height="300">

  <Grid
x:Name="LayoutRoot"

        Background="White">

    <Button
Margin="35,41,170,124"

            x:Name="Dugme"

            Content="TIKLA">

      <ToolTipService.ToolTip>

        <ToolTip>

        **  <**ToolTip.Content>

            <MediaElement Height="66"

                          VerticalAlignment="Bottom"

                          Source="http://localhost:49167/SilverlightApplication6Web/Bear.wmv"

                          Stretch="Fill" />

          </ToolTip.Content>

        </ToolTip>

      </ToolTipService.ToolTip>

    </Button>

  </Grid>

</UserControl>

Tooltip içerisinde stream video!
Tooltip içerisinde stream video!

Özel Tooltip!

Tooltip kontrolünün içerisinde gösterilecek Content'i değiştirmenin yanı
sıra tamamen Tooltip'in görsel durumunu da değiştirebiliriz. Örneğin
yuvarlak bir Tooltip yapılabilir. Bunun için ilk olarak Tooltip
kontrolünün varsayılan Template yapısını MSDN üzerinden almamız
gerekiyor. Adres şu şekilde;
http://msdn.microsoft.com/en-us/library/cc296244(VS.95).aspx

Elimizdeki Template içerisindeki ControlTemplate tagları arasındaki
herşey bizim Tooltip'in görüntü şablonunu oluşturuyor. Buradaki
Binding'lere dokunmamaya çalışıyoruz. Özellikle ContentPresenter'ı
silmememiz gerekiyor çünkü ToolTip'in Content'ına verilen içerik
Template içerisinde buraya yerleştiriliyor olacak.

Gelin farklı bir şey yapalım ve kendi içine konan metni Scrollbar ile
gösterebilen bir Tooltip oluşturalım. Bunun için hemen ControlTemplate'i
düzenlememiz gerekiyor.

<UserControl
x:Class="SilverlightApplication6.Page"

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

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

            Width="400"

            Height="300">

  <UserControl.Resources>

    <Style
x:Key="ToolTipStili"

          TargetType="ToolTip">

      <Setter
Property="Foreground"

              Value="#FF313131"
/>

      <Setter
Property="FontSize"

              Value="11" />

      <Setter
Property="Background">

        <Setter.Value>

          <LinearGradientBrush x:Name="ToolTipBackground"

                              StartPoint="0,0"

                              EndPoint="0,1">

            <LinearGradientBrush.GradientStops>

              <GradientStop
Color="#FFF9FAFA"

                            Offset="0" />

              <GradientStop
Color="#FFEDF1F4"

                            Offset="0.37259"
/>

              <GradientStop
Color="#FFE2E8EF"

                            Offset="0.372881"
/>

              <GradientStop
Color="#FFC3C9CD"

                            Offset="1" />

            </LinearGradientBrush.GradientStops>

          </LinearGradientBrush>

        </Setter.Value>

      </Setter>

      <Setter
Property="Template">

        <Setter.Value>

          <ControlTemplate TargetType="ToolTip">

            <ScrollViewer Height="30"

                          Width="100"

                          Background="WhiteSmoke">

              <ScrollViewer.Content>

                <ContentPresenter Content="{TemplateBinding Content}"

                                 
ContentTemplate="{TemplateBinding ContentTemplate}"

                                 
Cursor="{TemplateBinding Cursor}"

                                 
FontFamily="{TemplateBinding FontFamily}"

                                 
FontSize="{TemplateBinding FontSize}"

                                 
FontStretch="{TemplateBinding FontStretch}"

                                 
FontStyle="{TemplateBinding FontStyle}"

                                 
FontWeight="{TemplateBinding FontWeight}"

                                 
Foreground="{TemplateBinding Foreground}"

                                 
HorizontalContentAlignment="{TemplateBinding
HorizontalContentAlignment}
"

                                 
Padding="{TemplateBinding Padding}"

                                 
TextAlignment="{TemplateBinding TextAlignment}"

                                 
TextDecorations="{TemplateBinding TextDecorations}"

                                 
TextWrapping="{TemplateBinding TextWrapping}"

                                 
VerticalContentAlignment="{TemplateBinding
VerticalContentAlignment}
" />

      **        </ScrollViewer.Content>**

**            </**ScrollViewer>

          </ControlTemplate>

        </Setter.Value>

      </Setter>

    </Style>

  </UserControl.Resources>

  <Grid
x:Name="LayoutRoot"

        Background="White">

    <Button
Margin="35,41,170,124"

            x:Name="Dugme"

            Content="TIKLA">

      <ToolTipService.ToolTip>

        <ToolTip
Style="{StaticResource
ToolTipStili}
"

                Content="Herhangi bir
açıklama metni burada olabilirdi.
">

        </ToolTip>

      </ToolTipService.ToolTip>

    </Button>

  </Grid>

</UserControl>

Yukarıdaki kodumuz içerisinde ControlTemplate'in doğrudan içine bir
ScrollViewer yerleştirdik ve Template içerisinde ContentPresenter'ı
da ScrollViewer'ın Content değerine aktardık. Böylece bu ToolTip
kontrolüne aktarılan tüm Content bir ScrollViewer içerisinde
gösterilecek.

Custom Tooltip
Custom Tooltip

Siz de bu şekilde farklı ToolTip kontrolleri tasarlayarak
uygulamalarınıza kullanabilirsiniz.

Hepinize kolay gelsin.