Silverlight的自定义tooltip提示工具条

时间:2023-01-29 12:23:03

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

Silverlight的自定义tooltip提示工具条

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

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

Silverlight的自定义tooltip提示工具条Silverlight的自定义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):

Silverlight的自定义tooltip提示工具条Silverlight的自定义tooltip提示工具条代码
< 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 ="选择颜色" />

            
<!-- tip显示区 -->
            
< 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 >

后端代码:

Silverlight的自定义tooltip提示工具条Silverlight的自定义tooltip提示工具条代码
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 ; }
    }

}