WPF裝飾器

裝飾器定義：

裝飾器是一種特殊類型的 FrameworkElement，用於向用戶提供可視化提示。 對於其他用戶，裝飾器可用於將功能控點添加到元素中或提供有關控件的狀態信息。

裝飾器可以在不改變原有的控件結構的基礎上將功能控點添加到元素中或在界面元素上提供視覺效果等。如WPF中的光標效果、焦點效果等就是通過裝飾器實現的。如圖 通過WPF inspector看到的裝飾器層及Button的默認Focus效果：

           

裝飾器是一個始終位於裝飾元素或裝飾元素集合上方的呈現圖面，其呈現獨立於該裝飾器所綁定到的 UIElement 。WPF中的裝飾器是在單獨一個層AdornerLayer上進行繪制的，該層位於普通界面元素之上，而且允許存在多個AdornerLayer層進行疊加，當加入AdornerLayer層后，Adorner會默認使用其所裝飾元素的左上角作為原點進行定位。

裝飾器的應用：

1.向 UIElement 添加功能控點，使用這些控點，用戶可以通過某種方式（調整大小、旋轉、重新定位等等）操作元素。

2.提供可視反饋以指示各種狀態，或響應各種事件。

3.在 UIElement 上疊加視覺效果。

4.從視覺上遮蓋或重寫 UIElement 的一部分或全部。

 

WPF 為裝飾視覺元素提供一個基本框架。下表列出了裝飾對象時使用的主要類型及其用途。

Adorner	一個抽象基類，所有具體裝飾器的實現都從該類繼承。
AdornerLayer	一個類，表示一個或多個裝飾元素的裝飾器的呈現層。
AdornerDecorator	一個類，使裝飾器層與元素集合相關聯。

 

 

 

 

 

創建裝飾器步驟：

1.自定義繼承自Adorner的裝飾器類：

　　public class FocusAdorner : Adorner
    {
        //被裝飾的元素
        FrameworkElement _adornedElement = null;
        //這里必須調用基類的構造函數
        public FocusAdorner(UIElement adornedElement) : base(adornedElement) { }
        //通過復寫onRender, 實現裝飾器的呈現行為
        protected override void OnRender(DrawingContext drawingContext)
        {

        }
     }

2.得到指定元素上方的可視化樹中第一個裝飾器層 public static AdornerLayer GetAdornerLayer(Visual visual)。

3.將裝飾器添加到裝飾器層：

　　　　private void WindowLoaded(object sender, RoutedEventArgs e)
        {
            AdornerLayer adornerLayer = AdornerLayer.GetAdornerLayer(_label);
            adornerLayer.Add(new ScaleAdorner(_label));
        }

小例子：為TextBox重新設計一個Focus效果：

　　public class FocusAdorner : Adorner
    {
        public FocusAdorner(UIElement adornedElement) : base(adornedElement)
        {
            this.IsHitTestVisible = false;
        }

        protected override void OnRender(DrawingContext drawingContext)
        {
            base.OnRender(drawingContext);
            Rect adornedElementRect = new Rect(this.AdornedElement.RenderSize);
            Pen renderPen = new Pen(new SolidColorBrush(Colors.Red), 1.0);

            drawingContext.DrawRectangle(new SolidColorBrush(Colors.Transparent), renderPen,adornedElementRect);
        }
    }

MainPage：

 　　　　private void WindowLoaded(object sender, RoutedEventArgs e)
        {
            AdornerLayer adornerLayer = AdornerLayer.GetAdornerLayer(texBox1);
            adornerLayer.Add(new ScaleAdorner(texBox1));
        }

當TextBox獲得焦點時效果：