Сообщений 24    Оценка 160        Оценить

Класс CSkinBaseDialog

Автор: 2Los

Опубликовано: 01.03.2002
Исправлено: 13.03.2005
Версия текста: 1.0

Исходные тексты - 64Kб
Демонстрационное приложение - 45Kб

Введение

Как известно, окна в Windows квадратные. И в принципе этого достаточно для большинства приложений. Если это, например, файл-менеджер, то очень даже неплохо, что он квадратный. Однако иногда хочется, чтобы программа выглядела не как все. Классическим примером могут служить WinAmp или Window Media Player, а также многие autoran'ы для CD дисков. Отличительной особенностью этих программ является то, что все они обладают окнами произвольной формы, с опять же произвольным фоновым изображением, а плэйеры к тому же могут менять свой внешний вид.

У разработчика подобного окна выбор средств не богатый: это функция SetWindowRgn() - устанавливающая регион, занимаемый окном и обработчик события WM_ERASEBKGND, в котором следует поместить код, выводящий фоновую картинку в окно. И если окно не меняет свой размер, этого достаточно, иначе придется потрудиться, чтобы корректно отображать фон и пересчитывать регион окна. Если вам это занятие не по душе, то предлагаю воспользоваться моим новым MFC-классом диалога CSkinBaseDialog, который возьмет всю эту работу на себя.

Краткое описание класса

В исходники входят несколько классов CSkinBaseDialog, CSkinBaseButton и CDib, но обо всем по порядку. Класс CSkinBaseDialog реализует следующие вещи:

• Отображение картинки в качестве фона окна. Стоить заметить, что при этом диалог лишается стандартного заголовка и рамки.
• Фоновая картинка может содержать маскируемые области, в этом случае эти области не принимают участия в формировании диалога и таким образом можно создать диалог произвольной формы
• На самом деле фоновая картинка может состоять из отдельных частей и тогда каждой такой части можно задать свойство выравнивания относительно границ окна или масштабирования. К примеру, можно разбить фоновое изображение на девять частей и назначить одним из них свойства выравнивания относительно соответствующих сторон диалога, а другим свойство масштабирования по одной или двум осям. В этом случае при изменении размеров окна, фон будет растягиваться/сжиматься там, где это требуется.
• Выравнивать можно не только картинки, но и элементы управления. Поясню, что выравнивание как контролов, так и картинок не означает, что они будут располагаться вплотную к границе окна, а лишь то, что расстояние между картинкой/контролом и соответствующей границей будет оставаться неизменным.
• Выравнивание это конечно хорошо, но как будет изменяться размер окна, если помните, у него уже нет ни рамки, ни заголовка? В этом случае функции рамки можно возложить на соответствующие картинки, составляющие фоновое изображение. При перемещении мыши над этой картинкой курсор примет форму двойной стрелки, а при нажатии левой кнопки и перемещении мыши измениться размер окна.
• Ну и последнее, это поддержка выдвигающихся частей, о чем позже.

Остальные классы будут упоминаться по ходу дела.

Подготовка фонового изображения диалога

Первое, с чего следует начинать, это создание фонового изображения. Здесь я не буду рассказывать, от куда оно берется, допустим, что оно уже есть и осталось только "приладить" его к диалогу. Как уже упоминалось выше, фоновое изображение может содержать маскируемые области, то есть области, закрашенные однородным цветом, которые в диалоге станут прозрачными. Если требуется, чтобы диалог мог изменять свои размеры, то исходное изображение следует разбить на части, как например, на следующем рисунке.

Части 11, 13, 31, 32 и 34 являются не масштабируемыми, и такие изображения разрешается маскировать, в данном примере цвет маски RGB(255, 0, 255), т.е. розовый. Части 12, 21, 23 и 32 масштабируются по одной из осей, а 22 - по обоим, маскируемые области в таких изображениях отсутствуют. Кроме того, части 23 и 34 позволяют пользователю изменять размер окна: при наведении мыши на одну из этих картинок курсор изменить свой вид на двойную стрелку, а при нажатии кнопки и перемещении мыши будет изменяться размер окна. Возможно, часть 34 следовало сделать и поменьше, но раз это пример, сойдет и такая.

