Caramel, Lime, Pale, Cherry... design controls
Надеюсь никто не будет против, если мы немного порисуем Silverlight 2 контролы? Например, карамельные или вишневые :) В общем прикольные - с точки зрения дизайна. Благо Silverlight позволяет воплотить в реальность то, что нарисует дизайнер - так как это задумывалось.
Так, что нам нужно? Несколько прикольных фотографий, с которых мы возьмем цветовую гамму.
Будем делать 4 стиля для контролов, а значит нам нужно 4 разных по цвету объекта. Какой выбрать цвет? Возьмем что-то яркое из нашей жизни. Например, карамель или мед, лайм или киви, бледные морские камешки, вишня...
На основе этих объектов в Expression Design создадим библиотеки цветов с помощью инструмента Color Dropper - выбирая цвет и добавляя его в нужную библиотеку.
На этих библиотеках мы будем основываться при разработке цветового оформления контролов. В последствии мы можем добавлять туда новые элементы в процессе разработки, например, градиентные переходы.
Подготовительный этап по подбору цветовой гаммы сделан. Наши созданные библиотеки - это Cherry Colors (для вишневых кнопок), Caramel, Lime, Pale.
Теперь - в Expression Blend создаем Silverlight 2 приложение. И набросаем наиболее распространенные системные контролы:
-
Button,
-
TextBox,
-
CheckBox (в двух состояниях - checked & unchecked),
-
RadioButton (также в двух состояниях),
-
Slider (с базовым значением !=0, например 2 или 3 - чтоб было видно левую и правую часть),
-
ScrollBar (расположим его вертикально),
-
ListBox с несколькими введенными данными, таким образом, чтоб было видно скроллинг.
Также не забудем, что в Silverlight 2 Beta2 добавлен VisualStateManager, и для пользовательских контролов нужно будет отобразить различные состояния, например, для CheckBox это Common States (Normal, MouseOver, Pressed, Disabled), Check States (Unchecked, Indeterminate, Checked), а также три состояния FocusStates.
Снимем скриншот с контролов и вставим его в рабочий документ Expression Design - чтоб видеть перед глазами то, что будем рисовать.
Семь раз отмерь - один раз отрежь.
К чему это я? К настройке грида (координатной сетки), единиц измерения, шага перемещения, размеров документа и разрешающей способности. Так как нам нужна точность позиционирования и точность сдвигов, настроим единицы измерения на пиксели (Edit - > Option -> Unit & Grids -> Units), размер грида - 10 px и шаг перемещения объекта (nudge increment) - 1 px (чтоб при перемещении объекта вверх-вниз, вправо-влево с помощью клавиш со стрелками он смещался ровно на 1 пиксель). Размер документа 980х600 (к примеру) и разрешающая способность 96 px/inch.
Сетку можно отобразить View -> Show -> Grid. Сделать привязку объектов к сетке - View -> Snap to Grid.
Такой маленький, а уже CheckBox...
Почему-то обычно начинают с кнопок. А мы начнем рисовать с чекбокса. Он маленький и простой. Нарисуем прямоугольник (Rectangle) размером 15х15 px с закруглений углов на 3px. Возьмем гамму Lime. Заполнение будет белым, а очерчивание - темно-зеленым #67850F в 1px.
Рисуем еще один маленький прямоугольник. Размером уже 9х9 px и с радиусом закругления 1px. Размеры внешнего и внутреннего прямоугольника выбираем так чтоб в натуральную величину было четко видно зазоры между ними и расстояние от края одного до края другого прямоугольника было целым. (если б размер был меньшего прямоугольника 10х10 - то наблюдалось бы уже некоторое размытие.)
Очерчиваем второй прямоугольник более светлым зеленым #97CA00 и заливаем градиентом внутри сверху-вниз #AADF0B - #FFFD7E.
Выравниваем два прямоугольника так чтоб их центры совападали. Сам чекбокс готов. Теперь надо нарисовать галочку. Для этого можно использовать инструмент Pen. Фактически это может быть любая отметка - галочка или крестик. Главное чтоб не точка - чтоб не перепутать с radiobutton. В этих же целях не стоит сильно увлекаться с закруглением углов. Иначе квадрат может превратить в круг :)
Slider. Туда-сюда...
Слайдер - состоит из двух частей. Полоски и бегунка, который можно гонять по этой полоске. Полоска у нас будет простая. Градиент от зеленого к желтому, небольшое закругление углов и очерчивание по контуру в 1px.
А бегунок - будет зеленым карамельным :)
Для этого нам понадобится основа в виде градиента от темного к светлому (светлый должен быть внизу) и стеклянный блик. Основа бегунка - тот же прямоугольник 13х20px с радиусом закругления 5px. Очерчивание по контуру в 1px и градиент для заполнения от темно зеленого - к светлому и к желтому. А блик - это прямоугольник 9х11px с радиусом закругления 3px. Без очерчивания и с заполнением градиентом от белого с прозрачностью = 90% до белого с прозрачностью = 0%. Располагаем блик поверху фона с равными отступами от левого, правого и верхнего края.
Данный бегунок станет основой для прорисовки кнопки, скроллинга общего, в списке и в текстовом поле.
После прорисовки всех контролов получаем вот такое преобразование. Применив оставшиеся библиотеки цветов - получаем все 4 запланированные гаммы.
Также сделала демо-реализацию Lime Controls на практике - на основе шаблонов.
В приложении файл Lime.design, а также Lime Controls (файлы Page.xaml & App.xaml) и библиотека цветов для дизайна Lime.xml.
Предварительно пощупать их можно тут
Реализацию остальных цветовых схем контролов Caramel, Pale, Cherry выложу позже.
Если есть предложения или замечания, может что-то не учтено - пишите в комментариях.