WPFのDataGridでToolTipを設定する。

この記事は2019年05月18日に投稿しました。

目次

1. はじめに
2. WPFのDataGridでToolTipを設定する
3. おわりに

エッセンシャルWPF:Windows Presentation Foundation (Programmer's SELECTION)

1. はじめに

こんにちは、iOSのエディタアプリPWEditorの開発者の二俣です。
今回は業務で使用しているWPFのDataGridでToolTipを設定する方法についてです。

目次へ

2. WPFのDataGridでToolTipを設定する

WPFのDataGridでToolTipを設定する方法ですが、次のような実装になります。

実装例

MainWindow.xaml

<Window x:Class="WPFDataGridToolTip.MainWindow"
        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"
        xmlns:local="clr-namespace:WPFDataGridToolTip"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <DataGrid Name="dataGrid" MouseMove="DataGrid_MouseMove" />
    </Grid>
</Window>

MainWindow.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WPFDataGridToolTip
{
    class Data
    {
        public int No { get; set; }
        public string Value { get; set; }
    }

    /// <summary>
    /// MainWindow.xaml の相互作用ロジック
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            // データグリッドにテストデータを設定します。
            var list = new List<Data>();
            for (int i = 0; i < 30; ++i)
            {
                var data = new Data();
                data.No = i;
                data.Value = $"Value{i}";
                list.Add(data);
            }
            dataGrid.ItemsSource = list;
        }

        /**
         * @brief データグリッドでマウスが移動した時に呼び出されます。
         * 
         * @param [in] sender データグリッド
         * @param [in] e マウスイベント
         */
        private void DataGrid_MouseMove(object sender, MouseEventArgs e)
        {
            // マウス位置のデータグリッドのセルを取得します。
            var dataGrid = sender as DataGrid;
            var point = e.GetPosition(dataGrid);
            var cell = GetDataGridCell<TextBlock>(dataGrid, point);

            // セルが取得できない場合
            if (cell == null)
            {
                // 終了します。
                return;
            }

            // セルのツールチップを設定します。
            cell.ToolTip = cell.Text;
        }

        /**
         * @brief データグリッドのセルを取得します。
         * 
         * @param [in] dataGrid データグリッド
         * @param [in] point データグリッド上の位置
         */
        private T GetDataGridCell<T>(DataGrid dataGrid, Point point)
        {
            // データグリッド上の指定位置のオブジェクトを取得します。
            T result = default(T);
            var hitResultTest = VisualTreeHelper.HitTest(dataGrid, point);

            // オブジェクトを取得できた場合
            if (hitResultTest != null)
            {
                // Visualオブジェクトを取得します。
                var visualHit = hitResultTest.VisualHit;

                // Visualオブジェクトが取得できる間繰り返します。
                while (visualHit != null)
                {
                    // 取得したVisualオブジェクトが指定した型の場合
                    if (visualHit is T)
                    {
                        result = (T)(object)visualHit;
                        break;
                    }

                    // 親のオブジェクトを取得します。
                    visualHit = VisualTreeHelper.GetParent(visualHit);
                }
            }
            return result;
        }
    }
}

目次へ

3. おわりに

ToolTipの実装確認として、DataGridでマウスカーソルの下にあるセルでToolTipを表示させてみました。

IT×ものづくり教室【LITALICOワンダー】

実戦で役立つ C#プログラミングのイディオム/定石&パターン

紹介している一部の記事のコードはGitlabで公開しています。
興味のある方は覗いてみてください。

目次へ

---

私が勤務しているニューラルでは、主に組み込み系ソフトの開発を行っております。
弊社製品のハイブリッドOS Bi-OSは高い技術力を評価されており、特に制御系や通信系を得意としています。
私自身はiOSモバイルアプリやウィンドウズアプリを得意としております。
ソフトウェア開発に関して相談などございましたら、お気軽にご連絡ください。

また一緒に働きたい技術者の方も随時募集中です。
興味がありましたらご連絡ください。

EMAIL : info-nr@newral.co.jp / m-futamata@newral.co.jp
TEL : 042-523-3663
FAX : 042-540-1688

目次へ