часть 1: стили, кнопки и переключатели

часть 2: ComboBox с фильтрацией содержимого, TimePicker, DateTimePicker

В этой статье я расскажу про разработку панели с поддержкой анимированного переноса элементов и кастомной сортировкой содержимого. Это, пожалуй, была одна из самых сложных задач, связанных с WPF-контролами. Достаточно долго я не знал, с какой стороны к ней подступиться, пока не нашел несколько примеров: один на github, другой на codeproject (оставлю ссылку, хотя сейчас сайт недоступен). В них было реализовано примерно то, что мне было нужно. Также я нашел неплохую статью на professorweb. Этой информации хватило, чтобы написать свой контрол с функционалом, который меня устроил.

Для реализации необходимой функциональности потребуется не один, а два контрола:

1. ExtendedListBox - наследник от ListBox с поддержкой масштабирования

2. DragAnimatedPanel - панель с поддержкой различных типов сортировки и drag’n’drop

Поддержка масштабирования

В принципе можно было сделать масштабирование и в рамках панели, как было сделано в одном из примеров, которые я разбирал. Но это потребовало бы хранить где-то текущий размер элементов. Еще больше сложностей возникает, когда элементы разного размера и надо сохранить пропорции. Поэтому я решил вынести этот функционал в контрол, унаследованный от ListBox. В результате у меня существенно упростился класс DragAnimatedPanel. Также я получил свой ListBox с возможностью масштабирования содержимого, при этом его можно использовать отдельно от DragAnimatedPanel.

Класс получился достаточно простой: dependency property для значения масштаба, его минимального/максимального значения, обработчики событий изменений этих свойств и метод расчета нового значения масштаба.

private void ProcessScale(MouseWheelEventArgs e)
{
    const double DELTA_DIVISOR = 1000d;

    double zoomScale = e.Delta / DELTA_DIVISOR;
    double newScaleFactor = Scale + zoomScale;

    if (newScaleFactor >= MinScale && newScaleFactor <= MaxScale)
    {
        Scale = newScaleFactor;
    }
    else if (newScaleFactor < MinScale)
    {
        Scale = MinScale;
    }
    else if (newScaleFactor > MaxScale)
    {
        Scale = MaxScale;
    }
}

Полностью код контрола можно посмотреть тут.

Главный нюанс, как всегда, оказался в разметке. Я не знаю, что за объекты будут отображаться в моем ListBox, поэтому логику отображения элемента списка я перенес в ItemTemplate, где будет вся разметка, подходящая для каждого конкретного случая. Вот пример для отображения картинок.

<customWpfControls:ExtendedListBox.ItemTemplate>
	<DataTemplate>
		<Border Margin="10"
				VerticalAlignment="Top"
				HorizontalAlignment="Left">
			<Image Source="{Binding ImageSource}"  
				   VerticalAlignment="Top"
				   HorizontalAlignment="Left">
				<Image.LayoutTransform>
					<TransformGroup>
						<ScaleTransform ScaleX="{Binding Scale, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type customWpfControls:ExtendedListBox}}}" 
										ScaleY="{Binding Scale, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type customWpfControls:ExtendedListBox}}}"/>
					</TransformGroup>
				</Image.LayoutTransform>
			</Image>
		</Border>
	</DataTemplate>
</customWpfControls:ExtendedListBox.ItemTemplate>

В шаблоне есть ScaleTransform и привязка к полю Scale ExtendedListBox. Этого достаточно для корректного отображения элементов при изменении масштаба.

Кастомная сортировка

Чтобы изменить отображение объектов на панели необходимо переопределить два метода: MeasureOverride и ArrangeOverride.

MeasureOverride определяет, какого размера будет каждый дочерний элемент и какой должен быть размер панели, чтобы все элементы поместились на ней. Размер элементов вычислить просто: вызываем в цикле метод Measure для всех дочерних элементов и рассчитываем размер панели. Если, например, мы хотим выстроить все элементы по диагонали, то высота панели будет равна сумме высот всех отображаемых элементов, а длина – сумме всех длин. В примере ниже я рассчитал размер панели и сохранил его в переменной _calculatedSize. Также значение, которое вернет метод MeasureOverride, будет использовано для записи в свойство DesiredSize панели.

