Pe o cărămidă stau.

Primul mic articol despre WPF, vai, tu, am emoții.

Titlul e corect. Exact, nu să o adorăm, ci să o adornăm. Vrem să avem posibilitatea de a desena o linie (deocamdată folosind doar XAML) de care utilizatorul să poată să tragă. Vom face treaba asta cu adorneri.

Ce este un adorner?

Un adorner este un tip special de FrameworkElement. El se ”lipește” de un alt FrameworkElement (pe care se zice că îl adornează) și foarte important, este desenat intr-un alt plan (AdornerLayer) decât elementele normale. Întotdeauna AdornerLayer-ul va fi desenat deasupra elementului pe care îl adornează. Oricărui FrameworkElement i se poate atașa unul sau mai mulți adorneri, și partea faină este că lucrul ăsta nu implică în niciun fel modificarea elementului adornat. Putem crea adorneri pentru controale din .NET Framework, spre exemplu putem face un adorner pentru scoaterea în evidență a unui TextBox în care s-au introdus date aiurea.

Ce vrem noi să adornăm și de ce

O linie, o simplă linie. Vrem ca la runtime să putem trage de cele două capete și să o redimensionăm în felul ăsta. Deci ne-ar trebui un adorner pe linia aia, care să pună câte un guguloi în fiecare capăt și sa raspunda la drag.

Hai cu codul!

    class LineAdorner : Adorner
    {
        private const int THUMB_SIZE = 10;

        private Thumb _startThumb;
        private Thumb _endThumb;

        private VisualCollection _visualChilds;

        protected override int VisualChildrenCount { get { return _visualChilds.Count; } }

        protected override Visual GetVisualChild(int index) { return _visualChilds[index]; }

        protected override Size ArrangeOverride(Size finalSize)
        {
            Line line = this.AdornedElement as Line;

            var startRect = new Rect(
                line.X1 - THUMB_SIZE / 2, line.Y1 - THUMB_SIZE / 2,
                THUMB_SIZE, THUMB_SIZE);
            _startThumb.Arrange(startRect);

            var endRect = new Rect(
                line.X2 - THUMB_SIZE / 2, line.Y2 - THUMB_SIZE / 2,
                THUMB_SIZE, THUMB_SIZE);
            _endThumb.Arrange(endRect);

            return finalSize;
        }

        public LineAdorner(Line line)
            : base(line)
        {
            _visualChilds = new VisualCollection(this);

            _startThumb = new Thumb();
            _startThumb.Opacity = 0.5;
            _startThumb.DragDelta += (s, e) =>
                {
                    Line adornedLine = this.AdornedElement as Line;
                    line.X1 = line.X1 + e.HorizontalChange;
                    line.Y1 = line.Y1 + e.VerticalChange;
                };
            _visualChilds.Add(_startThumb);

            _endThumb = new Thumb();
            _endThumb.Opacity = 0.5;
            _endThumb.DragDelta += (s, e) =>
                {
                    Line adornedLine = this.AdornedElement as Line;
                    line.X2 = line.X2 + e.HorizontalChange;
                    line.Y2 = line.Y2 + e.VerticalChange;
                };
            _visualChilds.Add(_endThumb);
        }
    }

Cam ăsta ar fi adornerul. Ce ar fi de punctat in codul de mai sus:

• Constructorul primeste FrameWorkElement-ul pe care il adorneaza
• Trebuie overridate VisualChildrenCount si GetVisualChildren
• Cele două Thumb-uri vor fi capetele liniei, a se observa handlerul pus pe .DragDelta al fiecarui thumb.
• Rostul functiei ArrangeOverride e urmatorul: poziționează copiii elementului și întoarce mărimea lui pentru a fi folosită de părintele lui mai departe în procesul de aranjare. Cum mărimea adornerului nu prea are sens în contextul nostru, o dăm mai departe, însă avem grijă sa poziționăm cei doi Thumbi acolo unde trebuie să stea și anume în capetele liniei.
• Oriunde în adorner avem acces la elementul adornat prin this.AdornedElement.

Cum folosim adornerul?

Păi uite așa:

<Window x:Class="Test.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:Test"
        Title="MainWindow" Height="350" Width="525">
    <AdornerDecorator>
        <Canvas x:Name="theCanvas">
            <Line X1="10" Y1="100" X2="150" Y2="110"
                  x:Name="theLine"
                  Stroke="Black" StrokeThickness="2"/>
        </Canvas>
    </AdornerDecorator>
</Window>

        public MainWindow()
        {
            InitializeComponent();

            AdornerLayer layer = AdornerLayer.GetAdornerLayer(theCanvas);
            layer.Add(new LineAdorner(theLine));
        }

Rezultatul este (sper) o linie de ale cărei capete putem trage.

Gata!