VARCHART XGantt系列教程：甘特图提示与技巧 – 如何设计时尚的工具提示

本文的分步指南向我们的甘特图组件VARCHART XGantt用户展示了如何设计清晰排列的工具提示。

VARCHART XGantt是一个交互式的甘特图控件，其模块化的设计让您可以创建满足您和您的客户所需求的应用程序（我们领先的甘特图控件VARCHART XGantt可用于.NET，ActiveX和ASP.NET应用程序。）。VARCHART XGantt可以快速、简单地集成到您的应用程序中，帮助您识别性能瓶颈、避免延迟以及高效利用资源，使复杂数据变得更加容易理解。

甘特图以时间轴可视化任务，资源或能力，从而为规划者提供最佳概览。在设计时，应牢记直接显示对规划者至关重要的信息，以便他能够快速识别规划冲突并进行干预。显示太多信息可能会危及清晰度。这就是为什么工具提示（tooltip）是仅在需要时显示重要数据的好方法。甘特图的真实情况也适用于工具提示：必须快速感知信息，这意味着必须以明确排序和排列的方式呈现信息。本分步指南向我们的甘特图组件VARCHART XGantt用户展示了如何设计清晰排列的工具提示。

VARCHART XGantt最新版免费下载试用

令人困惑的工具提示

VARCHART XGantt中包含的工具提示的设计选项受到限制:

• 列中数据字段名称和内容的排列
• 根据条件突出显示关键值
• 显示表示某些状态的符号

易于阅读的工具提示

这就是工具提示看起来像你绕过有限的设计选项，只需很少的编程工作：

一步一步的指导:

首先，在VARCHART XGantt中停用VcToolTipTextSupplying事件：

然后在Visual Studio解决方案中创建一个新的表单TooltipWindow。在含有XGantt形式的构造中，TooltipWindow得到由调用配置SetTooltipWindowAttributes方法。此方法如下所示：