Полученные изображения следует включить в ресурсы проекта. Хотя класс CSkinBaseDialog допускает загрузку изображений из файла, в данном примере рассматривается случай работы с ресурсами.

Cоздание диалога на основе фонового изображения

Предположим, что в проекте есть диалог MyDialog, соответствующий ему класс диалога CMyDialog, находящийся в файлах MyDialog.h и MyDialog.cpp. Наша задача изменить внешний вид диалога. Для этого нужно:

• Добавить в проект следующие файлы: SkinBaseDialog.h, SkinBaseDialog.cpp, CDib.h, CDib.cpp. На последних двух хотелось бы остановиться поподробнее. Это исходники класса CDib, как можно догадаться из названия, предназначенного для работы с DIB-картами (Device Independent Bitmap). Использование DIB-карт имеет много преимуществ, первое из которых это то, что вывод на экран таких изображений происходит значительно быстрее, чем в случае с обычным CBitmap. Класс CDib большей частью был позаимствован из примеров к книге "Основы Visual C++ версия 4" Дэвид Дж. Круглински. К исходному коду были добавлены несколько функций для нужд данного проекта. Использование CDib практически не отличается от использования CBitmap. Для загрузки изображения из ресурсов проекта предназначена функция LoadBitmap, получить размер изображения можно вызовом функции GetDimensions, а за отображение на экране отвечает функция Draw.

• Включить заголовочный файл SkinBaseDialog.h в файл MyDialog.h:

  #include <SkinBaseDialog.h>

  Далее следует сделать класс CMyDialog производным от CSkinBaseDialog вместо CDialog и заменить все упоминания класса CDialog в файлах MyDialog.h и MyDialog.cpp на CSkinBaseDialog. Особенно это касается обращений к функциям базового класса в обработчиках событий, если этого не сделать, то функционировать новый диалог будет не как надо.

• На время оставим класс CMyDialog и обратимся к редактору ресурсов. Здесь следует изменить свойства формы диалога MyDialog, а именно:

  - Сделать значение свойства Border - none. При этом снимется флажок у свойства Title bar
  - Чтобы элементы управления в окне диалога не мелькали, можно установить флажок напротив Clip children

