Ö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.

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

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!

Ö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

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

Hepinize kolay gelsin.