ドラッグ操作でゴーストを表示する

(2017/06/27 7:32:15 created.)

(2017/06/27 7:42:01 modified.)

ドラッグ操作を実装したとき、ドラッグ対象のコントロールが半透明になってマウスポインタに追従するようになると、操作感が格段に良くなります。ここでは Adorner クラスを使用して実現する方法を紹介します。

ここでは最終的に次のような動作が実現できるようなサンプルを紹介します。

Adorner クラス

Adorner クラスは、UIElement クラスを装飾するための FrameworkElement クラスの派生クラスです。また、Adorner クラスを表示するには、装飾層と呼ばれるレイヤーが必要になり、これは AdornerDecorator クラスによって提供されます。AdornerDecorator クラスは Grid コントロールなどの標準的なパネルコントロールに含まれているため、意図的に AdornerDecorator を XAML に記述することはあまりありません。

ゴーストを表示するための Adorner 派生クラス

まずゴーストを表示するために次のようなクラスを定義します。

GhostAdorner.cs

```
namespace Tips_Adorner.Views.Behaviors
```
```
{
```
```
    using System.Windows;
```
```
    using System.Windows.Documents;
```
```
    using System.Windows.Media;
```
```
 
```
```
    /// <summary>
```

    /// ゴーストを表示する装飾用コントロールを表します。

```
    /// </summary>
```

    internal class GhostAdorner : Adorner

```
    {
```
```
        /// <summary>
```

        /// 新しいインスタンスを生成します。

```
        /// </summary>
```

        /// <param name="visual">装飾する要素を指定します。</param>

        /// <param name="adornedElement">装飾に用いる要素を指定します。</param>

        /// <param name="point">装飾を表示する位置を、装飾する要素に対する相対位置として指定します。</param>

        /// <param name="offset">装飾を表示する位置に対するオフセットを指定します。</param>

        public GhostAdorner(Visual visual, UIElement adornedElement, Point point, Point offset)

```
            : base(adornedElement)
```
```
        {
```

            this._layer = AdornerLayer.GetAdornerLayer(visual);

```
            this.CurrentPoint = point;
```
```
            this.Offset = offset;
```
```
 
```
```
            Attach();
```
```
        }
```
```
 
```

        #region 依存関係プロパティ

```
 
```
```
        /// <summary>
```

        /// CurrentPoint 依存関係プロパティの定義

```
        /// </summary>
```

        public static readonly DependencyProperty CurrentPointProperty = DependencyProperty.Register("CurrentPoint", typeof(Point), typeof(GhostAdorner), new FrameworkPropertyMetadata(default(Point), FrameworkPropertyMetadataOptions.AffectsRender));

```
 
```
```
        /// <summary>
```

        /// ゴーストの表示位置を取得または設定します。

```
        /// </summary>
```
```
        public Point CurrentPoint
```
```
        {
```

            get { return (Point)GetValue(CurrentPointProperty); }

            set { SetValue(CurrentPointProperty, value); }

```
        }
```
```
 
```
```
        /// <summary>
```

        /// Offset 依存関係プロパティの定義

```
        /// </summary>
```

        public static readonly DependencyProperty OffsetProperty = DependencyProperty.Register("Offset", typeof(Point), typeof(GhostAdorner), new FrameworkPropertyMetadata(default(Point), FrameworkPropertyMetadataOptions.AffectsRender));

```
 
```
```
        /// <summary>
```

        /// ゴーストの表示位置のオフセットを取得または設定します。

```
        /// </summary>
```
```
        public Point Offset
```
```
        {
```

            get { return (Point)GetValue(OffsetProperty); }

            set { SetValue(OffsetProperty, value); }

```
        }
```
```
 
```

        #endregion 依存関係プロパティ

```
 
```
```
        #region 公開メソッド
```
```
 
```
```
        /// <summary>
```
```
        /// アタッチします。
```
```
        /// </summary>
```
```
        public void Attach()
```
```
        {
```
```
            if (this._layer != null)
```
```
            {
```
```
                if (!this._isAttached)
```
```
                {
```

                    this._layer.Add(this);

                    this._isAttached = true;

```
                }
```
```
            }
```
```
        }
```
```
 
```
```
        /// <summary>
```
```
        /// デタッチします。
```
```
        /// </summary>
```
```
        public void Detach()
```
```
        {
```
```
            if (this._layer != null)
```
```
            {
```
```
                if (this._isAttached)
```
```
                {
```

                    this._layer.Remove(this);

                    this._isAttached = false;

```
                }
```
```
            }
```
```
        }
```
```
 
```
```
        #endregion 公開メソッド
```
```
 
```

        #region 描画オーバーライド