• Вернемся к исходникам и перейдем к функции CMyDialog::OnInitDialog, сюда следует поместить код, формирующий фон диалога:

  AddSkinDIB(IDB_SKIN11, CRect(0, 15, -1, -1), sbdLeft, sbdTop, sbdMoveDlg); AddSkinDIB(IDB_SKIN12, CRect(101, 15, 500, -1), sbdScale, sbdTop, sbdMoveDlg, FALSE); AddSkinDIB(IDB_SKIN13, CRect(500, 0, -1, -1), sbdRight, sbdTop, sbdMoveDlg); AddSkinDIB(IDB_SKIN21, CRect(0, 59, -1, 200), sbdLeft, sbdScale, sbdMoveDlg, FALSE); AddSkinDIB(IDB_SKIN22, CRect(90, 45, 735, 266), sbdScale, sbdScale, 0, FALSE); AddSkinDIB(IDB_SKIN23, CRect(735, 59, -1, 250), sbdRight, sbdScale, sbdRight, FALSE); AddSkinDIB(IDB_SKIN31, CRect(0, 200, -1, -1), sbdLeft, sbdBottom, sbdMoveDlg); AddSkinDIB(IDB_SKIN32, CRect(100, 266, -1, -1), sbdLeft, sbdBottom, sbdMoveDlg); AddSkinDIB(IDB_SKIN33, CRect(385, 266, 711, -1), sbdScale, sbdBottom, sbdMoveDlg, FALSE); AddSkinDIB(IDB_SKIN34, CRect(711, 250, -1, -1), sbdRight, sbdBottom, sbdRight|sbdBottom);

  Для добавления картинок к фону используются вызовы следующей функции:

  int AddSkinDIB( UINT nIDResource, CRect rcDest, int nXAlignment=0, int nYAlignment=0, int nMouseReaction=0, BOOL bMasked=TRUE, COLORREF crMask=RGB(255, 0, 255) );

  Параметры здесь имеют следующее назначение:

  nIDResource - это идентификатор ресурсов. У функции AddSkinDIB существует также перегруженная версия, в которой на этом месте вместо ресурса можно указать имя файла .BMP с изображением

  rcDest - координаты расположения картинки в окне диалога. Координаты задаются относительно верхнего левого угла окна диалога. В качестве значение rcDest.right и rcDest.bottom можно использовать -1 (минус один), в этом случае соответствующие величины будут рассчитаны исходя из размеров картинки. Для маскируемых изображений эти параметры рассчитываются в любом случае, т.е. маскируемые изображения не масштабируются.

  nXAlignment - выравнивание по оси X, может принимать значения sbdLeft, sbdRight и sbdScale, которые задают соответственно выравнивание по левому краю, правому и масштабирование.

  nYAlignment - выравнивание по оси Y, может принимать значения sbdTop, sbdBottom и sbdScale, которые задают соответственно выравнивание по верхнему краю, нижнему и масштабирование.

  NMouseReaction - реакция на мышь, возможны значения: sbdMoveDlg - при нажатии на картинку и перемещении мыши перемещается весь диалог или комбинация sbdLeft, sbdRight, sbdTop, sbdBottom. Например, sbdBottom|sbdRight означает, что при нажатии и перемещении мыши будет изменятся положение нижнего правого угла диалога. Разумеется не следует в одном выражении использовать одновременно константы sbdLeft и sbdRight, а также sbdTop и sbdBottom - ничего путного из этого не выйдет.

  bMasked - флаг маскирования. Цвет самой маски задается в параметре crMask

  crMask - цвет маски. Этот параметр игнорируется, если bMasked == FALSE

  Функция возвращает индекс в массиве, по которому можно получить указатель на объект класса CSkinBkPart. Данный класс является контейнером для картинок, составляющих фоновое изображение, а также для элементов управления, которым заданы свойства выравнивания. Получить указатель на контейнер можно вызовом функции GetAt(int indx), число контейнеров возвращает функция GetCount()

• Собственно говоря, это все. Теперь можно откомпилировать проект и посмотреть, что получилось. Если все сделано правильно, и я ничего не забыл, то на экране появится окно диалога.

Добавление контролов в окно диалога

Теперь, когда диалог готов, можно приступить к размещению на нем контролов. Это можно сделать, как и в редакторе форм, так и в runtime, вызовом Create соответствующего элемента управления. Класс CSkinBaseDialog будет отвечать за выравнивание элемента управления, если выполнить вызов следующей функции:

int AddControl(
    CWnd* pControl, 
    int nXAlignment=0, 
    int nYAlignment=0
);

Параметры здесь имеют следующее назначение:

pControl - указатель на объект элемента управления. Класс объекта должен быть производным от CWnd.

nXAlignment и nYAlignmet - аналогичны соответствующим параметрам функции AddSkinDIB

Возвращаемое значение аналогично AddSkinDIB

Например:

CRect rc;
GetClientRect(&rc);
CRect rcButton(rc.Width()-100, rc.Height()-100, rc.Width()-50, rc.Heigth()-50);
m_button.Create("Button 1", WS_CHILD|WS_VISIBLE|WS_TABSTOP, rcButton, this, IDC_BUTTON1);
AddControl(&button, sbdRight, sbdBottom);