protected override Size MeasureOverride(Size availableSize)
{
    foreach (UIElement child in Children)
    {
        child.Measure(availableSize);
    }

    if (Children.Count == 0)
    {
        _calculatedSize = new Size();
    }
    else
    {
        List<Size> childSizes = new List<Size>(Children.Count);
        foreach (UIElement child in Children)
        {
            childSizes.Add(child.DesiredSize);
        }

        double width = childSizes.Sum(x => x.Width);
        double height = childSizes.Sum(x => x.Height);

        _calculatedSize = new Size(width, height);
    }

    return _calculatedSize;
}

Метод ArrangeOverride размещает дочерние элементы на панели. В примере ниже я в цикле прохожу по всем дочерним элементам и размещаю их на панели, рассчитывая их координаты так, чтобы они были расположены по диагонали. При этом значение, которое вернет метод ArrangeOverride, будет использовано для записи свойств ActualHeight и ActualWidth панели.

protected override Size ArrangeOverride(Size finalSize)
{
    double horizontalPosition = 0;
    double verticalPosition = 0;
    for (int i = 0; i < Children.Count; i++)
    {
        UIElement child = Children[i];

        // Размещаем элемент на панели в точке (0;0)
        child.Arrange(new Rect(child.DesiredSize));

        // Переносим элемент необходимое место. 
        TranslateTransform trans = InitTransform(child);
        trans.X = horizontalPosition;
        trans.Y = verticalPosition;

        // Рассчитываем координаты следующего элемента.
        horizontalPosition += child.DesiredSize.Width;
        verticalPosition += child.DesiredSize.Height;
    }

    return _calculatedSize;
}

После выполнения этих операций WPF принимает решение, какие элементы будут отображены, какие скрыты и надо ли отображать скролл бары. Результат работы можно посмотреть на скриншоте.

В моем приложении я сделал несколько вариантов сортировки отображаемых элементов:

- отображение всех элементов в одну строку,

- отображение всех элементов в один столбец,

- отображение в виде таблицы,

- отображение с заполнением панели по строкам.

Для этого я написал несколько стратегий отображения элементов, которые можно легко переключить. Окончательную реализацию методов MeasureOverride и ArrangeOverride можно посмотреть тут.

Все стратегии сортировок реализуют интерфейс ILayoutStrategy.

public interface ILayoutStrategy
{
    Size ResultSize { get; }

    void MeasureLayout(Size availablePanelSize, List<Size> sizes, bool isDragging);

    int GetIndex(Point position);

    ItemLayoutInfo GetLayoutInfo(int index);
}

При вызове метода MeasureLayout выполняется расчет размеров панели и координат отображаемых элементов. После этого в свойство ResultSize будет записан размер панели. Метод GetLayoutInfo возвращает информацию о расположении элемента по его индексу. С помощью метода GetIndex можно получить индекс элемента по заданным координатам (это понадобится далее при реализации darg'n'drop).

Поддержка drag’n’drop

Осталось реализовать возможность менять порядок элементов с помощью мыши.

При переносе объекта мышью требуется:

1. Определить, что пользователь начал операцию (отфильтровать случайные клики).

2. Отрисовать перенос объекта и изменение местоположения других объектов относительно него.

3. Определить, что пользователь завершил операцию.

Чтобы понять, что пользователь начал операцию переноса объекта, я в первую очередь в методе OnMouseLeftButtonDown сохраняю текущие координаты мыши, время нажатия и объект, по которому кликнули.

private void OnMouseLeftButtonDown(object sender, MouseEventArgs e)
{
    Point mousePos = Mouse.GetPosition(this);
    _lastMousePosX = mousePos.X;
    _lastMousePosY = mousePos.Y;
    _mouseDownTime = DateTime.Now;
    _mouseSelectedElement = GetChildThatHasMouseOver();
}

Далее в методе OnMouseMove. Проверяю, что левая кнопка мыши зажата и у нас нет элемента, который мы переносим. После этого вызываю метод CheckClick. В нем я проверяю как долго была зажата кнопка мыши и насколько был передвинут курсор. Это защищает от ошибочного старта операции при случайном клике по объекту.