```
 
```
```
        /// <summary>
```

        /// 描画処理のオーバーライド

```
        /// </summary>
```

        /// <param name="drawingContext">描画先のコンテキストを指定します。</param>

        protected override void OnRender(DrawingContext drawingContext)

```
        {
```

            var pt = new Point(this.CurrentPoint.X + this.Offset.X, this.CurrentPoint.Y + this.Offset.Y);

            var rect = new Rect(pt, this.AdornedElement.RenderSize);

            var brush = new VisualBrush(this.AdornedElement);

```
            brush.Opacity = 0.3;
```
```
 
```

            drawingContext.DrawRectangle(brush, null, rect);

```
        }
```
```
 
```

        #endregion 描画オーバーライド

```
 
```
```
        #region private フィールド
```
```
 
```
```
        /// <summary>
```
```
        /// 装飾層
```
```
        /// </summary>
```
```
        private AdornerLayer _layer;
```
```
 
```
```
        /// <summary>
```

        /// アタッチされているかどうか

```
        /// </summary>
```
```
        private bool _isAttached;
```
```
 
```

        #endregion private フィールド

```
    }
```
```
}
```

このクラスは OnRender() メソッドをオーバーライドしており、AdornedElement という UIElement クラスを VisualBrush にし、Opacity を指定して DrawRectangle() メソッドで描画しています。つまり、AdornedElement に指定されたコントロールを半透明にして表示している、まさにゴーストを表示していることになります。

描画処理の中で、ゴーストを表示させる位置を CurrentPoint プロパティと Offset プロパティから決定しています。CurrentPoint プロパティはゴーストの現在位置、Offset プロパティは CurrentPoint プロパティからのオフセットを表しています。

コンストラクタでは、この Adorner クラスを描画するための装飾層を取得しています。AdornerLayer.GetAdornerLayer() メソッドで、指定したコントロールに対する装飾層を取得できます。ここで取得した装飾層をプライベートフィールドである _layer 変数で保持し、各メソッド内で使い回しています。

Attach() メソッドで、このクラスを装飾層に登録することで実際に描画させています。また、この装飾の描画を取りやめるための Detach() メソッドも用意しています。

ゴーストを表示するための添付ビヘイビア

前節で定義したクラスを実際に使ってみます。ここでは添付ビヘイビアに組み込んでみます。

AdornerBehavior.cs

```
namespace Tips_Adorner.Views.Behaviors
```
```
{
```
```
    using System.Windows;
```
```
    using System.Windows.Controls;
```
```
    using System.Windows.Documents;
```
```
    using System.Windows.Input;
```
```
    using System.Windows.Media;
```
```
 
```
```
    public class AdornerBehavior
```
```
    {
```
```
        /// <summary>
```

        /// IsEnabled 添付プロパティの定義

```
        /// </summary>
```

        public static readonly DependencyProperty IsEnabledProperty = DependencyProperty.RegisterAttached("IsEnabled", typeof(bool), typeof(AdornerBehavior), new PropertyMetadata(false, OnIsEnabledPropertyChanged));

```
 
```
```
        /// <summary>
```

        /// IsEnabled 添付プロパティを取得します。

```
        /// </summary>
```

        /// <param name="target">対象とする DependencyObject を指定します。</param>

        /// <returns>取得した値を返します。</returns>

        public static bool GetIsEnabled(DependencyObject target)

```
        {
```

            return (bool)target.GetValue(IsEnabledProperty);

```
        }
```
```
 
```
```
        /// <summary>
```

        /// IsEnabled 添付プロパティを設定します。

```
        /// </summary>
```

        /// <param name="target">対象とする DependencyObject を指定します。</param>

        /// <param name="value">設定する値を指定します。</param>

        public static void SetIsEnabled(DependencyObject target, bool value)

```
        {
```

            target.SetValue(IsEnabledProperty, value);

```
        }
```
```
 
```
```
        /// <summary>
```

        /// IsEnabled 添付プロパティ変更イベントハンドラ

```
        /// </summary>
```

        /// <param name="sender">イベント発行元</param>

        /// <param name="e">イベント引数</param>

        private static void OnIsEnabledPropertyChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e)

```
        {
```

            var element = sender as UIElement;

```
            if (element == null)
```
```
                return;
```

            var isEnabled = GetIsEnabled(element);

```
            if (isEnabled)
```
```
            {
```

                element.PreviewMouseLeftButtonDown += element_PreviewMouseLeftButtonDown;

                element.PreviewMouseMove += element_PreviewMouseMove;

                element.PreviewMouseLeftButtonUp += element_PreviewMouseLeftButtonUp;

