Notatnik techniczny

Wzbogacanie kontrolek WPF #1

WPF w połączeniu z MVVM to wspaniała sprawa. Co natomiast zrobić, jak interfejs WPF nie daje tego, co daje interfejs WinForms? W tym poście opisuję wzbogacanie kontrolek WPF.

Przykładowa aplikacja w technologii WPF + MVVM

Rozważmy następującą aplikację WPF + MVVM wykorzystującą MVVM Light Toolkit.

<Window x:Class="Mvvm.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:ignore="http://www.galasoft.ch/ignore"
        xmlns:extenders="clr-namespace:Mvvm.Extenders"
        mc:Ignorable="d ignore"
        Height="300"
        Width="300"
        Title="Auto scroll demo"
        DataContext="{Binding Main, Source={StaticResource Locator}}">
    <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Skins/MainSkin.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Window.Resources>
    <DockPanel>
        <Button DockPanel.Dock="Top" 
                Content="add item" 
                Margin="10" 
                Command='{Binding AddItemClick}'/>
        <ListBox Margin="10" 
                 ItemsSource="{Binding DataForList}" />
        
    </DockPanel>
</Window>
using System.Collections.ObjectModel;
using GalaSoft.MvvmLight;
using GalaSoft.MvvmLight.Command;
 
namespace Mvvm.ViewModel
{
    public class MainViewModel : ViewModelBase
    {
        public RelayCommand AddItemClick { get; private set; }
        public ObservableCollection<string> DataForList { get; }
 
        public MainViewModel()
        {
            AddItemClick = new RelayCommand(AddNewItemToList);
            DataForList = 
                new ObservableCollection<string> { 
                    "item_1", 
                    "item_2" 
                    };
        }
 
        private void AddNewItemToList()
        {
            DataForList.Add($"item_{DataForList.Count+1}");
        }
    }
}

Chcemy, aby kontrolka Listbox automatycznie zawsze pokazywała ostatnio dodany element. Załóżmy, że wyświetlamy logi i chcemy widzieć zawsze najnowsze. Jak to zrobić?

W WinForms jest to trywialne zadanie, ale w WPF niekoniecznie. Interfejs XAML nie zawiera takiej opcji. Możemy napisać ten kawałek logiki prezentacji w code behind. Problemem jest to, że im więcej umieszczamy w code behind, tym bardziej odchodzimy od MVVM w stronę klasycznej WinForms. A my chcemy WPF + MVVM zamiast WinForms.

Rozszerzenie możliwości kontrolki ListBox

Poniżej prezentuję, jak napisać rozszerzenie do WPF. Pozwala nam to dodać do kontrolek właściwości, jakich one orginalnie nie posiadają.

<ListBox Margin="10" 
         ItemsSource="{Binding DataForList}" 
         extenders:ListBoxExt.ScrollToLast="True"/>
using System.Collections.Generic;
using System.Collections.Specialized;
using System.Diagnostics;
using System.Windows;
using System.Windows.Controls;
 
namespace Mvvm.Extenders
{
    public class ListBoxExt : DependencyObject
    {
        public static readonly DependencyProperty ScrollToLastProperty = 
            DependencyProperty.RegisterAttached("ScrollToLast", 
                typeof(bool), 
                typeof(ListBoxExt), 
                new UIPropertyMetadata(default(bool), OnScrollToLastChanged));
 
        private static readonly Dictionary<object, ListBox> ListBoxMap = new Dictionary<object, ListBox>();
 
        private static void CollectionChanged(object colection, NotifyCollectionChangedEventArgs eventArgs)
        {
            var listBox = ListBoxMap[colection];
            var listBoxItems = listBox.Items;
 
            if (listBox.Items.Count <= 0) return;
            var lastItem = listBox.Items[listBox.Items.Count - 1];
            listBoxItems.MoveCurrentTo(lastItem);
            listBox.ScrollIntoView(lastItem);
        }
 
        public static void OnScrollToLastChanged(DependencyObject s, DependencyPropertyChangedEventArgs e)
        {
            Debug.Assert(s is ListBox, "DependencyObject is not of ListBox type");
            var listBox = (ListBox) s;
 
            var sourceCollection = listBox.Items.SourceCollection as INotifyCollectionChanged;
            Debug.Assert(sourceCollection != null, "sourceCollection problem");
 
            if ((bool) e.NewValue)
            {
                ListBoxMap.Add(sourceCollection, listBox);
                sourceCollection.CollectionChanged += CollectionChanged;
                return;
            }
 
            ListBoxMap.Remove(sourceCollection);
            sourceCollection.CollectionChanged -= CollectionChanged;
        }
 
        public static bool GetScrollToLast(DependencyObject obj)
        {
            return (bool)obj.GetValue(ScrollToLastProperty);
        }
 
        public static void SetScrollToLast(DependencyObject obj, bool value)
        {
            obj.SetValue(ScrollToLastProperty, value);
        }
    }
}

Omówmy to, co widzimy na listingu powyżej:

  • definiujemy klasę dziedziczącą po DependencyObject.
  • określamy nazwę nowej właściwości, jej typ, typ, do jakiego obiektu możemy go podpiąć oraz metodę, jaka zostanie wywołana, gdy wartość zostanie zmieniona.
  • getter oraz setter dla naszej nowej właściwości. Oczywiście wszystko są to metody statyczne.
  • metoda, która wykona się, gdy nasza właściwość ulegnie zmianie. Sprawdzamy obiekt macierzysty, czy jest typu ListBox i jeśli tak, to dla kolekcji danych rejestrujemy funkcję obsługi zdarzenia zmiany w kolekcji. Ponieważ sama funkcja obsługi nie będzie miała dostępu do obiektu listy, a jedynie do skojarzonych z nią danych, to trzymamy w słowniku mapowanie.

wpf