В результате получим "квадратную" кнопку со стороной 50 пикселей, расположенную на расстоянии 100 от нижнего правого угла окна диалога, которое будет сохраняться при изменении размеров окна.

Стандартные элементы управления Windows несколько выделяются на фоне диалога, поэтому для полной гармонии, скорее всего, потребуется воспользоваться чем-нибудь иным. В исходники наряду с классами CSkinBaseDialog и CDib входит также класс CSkinBaseButton, представляющий собой MFC-контрол типа кнопка. Рассказывать том, как им пользоваться я не буду, надеюсь, что это можно понять, изучив проект-пример. Остальные элементы управления, как, впрочем, и кнопку, можно найти в сети.

Остался последний момент, который следует упомянуть в разговоре об элементах управления. Дело в том, что вывод фона на экран и рисование контролов происходят независимо, в результате при изменении размеров окна можно заметить, что котролы движутся не синхронно с фоном. В CSkinBaseDialog предусмотрен следующий вариант решения этой проблемы. Для этого нужно:

• Реализовать в элементе управления функцию void SkinDraw(CDC* pDC). (В CSkinBaseButton эта функция реализована).
• Вместо вызова AddControl использовать вызов функции AddOwnerDrawControl с теми же параметрами.

Поясню, к чему приводят эти действия. Во время вывода фонового изображения на экран, это изображение первоначально формируется в контексте устройства памяти, туда же происходит вывод изображения элемента управления, после чего, сформированная картинка выводится на экран. Таким образом, при изменении размеров экрана, контролы будут двигаться синхронно с фоном. Конечно, не в каждый контрол можно добавить новую функцию, но это не всегда и требуется. К примеру, в Window Media Player списки и комбобоксы движутся не синхронно с фоном.

Создание выдвигающихся частей диалога

Многие наверно заметили, что у Windows Media Player в некоторых "шкурках" есть выдвигающиеся части. Подобная возможность реализована и в CSkinBaseDialog.

Чтобы заставить какую-либо часть фона двигаться используйте вызов функции

typedef CArray<CSkinBkPart*, CSkinBkPart*> ARR_BK_PARTS;
BOOL StartMoveBkParts(
    ARR_BK_PARTS &aMoveBkParts, 
    CSize szLength, 
    int nNumSteps, 
    UINT nIDEvent
);

Параметры здесь имеют следующее назначение:

аMoveBkParts - массив движущихся частей - это могут быть как и фоновые изображения, так и элементы управления.

szLength - длина перемещения по осям X и Y.

nNumSteps - число шагов перемещения. Это число должно делить нацело как szLength.cx, так и szLength.cy и в последствии используется для подсчета шага перемещения. Число шагов также влияет на скорость перемещения.

nIDEvent - это идентификатор данного перемещения и одновременно номер таймера. При вызове функции StartMoveBkParts будет установлен таймер, в обработчике сообщение которого будут происходить перемещения заданных частей фона и элементов управления.

Перед началом перемещения вызывается виртуальная функция OnBeginMoveBkParts(CMoveInfo &mi), а по окончании - OnEndMoveBkParts(CMoveInfo &mi). Параметр mi содержит информацию о текущем перемещении, переданную в вызове функции StartMoveBkParts. В реализации этих функций в классе CMyDialog можно поместить код, отвечающий за отображение/скрытие элементов управления.

Заключение

В заключение хотелось бы упомянуть еще об оной функции - Remove, предназначенной для удаления картинок, составляющих фоновое изображение. Кроме того, вызов функций AddSkinDIB, AddControl и AddOwnerDrawControl можно выполнять в любом месте программы, а не только в OnInitDialog. Таким образом, нетрудно реализовать возможность смены фона и формы диалога в runtime, т.е. реализовать поддержку skin'ов в своем приложении, но это тема для отдельного разговора.

Сообщений 24    Оценка 160        Оценить