Silverlight的自定义tooltip提示工具条

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

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

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

  <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="选择颜色"/>

            <!--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>

后端代码：

 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; }
    }

}