Sử dụng Tooltip trong Silverlight

I.Introdution

Tooltip có lẽ là một cái tên khá quen thuộc với các bạn, trong bài này mình xin chia sẻ cách sử dụng Tooltip trong Silverlight

II.Creatine Project And Coding

Mở Visual Studio lên và tạo mới Silverlight Application

image

Tiếp theo chúng ta làm một giao diện đơn giản

image

Để thêm một Tooltip cho một Control nào đó chúng ta khai báo thuộc tính ToolTipService.ToolTip="You are the best" trong code XAML của Control đó, các bạn có thể hiểu rõ hơn ở đoạn XAML sau :

   1: <Button Height="60" Name="btn_Click" Content="Click Me"

   2:                    ToolTipService.ToolTip="You are the best" FontSize="20"></Button>

và kết quả sau khi chạy thử ứng dụng :

image

Ngoài ra chúng ta cũng có thể tủy chỉnh các Control khác trong Tooltip, tiếp theo mình sẽ hướng dẩn các bạn thêm các Control như TextBock, Image vào ứng dụng :

   1: <ToolTipService.ToolTip>

   2:     <ToolTip Background="Red">

   3:         <StackPanel>

   4:             <TextBlock Text="Silverlight Tootip"/>

   5:             <Image Source="/TooltipColtrol;component/Images/silverlight.jpg" />

   6:             <TextBlock Text="Web is beautiful"/>

   7:         </StackPanel>

   8:     </ToolTip>

   9: </ToolTipService.ToolTip>

Các bạn lưu ý rằng Tooltip chỉ chứa 1 và chỉ 1 Control trong nó, do đó nếu muốn có nhiều Control trong nó thì các bản chỉ còn cách là chèn các Control đó vào một Layout Control, như đoạn Code trên là mình chèn các TextBlock,Image vào Stackpanel.

Chạy Úng dụng chúng ta có kết quả :

Khi Mouse Enter vào Stackpanel thì Tooltip hiện ra

image

image

Full Source code :

   1: <UserControl x:Class="TooltipColtrol.MainPage"

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

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

   4:     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

   5:     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

   6:     mc:Ignorable="d"

   7:     d:DesignHeight="300" d:DesignWidth="400">

   8:  

   9:     <Grid x:Name="LayoutRoot" Background="White" Margin="1" >

  10:         <StackPanel>

  11:             <StackPanel.Background>

  12:                 <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

  13:                     <GradientStop Color="#FF8ACCD8" Offset="0.023" />

  14:                     <GradientStop Color="White" Offset="1" />

  15:                 </LinearGradientBrush>

  16:             </StackPanel.Background>

  17:             <Button Height="60" Name="btn_Click" Content="Click Me"

  18:                     ToolTipService.ToolTip="You are the best" FontSize="20"></Button>

  19:             <ToolTipService.ToolTip>

  20:                 <ToolTip Background="Red">

  21:                     <StackPanel>

  22:                         <TextBlock Text="Silverlight Tootip"/>

  23:                         <Image Source="/TooltipColtrol;component/Images/silverlight.jpg" />

  24:                         <TextBlock Text="Web is beautiful"/>

  25:                     </StackPanel>

  26:                 </ToolTip>

  27:             </ToolTipService.ToolTip>

  28:         </StackPanel>

  29:     </Grid>

  30: </UserControl>

/*Web is beautiful*/

Leave a comment