TooltipWindow _ttw;private void SetTooltipWindowAttributes(){   _ttw = new TooltipWindow(vcGantt1);   //Settings for the Tooltip window:   _ttw.StartPosition = FormStartPosition.Manual;   _ttw.AutoScaleMode = AutoScaleMode.Font;   _ttw.AutoSize = true;   _ttw.AutoSizeMode = AutoSizeMode.GrowAndShrink;   _ttw.ControlBox = false;   _ttw.FormBorderStyle = FormBorderStyle.None;   _ttw.MaximizeBox = false;   _ttw.MinimizeBox = false;   _ttw.ShowIcon = false;   _ttw.ShowInTaskbar = false;   _ttw.TopMost = true;}

现在在TooltipWindow上放置一个DataGridView 并将其命名为TTDataGrid。在DataGridView 的“ 编辑列”对话框中创建三列：

在TooltipWindow的构造函数中，调用SetDataGridAttributes方法并通过此方法配置TTDataGrid。该方法如下所示：

private void SetDataGridAttributes(){   //General settings for the data grid:   TTDataGrid.AllowUserToAddRows = false;   TTDataGrid.AllowUserToDeleteRows = false;   TTDataGrid.AllowUserToResizeColumns = false;   TTDataGrid.AllowUserToResizeRows = false;   TTDataGrid.AutoSizeColumnsMode = DataGridViewAutoSizeColumnsMode.AllCells;   TTDataGrid.ClipboardCopyMode = DataGridViewClipboardCopyMode.Disable;   TTDataGrid.ColumnHeadersVisible = false;   TTDataGrid.ReadOnly = true;   TTDataGrid.RowHeadersVisible = false;   TTDataGrid.ScrollBars = ScrollBars.None;   TTDataGrid.ShowCellToolTips = false;   TTDataGrid.RowTemplate.DefaultCellStyle.BackColor = Color.FromArgb(255, 240, 240, 240);   TTDataGrid.RowTemplate.DefaultCellStyle.ForeColor = Color.Black;   TTDataGrid.RowTemplate.DefaultCellStyle.SelectionBackColor = Color.FromArgb(255, 240, 240, 240);   TTDataGrid.RowTemplate.DefaultCellStyle.SelectionForeColor = Color.Black;   //Column 0:   DataGridViewImageColumn dgvic = (DataGridViewImageColumn)TTDataGrid.Columns[0];   dgvic.ImageLayout = DataGridViewImageCellLayout.Zoom;   dgvic.ReadOnly = true;   dgvic.Resizable = DataGridViewTriState.True;   dgvic.DefaultCellStyle.NullValue = null;   dgvic.DefaultCellStyle.SelectionBackColor = Color.FromArgb(255, 240, 240, 240);   dgvic.DefaultCellStyle.SelectionForeColor = Color.Black;   //Column 1:   DataGridViewColumn dgvc = TTDataGrid.Columns[1];   dgvc.ReadOnly = true;   dgvc.Resizable = DataGridViewTriState.True;   dgvc.SortMode = DataGridViewColumnSortMode.NotSortable;   //Column 2:   dgvc = TTDataGrid.Columns[2];   dgvc.ReadOnly = true;   dgvc.Resizable = DataGridViewTriState.True;   dgvc.SortMode = DataGridViewColumnSortMode.NotSortable;}

将鼠标移到VARCHART XGantt上会不断触发VcGantt_MouseMove事件。在这种情况下，首先要通过VcGantt.IdentifyObjectAt方法识别鼠标光标当前悬停的对象类型。

如果鼠标光标悬停在节点上（对象类型为vcObjTypeNodeInDiagram），则会启动一个计时器，使TooltipWindow可见。如果鼠标光标远离节点，则TooltipWindow将再次切换为不可见。

这需要通过以下代码行实现：

bool _isVisible = false;private void TooltipWindow_VisibleChanged(object sender, EventArgs e){   VcNode node = _gantt.GetNodeByID(_nodeID);   _isVisible = !_isVisible;   if (_isVisible)   {      FillDataGrid(node);      ResizeDataGrid();   }   else      TTDataGrid.Rows.Clear();}private void FillDataGrid(VcNode node){   object[] rowValues = new object[TTDataGrid.Columns.Count];   //Fill data grid   for (short i = 0; i < _dtfc.Count; i++)   {      rowValues[1] = _dtfc.DataTableFieldByIndex(i).Name + ":";      rowValues[2] = node.get_DataField(i).ToString();      TTDataGrid.Rows.Add(rowValues);   }   //Set attributes for cell(s) which match certain criteria   DataGridViewCellStyle redCellStyle = new DataGridViewCellStyle();   redCellStyle.ForeColor = Color.Red;   redCellStyle.SelectionForeColor = Color.Red;   redCellStyle.Font = new Font("Microsoft Sans Serif", 8, FontStyle.Bold);   if (Convert.ToInt32(node.get_DataField(4)) >= 10)   // 4: Duration   {      TTDataGrid[0, 4].Value = Enhanced_Tooltip.Properties.Resources.Warning;      TTDataGrid[2, 4].Style = redCellStyle;   }}private void ResizeDataGrid(){   int dataGridWidth = 0;   int dataGridHeight = 0;   //Resize width of data grid   for (int i = 0; i < TTDataGrid.Columns.Count; i++)      dataGridWidth += TTDataGrid.Columns[i].Width;   TTDataGrid.Width = dataGridWidth;   //Resize height of data grid   for (int i = 0; i < TTDataGrid.Rows.Count; i++)      dataGridHeight += TTDataGrid.Rows[i].Height;   TTDataGrid.Height = dataGridHeight;}

在FillDataGrid方法中，VARCHART XGantt的数据定义的所有数据字段都示例性地加载到DataGrid中。此外，所有操作持续时间大于或等于10，都显示为红色，并在DataGrid的第一列中用黄色感叹号表示。当然，所有这些都可以根据需要进行定制。

想要购买 VARCHART XGantt 正版授权，或者获取更多该产品有趣的可视化提示和技巧的朋友可以点击”咨询在线客服”哦~

标签：甘特图甘特图开发资源优化资源管理

来源：慧都