Окей, ну давайте напишем как это нужно делать. Попробуем сразу сделать из этого MVVM.
Начнём с модели. Главное — модель должна стараться абстрагировать от нас то, что у неё под капотом. Имея это в виду, организуем её просто как список модельных объектов в памяти. Внешний код не должен от этого зависеть.
Итак:
public class StudentModel
{
public string Name { get; set; }
public Uri ImageUri { get; set; }
}
public class StudentListModel
{
const string uri = "https://www.gravatar.com/avatar/f81585f940e68c3bab934cc6f59c901e?" +
"s=328&d=identicon&r=PG";
public IEnumerable<StudentModel> GetAllStudents() =>
Enumerable.Range(0, 200).Select(n =>
new StudentModel() { Name = $"Student #{n}", ImageUri = new Uri(uri) });
}
Функциональность «получить n
-ую страницу» я оставляю на VM, держа в голове, что в реальности у вас вместо IEnumerable
будет IQueryable
. Если вам хочется сделать репозиторий поверх вашего обращения с базой (например потому, что вы не пользуетесь EF), почему бы и нет.
С моделью покамест всё, впиливать базу сюда уж придётся вам лично. Перейдём к VM.
Для начала, базовый класс для VM. Если вы пользуетесь каким-нибудь MVVM-фреймворком, он у вас уже есть. Если нет, напишем его. Он должен имплементировать INotifyPropertyChanged
:
class VM : INotifyPropertyChanged
{
protected bool Set<T>(ref T field, T value,
[CallerMemberName] string propertyName = null)
{
if (EqualityComparer<T>.Default.Equals(field, value))
return false;
field = value;
RaisePropertyChanged(propertyName);
return true;
}
protected void RaisePropertyChanged([CallerMemberName] string propertyName = null) =>
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
public event PropertyChangedEventHandler PropertyChanged;
}
Теперь класс, отвечающий за одного студента. С этим всё просто:
class StudentVM : VM
{
string name;
public string Name { get { return name; } set { Set(ref name, value); } }
Uri imageUri;
public Uri ImageUri { get { return imageUri; } set { Set(ref imageUri, value); } }
public StudentVM(string name, Uri uri) { this.name = name; this.imageUri = uri; }
}
Если вы пишете в соответствии с трендами, и у вас иммутабельные классы, получится проще:
class StudentVM : VM
{
public string Name { get; }
public Uri ImageUri { get; }
public StudentVM(string name, Uri uri) { this.Name = name; this.ImageUri = uri; }
}
Дальше — класс, занимающийся списком студентов. Будем писать его по кускам. Начнём.
class StudentListVM : VM
{
Нам нужно свойство, отвечающее за количество страниц. Без него никак. Пишем:
int totalPages;
public int TotalPages
{
get { return totalPages; }
private set
{
if (value < 0)
throw new ArgumentException(nameof(TotalPages));
Set(ref totalPages, value);
}
}
Пока всё просто. Да, наверняка мы захотим ещё показать в UI что-то особое, если у нас нет ни одного студента, поэтому положим вспомогательное свойство:
bool havePages;
public bool HavePages
{
get { return havePages; }
private set { Set(ref havePages, value); }
}
и не забудем установить его в сеттере TotalPages
:
private set
{
if (value < 0)
throw new ArgumentException(nameof(TotalPages));
Set(ref totalPages, value);
HavePages = totalPages > 0; // <--- добавили
}
Следующий пункт — номер текущей страницы. С ним всё то же самое, только проверок в сеттере побольше.
int currentPageNo;
public int CurrentPageNo
{
get { return currentPageNo; }
set
{
if (value < 0)
throw new ArgumentException(nameof(CurrentPageNo));
if (value >= TotalPages && HavePages)
throw new ArgumentException(nameof(CurrentPageNo));
if (value != 0 && !HavePages)
throw new ArgumentException(nameof(CurrentPageNo));
Set(ref currentPageNo, value)
}
}
Теперь, когда текущая страница поменялась, мы должны вычитать новый список студентов. Это нужно сделать в фоне, не блокируя UI-поток. Добавляем в CurrentPageNo
set
{
if (value < 0)
throw new ArgumentException(nameof(CurrentPageNo));
if (value >= TotalPages && HavePages)
throw new ArgumentException(nameof(CurrentPageNo));
if (value != 0 && !HavePages)
throw new ArgumentException(nameof(CurrentPageNo));
if (Set(ref currentPageNo, value)) // если изменения были...
PopulateCurrentPage().IgnoreResult(); // IgnoreResult напишем позже
}
Ещё нужно свойство, хранящее список студентов:
IEnumerable<StudentVM> currentPage;
public IEnumerable<StudentVM> CurrentPage
{
get { return currentPage; }
private set { Set(ref currentPage, value); }
}
и код, занимающийся обновлением. Он сложный.
// токен для остановки бегущего обновления
CancellationTokenSource populationTaskCts = null;
async Task PopulateCurrentPage()
{
// если старое обновление ещё бежит, отменяем его
populationTaskCts?.Cancel();
// начиная с этой точки, старое обновление нам не помешает
CurrentPage = null;
if (!HavePages)
return;
using (var cts = new CancellationTokenSource())
{
// теперь мы - текущее обновление
populationTaskCts = cts;
var workPageNo = CurrentPageNo; // может поменяться в процессе
try
{
// асинхронно получаем модельный список
var modelPage = await Task.Run(() =>
GetStudentsFromModel(workPageNo, cts.Token), cts.Token);
if (cts.IsCancellationRequested)
return;
// создаём VM-объекты в UI-потоке
var vmPage = modelPage.Select(p => new StudentVM(p.Name, p.ImageUri))
.ToList();
if (cts.IsCancellationRequested)
return;
// если мы оказались тут, то мы всё ещё текущее обновление
Debug.Assert(workPageNo == CurrentPageNo);
CurrentPage = vmPage; // и можем присвоить результат
}
catch (OperationCanceledException) when (cts.IsCancellationRequested)
{
// ничего не делаем, нас отменили
}
finally
{
// если мы текущее обновление, убираем за собой токен
if (cts == populationTaskCts)
populationTaskCts = null;
// в противном случае там чужой токен, его не трогаем
}
}
}
Нам ещё нужен экземпляр модели и процедура GetStudentsFromModel
, которая будет их вычитывать:
StudentListModel model = new StudentListModel();
const int pageSize = 10;
IEnumerable<StudentModel> GetStudentsFromModel(int pageNo, CancellationToken ct)
{
// make sure it's materialized on background thread
return model.GetAllStudents().Skip(pageNo * pageSize).Take(pageSize).ToList();
}
К ней ещё понадобится (позже) подсчёт количества страниц:
int GetPageCount(CancellationToken ct)
{
var studentCount = model.GetAllStudents().Count();
return (int)Math.Ceiling((double)studentCount / pageSize);
}
Сейчас эти процедуры синхронные, но если ваша модель будет выставлять async-интерфейс (как это делает новый EF), их нужно будет сделать асинхронными.
Далее. Нам нужна команда изменения текущей страницы.
public ICommand RequestPageChange { get; }
И её имплементация: метод, который будет отрабатывать:
void OnPageChangeRequest(int newPage)
{
if (!HavePages)
return;
if (newPage < 0 || newPage >= TotalPages)
return; // log an error?
CurrentPageNo = newPage;
}
Привязывать команду к имплементации придётся в конструкторе. Заодно и заведём его:
public StudentListVM()
{
RequestPageChange = new RelayCommand<int>(OnPageChangeRequest);
}
(класс RelayCommand
есть практически везде, я приведу его позже).
Да, нам ещё в конструкторе нужно запустить подсчёт количества страниц и первоначальное заполнение:
public StudentListVM()
{
RequestPageChange = new RelayCommand<int>(OnPageChangeRequest);
StartInitialPopulate().IgnoreResult();
}
async Task StartInitialPopulate()
{
TotalPages = await Task.Run(() => GetPageCount(CancellationToken.None));
currentPageNo = 0;
await PopulateCurrentPage();
}
}
Кажется, ничего не забыли. Класс получился слишком большой, возможно, имеет смысл разрефакторить его на мелкие куски.
Ещё у нас тут упоминался RelayCommand
:
public class RelayCommand<T> : ICommand
{
public RelayCommand(Action<T> onExecute) { OnExecute = onExecute; }
public event EventHandler CanExecuteChanged;
public bool CanExecute(object parameter) => true;
public void Execute(object parameter) => OnExecute((T)parameter);
readonly Action<T> OnExecute;
}
и функция IgnoreResult
:
public static class TaskExtgensions
{
public static void IgnoreResult(this Task t) { }
}
На этом с вью-моделью, кажется, всё, перейдём к представлению.
Вью-модель прикрепляем к представлению, как описано здесь:
App.xaml:
<Application x:Class="Pages.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:Pages">
</Application>
App.xaml.cs:
using System.Windows;
using Pages.View;
using Pages.VM;
namespace Pages
{
public partial class App : Application
{
StudentListVM mainVM = new StudentListVM();
protected override void OnStartup(StartupEventArgs e)
{
base.OnStartup(e);
new MainWindow() { DataContext = mainVM }.Show();
}
}
}
Теперь идём в MainWindow.xaml. Начинаем:
<Window x:Class="Pages.View.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:view="clr-namespace:Pages.View"
xmlns:vm="clr-namespace:Pages.VM"
Title="Pages" Height="600" Width="800">
На нашем мок-апе есть явно две области: нижняя маленькая со списком страниц, и верхняя большая с содержимым текущей страницы. Это напрашивается на Grid
:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
Теперь, верхний элемент. Он показывает список элементов, без текущего элемента и всего такого. Так что это ItemsControl
:
<ItemsControl ItemsSource="{Binding CurrentPage}">
Теперь, как расположены элементы в нём? Они идут не в столбик, а «перетекают» по горизонтали в следующую строку. Отлично, значит, нам нужно установить в ItemsPanel
подходящий контейнер:
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel IsItemsHost="True"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
Как выглядит отдельный элемент? Это не стандартный ToString()
, это текст с картинкой. Напишем для этого ItemTemplate
:
<ItemsControl.ItemTemplate>
<DataTemplate DataType="{x:Type vm:StudentVM}">
<!-- фиксированный размер элемента и рамка -->
<Border Width="150" Height="200" BorderThickness="1"
BorderBrush="Gray" CornerRadius="5">
<DockPanel LastChildFill="True" Background="LightGray">
<!-- текст прижмём вниз и центрируем -->
<TextBlock DockPanel.Dock="Bottom" Text="{Binding Name}"
TextAlignment="Center"/>
<!-- остальное место занимает картинка -->
<Image Source="{Binding ImageUri}"/>
</DockPanel>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
Вроде бы ничего не забыли.
</ItemsControl>
Окей, с таблицей справились, теперь нам нужен список страниц. Откуда его взять? У нас по идее есть только количество страниц, нужно его превратить в список при помощи конвертера. Затем, мы ведь не хотим показывать все страницы? Их может быть очень много. Будем показывать первые страницы, последние страницы и страницы вокруг текущей.
Засучим рукава и вперёд!
Для начала, тип для описания страницы или заполнителя:
enum PageEntryType { Normal, Current, Ellipsis }
struct PageEntry
{
public int PageNumber { get; }
public PageEntryType Type { get; }
public PageEntry(int num, PageEntryType type) { PageNumber = num; Type = type; }
}
Ну и сам конвертер. Надеюсь, я не напутал с вычислениями.
Нам нужен IMultiValueConverter
, потому что у нас два входных значения.
class PageListConverter : IMultiValueConverter
{
public object Convert(object[] values, Type targetType, object parameter,
CultureInfo culture)
{
int currentPage = (int)values[0];
int numberOfPages = (int)values[1];
return RecalcList(currentPage, numberOfPages);
}
IEnumerable<PageEntry> RecalcList(int currentPage, int numberOfPages)
{
const int pagesAroundCurrent = 3; // сколько страниц вокруг текущей
const int pagesAroundEnd = 2; // сколько страниц по краям
var min = Math.Max(0, currentPage - pagesAroundCurrent);
var max = Math.Min(numberOfPages - 1, currentPage + pagesAroundCurrent);
// перекрывается список вокруг текущей страницы со списком у левого края?
bool separateLeftEnd = pagesAroundEnd + 1 < min;
if (!separateLeftEnd)
min = 0;
// перекрывается список вокруг текущей страницы со списком у правого края?
bool separateRightEnd = numberOfPages - 1 - pagesAroundEnd - 1 > max;
if (!separateRightEnd)
max = numberOfPages - 1;
if (separateLeftEnd)
{
for (int n = 0; n < pagesAroundEnd; n++)
yield return new PageEntry(n, PageEntryType.Normal);
// между списками разрыв - многоточие
yield return new PageEntry(-1, PageEntryType.Ellipsis);
}
for (int n = min; n <= max; n++)
yield return new PageEntry(n, (n == currentPage) ? PageEntryType.Current :
PageEntryType.Normal);
if (separateRightEnd)
{
// между списками разрыв - многоточие
yield return new PageEntry(-1, PageEntryType.Ellipsis);
for (int n = numberOfPages - pagesAroundEnd; n < numberOfPages; n++)
yield return new PageEntry(n, PageEntryType.Normal);
}
}
public object[] ConvertBack(object value, Type[] targetTypes, object parameter,
CultureInfo culture)
{
throw new NotSupportedException();
}
}
Отлично, список у нас есть, теперь его нужно показать. Как показывать список? Возвращаемся к нашему недописанному XAML'у. Нам нужен ItemsControl
, как обычно. Кладём его во вторую строку и добавим небольшой маргин.
<ItemsControl Grid.Row="1" Margin="5">
В ресурсы положим конвертер
<ItemsControl.Resources>
<view:PageListConverter x:Key="PageListConverter"/>
</ItemsControl.Resources>
а элементы берём из количества страниц и номера текущей, с использованием этого конвертера:
<ItemsControl.ItemsSource>
<MultiBinding Converter="{StaticResource PageListConverter}">
<Binding Path="CurrentPageNo"/>
<Binding Path="TotalPages"/>
</MultiBinding>
</ItemsControl.ItemsSource>
Окей, дальше нам нужно эти элементы расположить по горизонтали. Для этого сгодится StackPanel
. Саму панель тоже центрируем:
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center"
IsItemsHost="True"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
Теперь отображение каждого элемента списка. У нас есть три варианта отображения: обыкновенная страница показывается в виде ссылки, текущая — без ссылки, но жирным шрифтом, а на месте для многоточия должно появиться многоточие. Выбор из этих трёх вариантов делаем при помощи привязки Visibility
блока к значению нашего элемента через конвертер. Конвертер мы напишем позже, он будет делать видимым только один из трёх нужных элементов. Сам конвертер мы добавим в ресурсы ItemsControl
'а:
<ItemsControl.Resources>
<view:PageListConverter x:Key="PageListConverter"/>
<view:PageEntryTypeToVisibilityConverter x:Key="PageEntryTypeToVisibilityConverter"/>
</ItemsControl.Resources>
Продолжаем:
<ItemsControl.ItemTemplate>
<DataTemplate>
Располагаем элементы один на другом, видимым будет только один.
<Grid Margin="5,2">
Первый вариант: нормальное отображение. Нам нужна гиперссылка. По нажатию на неё вызовем обработчик из code-behind.
<TextBlock Visibility="{Binding Converter={StaticResource PageEntryTypeToVisibilityConverter},
ConverterParameter={x:Static view:PageEntryType.Normal}}">
<Hyperlink Click="OnPageChangeRequest"><Run Text="{Binding PageNumber, Mode=OneWay}"/></Hyperlink>
</TextBlock>
Второй вариант: текущая страница. Вместо ссылки — TextBlock
с жирным шрифтом.
<TextBlock Visibility="{Binding Converter={StaticResource PageEntryTypeToVisibilityConverter},
ConverterParameter={x:Static view:PageEntryType.Current}}"
FontWeight="Bold" Text="{Binding PageNumber, Mode=OneWay}"/>
Ну и третий вариант — просто многоточие.
<TextBlock Visibility="{Binding Converter={StaticResource PageEntryTypeToVisibilityConverter},
ConverterParameter={x:Static view:PageEntryType.Ellipsis}}"
Text="..."/>
Вот и всё с отображением элемента.
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
Больше в XAML'е делать нечего.
</Grid>
</Window>
Заимплементируем обработчик клика по ссылке. Он лежит в классе MainWindow
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
void OnPageChangeRequest(object sender, RoutedEventArgs e)
{
Нам нужно где-то взять команду. Чтобы не лазить по DataContext
'у, сделаем простой трюк: привяжем эту команду в свободное свойство. Например, в Tag
. (Это мы сделаем потом, снова-таки в XAML'е.)
var command = (ICommand)Tag; // прочитали оттуда команду
if (command == null)
return;
var hyperlink = (Hyperlink)sender;
Номер страницы можно вытащить из DataContext
'а гиперссылки.
var pageNo = ((PageEntry)hyperlink.DataContext).PageNumber;
command.Execute(pageNo);
}
}
Возвращаемся в XAML и дописываем Tag
:
<Window x:Class="Pages.View.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:view="clr-namespace:Pages.View"
xmlns:vm="clr-namespace:Pages.VM"
Title="Pages" Height="600" Width="800"
Tag="{Binding RequestPageChange}">
Последняя недописанная вещь — PageEntryTypeToVisibilityConverter
. Он очень простой:
public class PageEntryTypeToVisibilityConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter,
CultureInfo culture)
{
PageEntryType expectedType = (PageEntryType)parameter;
PageEntryType actualType = ((PageEntry)value).Type;
return expectedType == actualType ? Visibility.Visible : Visibility.Collapsed;
}
public object ConvertBack(object value, Type targetType, object parameter,
CultureInfo culture)
{
throw new NotSupportedException();
}
}
Запускаем и получаем:

Да, а давайте ещё сделаем так, чтобы при пустом списке нам показывалось какое-то разумное сообщение. Это просто. Возвращаемся в XAML и добавляем ещё один элемент во внешний Grid
:
<TextBlock FontSize="24" Grid.Row="0" Text="No students found so far..."
TextAlignment="Center" VerticalAlignment="Center"/>
Но так этот элемент будет виден всегда, а нам нужно только когда страниц нету. Не проблема, привяжемся к свойству HavePages
. Нам нужно сконвертировать его в Visibility
. Но стандартный BooleanToVisibilityConverter
конвертирует не в ту сторону, в которую нам надо, поэтому украдём конвертер отсюда:
public class BooleanConverter<T> : IValueConverter
{
public BooleanConverter(T trueValue, T falseValue)
{
OnTrue = trueValue;
OnFalse = falseValue;
}
public T OnTrue { get; set; }
public T OnFalse { get; set; }
public virtual object Convert(object value, Type targetType, object parameter,
CultureInfo culture)
{
if (!(value is bool))
return DependencyProperty.UnsetValue;
return ((bool)value) ? OnTrue : OnFalse;
}
public virtual object ConvertBack(object value, Type targetType, object parameter,
CultureInfo culture)
{
throw new NotSupportedException();
}
}
public class BooleanToVisibilityConverter : BooleanConverter<Visibility>
{
public BooleanToVisibilityConverter() : base(Visibility.Visible, Visibility.Collapsed) {}
}
Теперь можно написать так:
<TextBlock FontSize="24" Grid.Row="0" Text="No students found so far..."
TextAlignment="Center" VerticalAlignment="Center"
Visibility="{Binding HavePages,
Converter={StaticResource BooleanToVisibilityConverter}}"/>
Нужно только положить его в ресурсы окна:
<Window x:Class="Pages.View.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:view="clr-namespace:Pages.View"
xmlns:vm="clr-namespace:Pages.VM"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
Title="Pages" Height="600" Width="800"
Tag="{Binding RequestPageChange}">
<Window.Resources>
<view:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"
OnTrue="Collapsed" OnFalse="Visible"/>
</Window.Resources>
Дальнейшее наведение красоты — на вас.
DataGrid
.