private void OnMouseMove(object sender, MouseEventArgs e)
{
    if (e.LeftButton == MouseButtonState.Pressed && DraggedElement == null && !IsMouseCaptured)
    {
        if (CheckClick())
        {
            StartDrag(e);
        }
    }

Если все проверки пройдены – вызываю метод StartDrag. В нем я сохраняю ссылку на перемещаемый объект, его индекс и координаты. Также я выполняю захват мыши и увеличиваю z-индекс объекта, чтобы при переносе он был над соседними объектами.

private void StartDrag(MouseEventArgs e)
{
    DraggedElement = _mouseSelectedElement;
    _mouseSelectedElement = null;
    if (DraggedElement == null)
    {
        return;
    }

    _draggedIndex = Children.IndexOf(DraggedElement);
    Point p = GetItemVisualPoint(DraggedElement);
    _x = p.X;
    _y = p.Y;

    SetZIndex(DraggedElement, DRAG_ELEMENT_Z_INDEX);

    CaptureMouse();

    e.Handled = true;
}

Далее нам требуется отрисовать перемещение объекта и изменение местоположения соседей. Для этого опять пригодится метод OnMouseMove. В нем проверяю, если есть перемещаемый объект – вызываю метод OnDragOver.

private void OnDragOver(MouseEventArgs e)
{
    const double MOUSE_DIF = 10d;

    Point mousePos = Mouse.GetPosition(this);
    double difX = mousePos.X - _lastMousePosX;
    double difY = mousePos.Y - _lastMousePosY;
    
    if ((Math.Abs(difX) > MOUSE_DIF || Math.Abs(difY) > MOUSE_DIF))
    {
        DoScroll();
        
        int index = _layoutStrategy.GetIndex(mousePos);
        _x += difX;
        _y += difY;

        _lastMousePosX = mousePos.X;
        _lastMousePosY = mousePos.Y;

        SwapElement(index);
        MoveTo(DraggedElement, _x, _y);
    }
}

Так как этот метод будет вызываться достаточно часто, то в первую очередь проверяю, на сколько сдвинулся объект. Это позволит реже производить достаточно ресурсоемкие операции (особенно если отображается много объектов). После этого выполняю скролл, если текущее положение мыши вышло за пределы панели. Далее вычисляю, какой должен быть индекс элемента по текущим координатам мыши. Так как у меня поддерживается несколько стратегий сортировок, то эта логика вынесена в соответствующую имплементацию интерфейса ILayoutStrategy. После этого при необходимости выполняю перемещение элемента в коллекции (метод SwapElement) и перемещаю выбранный элемент по координатам мыши.

private void SwapElement(int targetIndex)
{
    if (targetIndex == _draggedIndex || targetIndex < 0)
    {
        return;
    }
    
    if (targetIndex >= Children.Count)
    {
        targetIndex = Children.Count - 1;
    }

    ItemsControl parentItemsControl = ControlsHelper.GetParent(this, (x) => x is ItemsControl) as ItemsControl;

    // NOTE: логика заточена под IList, если в ItemsSource будет что-то другое - надо будет переписать метод
    IList list = (IList)parentItemsControl.ItemsSource; 

    if (_draggedIndex < 0 || targetIndex < 0 || _draggedIndex >= list.Count || targetIndex >= list.Count)
    {
        return;
    }

    object dragged = list[_draggedIndex];
    list.Remove(dragged);
    list.Insert(targetIndex, dragged);

    // Получаем новый элемент UI после изменения коллекции
    DraggedElement = Children[targetIndex];

    SetZIndex(DraggedElement, DRAG_ELEMENT_Z_INDEX);
    
    _draggedIndex = targetIndex;

    InvalidateArrange();
}

Осталось сделать обработку завершения операции. Тут все просто. При отпускании левой кнопки мышь освобождается в методе OnMouseLeftButtonUp.

private void OnMouseLeftButtonUp(object sender, MouseEventArgs e)
{
    if (IsMouseCaptured)
    {
        ReleaseMouseCapture();
    }
}

А в OnLostMouseCapture сбрасываю ссылку на перемещаемый объект и перерисовываю расположение объектов на панели.

private void OnLostMouseCapture(object sender, MouseEventArgs e)
{
    if (DraggedElement != null)
    {
        DraggedElement = null;
        InvalidateArrange();
    }
}

Я не написал весь код в OnMouseLeftButtonUp и использовал OnLostMouseCapture, так как он будет вызван не только при отпускании левой кнопки мыши, но и при переключении на другое приложения с зажатой кнопкой мыши.

Заключение

На этом все. Пример использования ExtendedListBox в связке с DragAnimatedPanel можно посмотреть в тестовом проекте. Буду рад, если эта информация кому-нибудь пригодится.

Кастомные WPF-контролы, часть 3: ListBox с поддержкой drag’n’drop, масштабирования и различной сортировкой содержимого