Разбираемся с полосой прокруток в .NET

• Загрузить демо проект - 8,23 кб

Вступление

Прим. переводчика:

-------------------------------------------------------------

Некоторые термины, используемые в статье:

"Постраничная прокрутка" ("page scrolling"): - когда содержимое видимой части документа (изображения и т.д.) сменяется следующей порцией содержимого того же размера, что и текущий фрагмент. Например, у вас видимая часть документа ограничена 20 строками текста, тогда, если вы нажмете на кнопку со стрелкой вниз, вы увидите следующие 20 строк текста.

"Scrollbar" - в русском варианте это "Полоса прокруток". Для тех кто в танке: полосы прокруток - это, как правило,две полоски по краям окна(одна - горизонтальная внизу, другая вертикальная - справа). "Полоса прокруток" состоит из следующих элементов:

• "Полоса"(track) - часть Scrollbar'а, представляющая из себя полосу (кто бы мог подумать иначе :)), символизирующая линейный размер(ширину или высоту) документа.
• Две кнопки со стрелками (arrow buttons) с обоих концов полосы(track). Как правило, это две кнопки, однако, во всем известном Word'е их четыре (кроме постраничной прокрутки, разработчики добавили кнопки "перейти в начало документа" и "перейти в конец документа").
• "Бегунок" (thumb)

"Бегунок" (thumb) - подвижная часть полосы прокрутки, в виде прямоугольника. Используется для доступа к произвольному месту документа. Точность позиционирования зависит от точности глазомера и твердости руки пользователя :).

"sub-page" - то, что находится за рамками видимой части документа.

-------------------------------------------------------------

Как работает ScrollBar?

Существуют три вещи в полосе прокрутки (scrollbar), которые вы обычно настраиваете при его использовании:

• "Бегунок" (thumb) так, чтобы он отображал соотношение видимой части документа к общему размеру документа, который символизируется высотой самой полосы (или ширины в случае горизонтального scrollbar'а). (Прим. перевод.: Иными словами, чем больше документ, тем меньше сам "бегунок". Высота(ширина) полосы прокрутки представляет 100% высоты(ширины) документа, а размер "бегунка" представляет процент видимой части документа по отношению ко всему документу.)
• Как настроить scrollbar, чтобы он корректно пролистывал документ, когда пользователь кликает на самой "полосе"(track).
• Как правильно настроить scrollbar, чтобы вы могли корректно отображать изменения "sub-page", когда пользователь передвигает "бегунок" (thumb) или использует для этих целей кнопки со стрелками на обоих концах scrollbar'а.

Все это достаточно просто сделать в .NET, используя следующие свойства:

• LargeChange задает размер видимой части документа - размер "страницы" ("page").
• Maximum задает общий размер документа.

Установка этих двух свойств применительно к scrollbar важна для того, чтобы размеры "бегунка" отражали пропорциональность видимой части - "страницы", и соответствующего размера (ширины или высоты) самого документа. Следующая формула иллюстрирует взаимосвязь между отношением LargeChange к Maximum и длинны "бегунка" (Thumb Length) к длине scrollbar'а (Здесь я использую длину, чтобы влиять на один из размеров, ширину или высоту):

LargeChange     Thumb Length
-----------  =  ------------  
  Maximum       Track Length

Размер "страницы"        Длинна "бегунка"
-------------------  =  -----------------------  
Размер документа         Длинна "полосы"(track)

В итоге, когда пользователь щелкнет на полосе, значение scrollbar'ского Value изменится на значение LargeChange (т.е. произойдет перелистывание).

Sub-Page Scrolling

В реализации от .NET предполагается, что вам всегда будет нужно производить "прокрутку" постранично (LargeChange). У меня, например, была ситуация, когда мне было нужно совсем не это. У меня был просмотрщик изображений (image viewer), который содержал ряды изображений, и мне хотелось, чтобы прокрутка по LargeChange осуществлялась по рядам, а не "постранично" ("страница" состояла из нескольких рядов). В то же время, мне хотелось использовать SmallChange для прокрутки рядов пикселов так, чтобы прокрутка просмотрщика производилась плавно (прим. автора: никому не понравится, когда у тебя перед глазами дергаются картинки :)). Второе требование означало, что я не мог сделать так:

LargeChange=1;       
// 1 ряд
Maximum=numRows;     // общее количество рядов

так как сейчас я не могу определить "подряд" (в смысле разделить ряд на более мелкие составляющие) для SmallChange (это свойство имеет тип int). Вместо этого, я должен был написать нечто вроде следующего:

SmallChange=1;                
// 1 пиксел изменения
LargeChange=rowHeight;        
// высота 1 ряда
Maximum=numRows * rowHeight   
// общая высота всех рядов

Но вот незадача. Теперь мой "бегунок" больше не пропорционален видимой части документа ("странице")! Теперь "бегунок" отражает соотношение одного ряда ко всему документу, вместо "страницы" ко всему документу. Так как от этого страдает в какой-то мере и функциональность приложения, то с таким "искажающим" визуальным аспектом мериться нельзя.

Решение

Выходом из данной ситуации является разделение LargeChange (который используется для установки подобающего размера "бегунка") и фактического изменения для Value, когда пользователь делает щелчок на "полосе"(track). Это достигается перегрузкой метода WndProc и перехватом сообщений о прокрутке "страницы" вверх/вниз :

protected override 
void WndProc(ref Message m)
{
  if (m.Msg == 8469)
  {
    switch((uint)m.WParam)
    {
      case 2: 
// "страница" прокручивается вверх
        if (
this.Value - 
this.ValLargeChange > 
0
)
        {
          this.Value-=
		this.ValLargeChange;
        }
        else
        {
          this.Value=
	0;
        }
        break;

      case 3: 
	// "страница" прокручивается вниз
        if (
         this.Value+
           this.LargeChange+
            this.ValLargeChange < 
            this.Maximum)
        {
          this.Value+=
          this.ValLargeChange;
        }
        else
        {
          this.Value=
            this.Maximum - 
            this.LargeChange;
        }
        break;

      default:
        base.WndProc (
        ref m);
        break;
    }
  }
  else
  {
    base.WndProc (
    ref m);
  }
}

Это контролирует поведение scrollbar по умолчанию и изменяет значение Value, базируясь на моем предпочтительном значении для прокрутки (для свойства ValLargeChange).

Заключение

Вы можете посмотреть эту разницу в "действии" в представленном демо-приложении. Заметьте, что данный код не идеален, но его основная цель - изучение проблемы, с которой он справляется на "отлично".

Автор Marc Clifton, перевод - kate aka cronOS