Silverlight的自定义tooltip提示工具条
时间:2022-04-23
本文章向大家介绍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="选择颜色"/>
<!--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; }
}
}
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 单基因生信分析流程(6)单基因相似性分析
- 三阴性乳腺癌提取和分析
- 一日一技:更友好的格式化数据提取方案
- 『深度应用』YoloV5 RTX2080Ti TensorRT与PyTorch速度对比
- 0797-使用HDP或CDP的Atlas采集CDH6的元数据和血缘
- 现代通信理论与新技术 PPT笔记整理
- 找找规律——LeetCode题目6:Z字形变换
- 给你点信心——LeetCode题目7:整数反转
- Python -二叉树 创建与遍历算法(很详细,转自国外教程)
- APP流量来源追踪方式——Android篇
- 从浏览器输入网址回车到看到页面过程到底经历了什么?
- Flutter Bloc 官方文档(BlocBuilder翻译)
- OpenGL ES 3.0 | 统一变量和属性的概念与(在程序中的)获取流程、统一变量缓冲区对象详解、std140块规范、用 命名统一变量块 建立 统一变量缓冲区对象 的流程 和 相关API 和...
- 深入浅出SVM(PART III)
- 高频原题——LeetCode题目8:字符串转换整数 (atoi)