Silverlight的自定义tooltip提示工具条

这种应用场景其实很多，比如游戏中装备/魔法的选择菜单，这里借用了"深蓝色右手"的一张图

再比如聊天室中的文本颜色设置

虽然sl的ToolTipService.ToolTip属性可以设置任何对象，比如下面这样

代码

1 < Rectangle Fill ="Red" Height ="50" Width ="50" ToolTipService.Placement ="Top" >
2              < ToolTipService.ToolTip >
3                  < StackPanel Orientation ="Horizontal" >
4                      < Rectangle Fill ="Green" Height ="50" Width ="50" ></ Rectangle >
5                      < Rectangle Fill ="Blue" Height ="50" Width ="50" Margin ="1,0,0,0" ></ Rectangle >
6                      < Rectangle Fill ="Pink" Height ="50" Width ="50" Margin ="1,0,0,0" ></ Rectangle >
7                  </ StackPanel >
8              </ ToolTipService.ToolTip >
9          </ Rectangle >

但是有一个问题，鼠标一旦离开对象，tooltip就消失了，没办法在tooltip工具栏上点选操作。

所以得换一种思路，可以借助VSM方便的实现，设置好tooltip工具条后，定义二个基本的状态：Enter ，Leave 即可，Enter状态中设置tooltip对应的对象显示，Leave状态中设置tooltip对象隐藏

示例代码(Xaml)：

代码

< UserControl
     xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d ="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc ="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable ="d"
    x:Class ="tooltipTest.MainPage"
    d:DesignWidth ="640" d:DesignHeight ="480" >

     < Grid x:Name ="LayoutRoot" >

         
         < VisualStateManager.VisualStateGroups >
             < VisualStateGroup x:Name ="CommStates" >
                 < VisualState x:Name ="Enter" >
                     < Storyboard >
                         < ObjectAnimationUsingKeyFrames BeginTime ="00:00:00" Storyboard.TargetName ="itemsTip" Storyboard.TargetProperty ="(UIElement.Visibility)" >
                             < DiscreteObjectKeyFrame KeyTime ="00:00:00" >
                                 < DiscreteObjectKeyFrame.Value >
                                     < Visibility > Visible </ Visibility >
                                 </ DiscreteObjectKeyFrame.Value >
                             </ DiscreteObjectKeyFrame >
                         </ ObjectAnimationUsingKeyFrames >
                     </ Storyboard >
                 </ VisualState >
                 < VisualState x:Name ="Leave" >
                     < Storyboard >
                         < ObjectAnimationUsingKeyFrames BeginTime ="00:00:00" Storyboard.TargetName ="itemsTip" Storyboard.TargetProperty ="(UIElement.Visibility)" >
                             < DiscreteObjectKeyFrame KeyTime ="00:00:00.1" >
                                 < DiscreteObjectKeyFrame.Value >
                                     < Visibility > Collapsed </ Visibility >
                                 </ DiscreteObjectKeyFrame.Value >
                             </ DiscreteObjectKeyFrame >
                         </ ObjectAnimationUsingKeyFrames >
                     </ Storyboard >
                 </ VisualState >
             </ VisualStateGroup >
         </ VisualStateManager.VisualStateGroups >

         < Canvas HorizontalAlignment ="Center" VerticalAlignment ="Center" x:Name ="cTip" Height ="20" Width ="20" Cursor ="Hand" MouseLeave ="GoToLeave" MouseEnter ="GoToEnter" >
             < Rectangle x:Name ="rColor" Fill ="Black" Width ="20" Height ="20" ToolTipService.ToolTip ="选择颜色" />

             
             < ItemsControl x:Name ="itemsTip" Canvas.Top ="-21" Canvas.Left ="0" Visibility ="Collapsed" >
                 < ItemsControl.ItemsPanel >
                     < ItemsPanelTemplate >
                         < StackPanel Orientation ="Horizontal" />
                     </ ItemsPanelTemplate >
                 </ ItemsControl.ItemsPanel >
                 < ItemsControl.ItemTemplate >
                     < DataTemplate >
                         < Rectangle Fill =" {Binding Color} " ToolTipService.ToolTip =" {Binding Name} " Width ="20" Height ="20" Margin ="0,0,1,0" MouseLeftButtonDown ="ChangeColor" />
                     </ DataTemplate >
                 </ ItemsControl.ItemTemplate >
             </ ItemsControl >
         </ Canvas >

     </ Grid >
</ UserControl >

后端代码：

代码

using System.Collections.Generic;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Shapes;

namespace tooltipTest
{
     public partial class MainPage : UserControl
    {
        List < FillColor > lstTipsData;

         public MainPage()
        {
            InitializeComponent();

             // 初始化数据
            lstTipsData = new List < FillColor > () {
                 new FillColor(){ Color = new SolidColorBrush(Colors.Red), Name = " 红色 " },
                 new FillColor(){ Color = new SolidColorBrush(Colors.Blue), Name = " 蓝色 " },
                 new FillColor(){ Color = new SolidColorBrush(Colors.Green),Name = " 绿色 " },
                 new FillColor(){ Color = new SolidColorBrush(Colors.Magenta), Name = " 洋红 " },
                 new FillColor(){ Color = new SolidColorBrush(Colors.Black), Name = " 黑色 " },
                 new FillColor(){ Color = new SolidColorBrush(Colors.Orange), Name = " 橙色 " },
            };

             this .Loaded += new RoutedEventHandler(MainPage_Loaded);
        }

         void MainPage_Loaded( object sender, RoutedEventArgs e)
        {
            itemsTip.ItemsSource = lstTipsData; // 数据绑定
        }

         private void GoToEnter( object sender, MouseEventArgs e)
        {
            VisualStateManager.GoToState( this , " Enter " , false );
        }

         private void GoToLeave( object sender, MouseEventArgs e)
        {
            VisualStateManager.GoToState( this , " Leave " , false );
        }

         /// <summary>
         /// 点击后更换颜色
         /// </summary>
         /// <param name="sender"></param>
         /// <param name="e"></param>
         private void ChangeColor( object sender, MouseButtonEventArgs e)
        {
            rColor.Fill = (sender as Rectangle).Fill;
            VisualStateManager.GoToState( this , " Leave " , false );
        }
    }

     /// <summary>
     /// 测试实体类
     /// </summary>
     public class FillColor
    {
         public SolidColorBrush Color { set ; get ; }
         public string Name { set ; get ; }
    }

}

秒客网

Silverlight的自定义tooltip提示工具条

相关文章