```
            }
```
```
            else
```
```
            {
```
```
            }
```
```
        }
```
```
 
```
```
        /// <summary>
```
```
        /// 装飾用コントロール
```
```
        /// </summary>
```

        private static GhostAdorner _adorner;

```
 
```
```
        /// <summary>
```

        /// PreviewMouseLeftButtonDown イベントハンドラ

```
        /// </summary>
```

        /// <param name="sender">イベント発行元</param>

        /// <param name="e">イベント引数</param>

        static void element_PreviewMouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)

```
        {
```

            var originalElement = e.OriginalSource as FrameworkElement;

            var parent = originalElement != null ? FindAncestor<Panel>(originalElement) : null;

            var adornedElement = sender as FrameworkElement;

            if ((parent == null) || (adornedElement == null))

```
                return;
```
```
 
```

            var pt = e.GetPosition(adornedElement);

            var offset = new Point(-pt.X, -pt.Y);

            _adorner = new GhostAdorner(parent, adornedElement, pt, offset);

```
 
```

            adornedElement.CaptureMouse();

```
        }
```
```
 
```
```
        /// <summary>
```

        /// PreviewMouseLeftButtonUp イベントハンドラ

```
        /// </summary>
```

        /// <param name="sender">イベント発行元</param>

        /// <param name="e">イベント引数</param>

        static void element_PreviewMouseLeftButtonUp(object sender, MouseButtonEventArgs e)

```
        {
```
```
            if (_adorner != null)
```
```
            {
```

                _adorner.AdornedElement.ReleaseMouseCapture();

```
                _adorner.Detach();
```
```
                _adorner = null;
```
```
            }
```
```
        }
```
```
 
```
```
        /// <summary>
```

        /// PreviewMouseMove イベントハンドラ

```
        /// </summary>
```

        /// <param name="sender">イベント発行元</param>

        /// <param name="e">イベント引数</param>

        static void element_PreviewMouseMove(object sender, MouseEventArgs e)

```
        {
```
```
            if (_adorner != null)
```
```
            {
```

                if (_adorner.AdornedElement.IsMouseCaptured && (e.LeftButton == MouseButtonState.Pressed))

```
                {
```

                    var pt = e.GetPosition(_adorner.AdornedElement);

                    _adorner.CurrentPoint = pt;

```
                }
```
```
            }
```
```
        }
```
```
 
```
```
        /// <summary>
```

        /// 指定された型の親要素を探します。

```
        /// </summary>
```

        /// <typeparam name="T">親要素の型を指定します。</typeparam>

        /// <param name="element">探索を開始する要素を指定します。</param>

        /// <returns>親要素を返します。</returns>

        private static T FindAncestor<T>(FrameworkElement element)

```
            where T : FrameworkElement
```
```
        {
```
```
            do
```
```
            {
```

                element = VisualTreeHelper.GetParent(element) as FrameworkElement;

```
                if (element is T)
```

                    return element as T;

```
            } while (element != null);
```
```
            return null;
```
```
        }
```
```
    }
```
```
 }
```

やり方はそれぞれですが、ここで肝心なのは、PreviewMouseLeftButtonDown イベントハンドラで GhostAdorner クラスのインスタンスを生成し、PreviewMouseMove イベントハンドラで CurrentPoint プロパティを更新し、PreviewMouseLeftButtonUp イベントハンドラで GhostAdorner クラスをデタッチしているということです。

これを使用した XAML の例を以下に示します。

MainView.xaml

<Window x:Class="Tips_Adorner.Views.MainView"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        xmlns:b="clr-namespace:Tips_Adorner.Views.Behaviors"

        Title="MainView" Height="300" Width="300">

```
    <Grid>
```

        <Border b:AdornerBehavior.IsEnabled="True">

```
            <Border.Style>
```

                <Style TargetType="Border">

                    <Setter Property="BorderBrush" Value="Red" />

                    <Setter Property="BorderThickness" Value="2" />

                    <Setter Property="CornerRadius" Value="4" />

                    <Setter Property="Padding" Value="4" />

                    <Setter Property="Background" Value="Transparent" />

                    <Setter Property="HorizontalAlignment" Value="Center" />

                    <Setter Property="VerticalAlignment" Value="Center" />

```
                </Style>
```
```
            </Border.Style>
```
```
 
```

            <TextBlock Text="Drag me." />

```
        </Border>
```
```
    </Grid>
```
```
</Window>
```

定義した添付ビヘイビアを Border コントロールに添付しているため、ゴーストは Border コントロール以下のコントロールになります。