这种应用场景其实很多,比如游戏中装备/魔法的选择菜单,这里借用了"深蓝色右手"的一张图
再比如聊天室中的文本颜色设置
虽然sl的ToolTipService.ToolTip属性可以设置任何对象,比如下面这样
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![ExpandedBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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 >
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):
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![ExpandedBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<
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 >
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 >
后端代码:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![ExpandedBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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 ; }
}
}
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 ; }
}
}