Expression

Почему я люблю Border и Rectange

Thu, 01 Dec 2011 08:56:30 GMT

В общем-то, два простых элемента. Border – элемент компоновки, контейнер. Rectangle –прямоугольная форма. Часто, из-за своей простоты, один или другой элемент используется в качестве фона, подложки или рамочки. Изменение значения свойства Visibility или Opacity такого элемента в различных состояниях (MouseOver, Pressed, Focused, etc) создает эффект подсветки.

Что ж, давайте посмотрим на различия и особенности применения того или иного элемента в определенных случаях. Возьмем две базовые кнопки, визуально идентичные, но в одной из них для фона и подсветки используется Border, а в другом – Rectangle.

Общие особенности

В обоих случаях у основного элемента x:Name="BgNormal", отвечающего за визуальное отличие в состоянии Normal, можно сделатьTemplate Binding на фон и очерчивание. Хоть и имена свойств разные, но суть от этого не меняется.

Border
BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}"

Rectangle
Stroke="{TemplateBinding BorderBrush}" Fill="{TemplateBinding Background}"

С толщиной очерчивания дело обстоит немного сложнее.

Border
BorderThickness="{TemplateBinding BorderThickness}"

Rectangle
Завязаться на Template Binding не получится, но тем не менее можно просто задать StrokeThickness="0" или любое другое значение.

Различия

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

Скругление

Border

Свойство CornerRadius. Заданное значение позволяет скруглить все уголки.

Либо задать скругление для каждого из 4-х, например, CornerRadius="7,0,7,0" создаст такое закругление:

Rectangle

Одновременного эффекта скругления, наподобии свойства CornerRadius у Border позволят создать такие свойства Recrangle, как RadiusX="7" RadiusY="7"

Скруглить только один уголок не удасться, но зато можно добиться другого результата – задать разные значения RadiusX="7" RadiusY="15". Это будет выглядеть вот так. Странный вид, скажем так, на любителя

Тип очерчивания

Border
Если задать BorderThickness у Border, то всего чего вы можете добиться в плане типа очерчивания – так это обычная линия. Никаких шрихпунктиров или тому подобного.

Rectangle
У Rectangle же открывается большое поле для экспериментов. Раскрыв список Advanced Properties сразу после StrokeThickness, можно например задать массив из точек и интервалов, создав равномерную штрихпунктирную линию либо хаотичную.

StrokeDashArray="4 4" будет выглядеть так

а при StrokeDashArray="4 4 1 4" и толщине StrokeThickness="2" вот так

При StrokeThickness более 2 становится заметно скругление самих точек в шрихпунктире

Вот такой эффект можно получить если задать StrokeDashArray="0 1.5" StrokeDashCap="Round" StrokeThickness="2"

Толщина очерчивания

Border
У Border можно задать разные толщины для каждой отдельной границы – левой, правой, верхней, нижней. В итоге можно легко добиться следующего эффекта, всего лишь задав BorderThickness="5,0,0,0"

Rectangle
У Rectangle толщина очерчивания задается сразу для всех, например, StrokeThickness="1".

Вложенность

Border
Главное преимущество Border – это то, что он является контейнером. Это значит что внутрь мы можем положить еще один Border, элемент или еще один контейнер и так до бесконечности. В связи с этим можно создавать, например, эффекты из наружных и внутренних границ или поместить внутрь Grid с колонками, в одной из которых находится иконка, а в соседней располагается контент для кнопки.

Эксперименты с разной толщиной границ и вложенностью дают свои результаты – расположение кнопок одна за одной в Toolbar-e.

Rectangle
Так как Rectangle – не контейнер, то в него вложить ничего не получится.

В итоге хочу сказать, что в большинстве случаев для создания простых прямоугольных форм и изменения фона для различных состояний я все-же отдаю предпочтение Border-у. Но как показывают примеры выше, у Rectangle есть свои индивидуальные точки применения.

Если у Вас есть свои интересные способы использования того или иного элемента, то буду рада услышать.

Caramel theme v2

Mon, 17 Oct 2011 09:22:58 GMT

Пару лет назад (как же давно это было) я сделала выпуск с карамельной темой. Пришло время дать им новую жизнь и выпустить обновление. В составе второй версии произошли следующие изменения:

Разделение на отдельные файлы-ресурсы

Все цвета, тени и общие отступы для контролов вынесены в файл Colors.xaml Кроме того, теперь каждому контролу соответствует отдельный файл с одноименным названием. Каждый файл залинкован на Colors.xaml (не забудьте его!).

Новая верстка

XAML-код для всех контролов был полностью переписан. Стеклянный эффект оптимизирован для растяжения по вертикали и горизонтали

Удобные имена для цветов

В именах цветовых ресурсов произошло переименование, теперь названия без акцента на цветовую привязку.

Смещение акцентов

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

Стиль скроллингов

Было решено избавиться от кнопок вверх-вниз в виде стрелочек, оставив только сам ползунок скроллинга. Ширина вертикального скроллинга и высота горизонтального была также уменьшена почти в два раза, чтобы не занимать полезное пространство. Фон скроллинга также более плоский.

Компактность

Вообще все контролы стали более компактными, начиная от чекбокса, кнопок и заканчивая прогресс-баром. Убраны все лишние элементы и пространство.

Высота строки

Для всех типовых элементов ввода (TextBox, PasswordBox, ComboBox, ListBox), кнопок сделана общая высота строки в 24 пикселя. Теперь смотрится все гораздо ровнее. И кнопку можно разместить рядом с полем ввода, не боясь что она будет больше.

Стандартные отступы

Для всех контролов добавлен ресурс MarginDefault в размере 3 пикселя, дабы не мучаться с выставлением отступов при размещении в гриде и прочих элементах компоновки.

Фокус

Более продуманная фокусировка на элементах. Темный цвет обводки контролов ушел с состояния Normal и перешел в Focused.

Новые контролы

Ну и конечно же, не помешало добавить в выпуск чего-то новенького. На этот раз в сборку попали элементы DatePicker и TabControl. Пополнение ожидается.

Посмотреть демо

Скачать проект с темой

Microsoft Expression Blend for HTML

Wed, 12 Oct 2011 09:25:58 GMT

Наверное многие из вас уже слышали про Microsoft Expression Blend для создания приложений с использованием HTML, CSS, JavaScript. При чем акцент делается именно на том, что данный продукт спроектирован для создания интерфейсов приложений под Windows 8, и в частности в новом Metro-стиле. Предварительная версия инструментария доступна как часть Windows Developer Preview. Если хотите поэкспериментировать и попробовать создать что-то самостоятельно или пройтись по готовому примеру, то можно начать со следующего:

Установить Windows Developer Preview with developer tools
Загрузить исходный пример Memory Game Demo Files и открыть его в Expression Blend
Посмотреть видео-запись сесиии A deep dive into Expression Blend for designing Metro style Apps with HTML

Также дополнительно можно ознакомиться со следующими записями:

Стилизированный календарик

Wed, 12 Oct 2011 08:49:34 GMT

Опубликовала стилизированный календарик в Microsoft Expression Gallery. Отлично смотрится с новой перерисованной иконкой, градиентными очерчиваниями и голубой тенью.

Посмотреть демо

Загрузить пример

На что обратить внимание

1. Можно поменять цвета для календарика в панели Resources.

2. Основной стиль для элемента управления DatePicker – [DatePicker default]

3. TCalendarButton – стиль для кнопки-иконки календарика.

4. Стиль выпадающего календаря – TCalendar.

5. Когда находимся в режиме редактирования стиля TCalendar, то очень удобно редактировать и добраться до дополнительных стилей через меню Objects –> Edit Additional Styles.

UX Next

Thu, 06 Oct 2011 15:15:24 GMT

Недавно меня пригласили выступить на событии HTML5 PICNIC, проводимом в рамках UX Next - сообществе дизайнеров, usability специалистов и интерфейс разработчиков.

“Неформальная встреча планируется в виде дня самозабвенного погружения в код и поедания шашлыка где-нибудь за городом, а не в офисе. Событие запланировано на 11 октября (вторник). Этот рабочий проведется в обсуждениях пользовательского поведения, шаблонов проектирования, дизайн метрик, методик сбора требований и поговорим о будущем веб-технологий. Регистрация еще открыта.”

Планируемая тема моего доклада – “Прототипируем приложения”.

Calendar Button

Thu, 06 Oct 2011 15:05:02 GMT

Как-то я давно присматривалась к иконке-кнопке календарика в элементе управления DatePicker. Как минимум она мне казалась маловатой, из-за того что не совпадала по высоте с полем для ввода даты. Иногда даже возникало желание поместить ее внутрь текстового поля. Вот и пришло время ее перерисовать. Иконка полностью была сделала в Expression Blend-e без помощи Expression Design. Можно даже сказать, практически, на одних Border-ах.

Масштаб 200 %

Масштаб 100%

Было:

А вот так она выглядит после применения стиля к стандартной DropDownButton в DatePicker-е:

Посмотреть вживую

Загрузить проект

На очереди стилизация самого календарика.

Magic Backgrounds for Windows Phone

Wed, 05 Oct 2011 15:10:04 GMT

Решила поделиться небольшим набором цветных фонов для панорамных приложений Windows Phone. Все варианты хорошо смотрятся с базовыми черным текстом и почти все – с белым (исключение составляет желтый фон).

Загрузить Magic Backgrounds в одном архиве

Загрузить тестовое приложение Windows Phone Panorama c включенными Magic Backgrounds

Как создать панорамное приложение для Windows Phone?

При установленных Windows Phone SDK (Windows Phone Developer Tools) и Expression Blend 4, создаем в последнем новый проект для Windows Phone и выбираем тип проекта - Windows Phone Panorama Application.

Expression Blend автоматически добавляет на страничку элемент управления Panorama с несколькими элементами и тестовыми данными.

Как установить свой фон для панорамы?

Выбираем на панели Objects and Timeline элемент Panorama.

На панели Properties в категории Brushes выбираем горизонтальную закладку Background и меняем фон, выбрав соответствующий из списка ImageSource. Можно также добавить в проект новый. Дополнительно поэкспериментируйте с свойством Stretch. Оптимально подходит установленное значение UniformToFill.

Еще один пример компактного ProgressBar-a

Tue, 04 Oct 2011 13:36:54 GMT

Еще один хороший пример компактного и простого ProgressBar-а. В отличие от первого кругового варианта, еще более компактен. Также содержит только одно состояние – Indeterminate.

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

Посмотреть демо реального размера индикатора

Загрузить пример

Компактный Progress Bar

Tue, 04 Oct 2011 13:29:23 GMT

Хороший пример компактного и простого ProgressBar-а. Содержит только одно состояние – Indeterminate. Данный стиль для элемента управления применяется в случаях где производительность ставится на первое место. Отлично смотрится в строках DataGrid, TreeView, футерах и прочих местах где нужен небольшой и компактный индикатор, отображающий состояние загрузки.

Посмотреть демо реального размера индикатора

Загрузить пример

Ссылки по теме доклада Прототипируем приложения для Windows Phone

Wed, 28 Sep 2011 12:14:58 GMT

На встрече киевской .NET User Group в субботу 24 сентября 2011 г. мы создавали прототип небольшого приложения “Kyiv .NEt User Group”, целью которого было отобразить данные, отвечая на вопросы What? When? Where?, а в деталях – список докладов с подробностями, дату/время проведения и карту. В начале доклада каждый попробовал для себя старый добрый метод прототипирования - “карандаш-бумага”, в результате чего мы выделили наиболее удачный сценарий.

Кто хочет повторить для себя данный процесс, можно взять готовые образцы c шаблонами телефона в формате pdf, распечатать их и попробовать порисовать:

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

Expression Blend + SketchFlow + Visual Studio 2010
Windows Phone SDK (Windows Phone Developer Tools)
SketchFlow Template v1 wp7sketchflow.codeplex.com - устанавливается из файла msi, автоматом добавляет шаблон на страницу нового проекта в Expression Blend
SketchFlow Template v2 cut.ms/bn5M - просто архив с шаблоном проекта, который необходимо распаковать в папку c:\users\[username]\Documents

Из двух шаблонов SketchFlow для WP, мне больше нравится первый с сайта codeplex, но для сравнения Вы можете попробовать оба.

После создания проекта в разделе Categories/Mockups можно найти разнообразные скетчевые элементы управления и заготовки. Начать можно с добавления элементов Panorama или Pivot.

Если вдруг кроме стандартных App icons Вам понадобятся дополнительные иконки, то рекомендую ознакомится с списком разнообразных наборов

Ну и конечно же, неотъемлемой частью тестирования прототипа будет SketchFlow Player, который позволит вам переходить по страничкам приложения, а также за его пределы (Home, Search, AppList).

В дополнение, отметим что прототип в плеере можно тестировать в режимах Portrait, Landscape.

Удачных прототипов!

Toggle Button

Mon, 12 Sep 2011 13:31:28 GMT

Toggle button с двумя состояниями: Yes и No, видимыми одновременно, и в то же время разделенными на две части.

Откройте проект в Microsoft Expression Blend
Используйте панель Resources для модификации ресурсов: RgbSecond и BgControlSecond.
Протестируйте элемент управления ToggleButton.
Добавьте в ресурсы своего проекта файл ресурсов ToggleButton.xaml.
Примените стиль ToggleButtonYesNo к выбранным элементам управления ToggleButton.

NumericUpDown

Mon, 12 Sep 2011 13:12:59 GMT

Небольшой пример на тему кастомизации такого элемента управления, как NumericUpDown из Silverlight toolkit.

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

Blend preview for Silverliht 5 RC

Wed, 07 Sep 2011 09:02:12 GMT

После выхода Silverlight 5 RC, не заставил себя долго ждать и Blend preview for Silverliht 5 RC, который можно загрузить с http://www.microsoft.com/download/en/details.aspx?id=9503

Данная среда предназначена для создания проектов Silverlight 5, включая и Silverlight 5 SketchFlow. И только 5 версии. Для проектов на 3 и 4 версиях Silverlight – предлагается остаться с Expression Blend 4. Среды разных версий также, как и раньше, устанавливаются и работают независимо друг от друга.

Ответы на вопросы: Лишняя колонка в DataGrid

Mon, 05 Sep 2011 12:18:16 GMT

Возможно эти небольшие заметки помогут кому-то при поиске ответов на казалось бы простые и часто возникающие вопросы.

Вопрос: как убрать пустую последнюю колонку в DataGrid?

Детально: Если DataGrid занимает всю доступную ширину пространства, а кол-во колонок и контента в них по ширине не превышает ширину DataGrid, то появляется пустая “лишняя” колонка справа.

Ответ:

1 вариант. Необходимо явно задать пропорциональную ширину колонок, чтоб в сумме они давали 100%.

<sdk:DataGridTextColumn Binding="{Binding Number}" Header="Number" Width="0.2*"/>
<sdk:DataGridTextColumn Binding="{Binding Name}" Header="Name" Width="0.3*"/>
<sdk:DataGridTextColumn Binding="{Binding Company}" Header="Company" Width="0.5*"/>

2 вариант. Когда неизвестно кол-во и необходимая ширина колонок, то достаточно задать ширину только для последней колонки Width="*".

Визуально это можно также сделать, выбрав необходимую колонку-элемент в панели Objects & Timeline и в категории Layout панели Properties для ширины выбрать из списка значение Star.

Примечание: для WPF работает тот же принцип. Только визуально для ширины необходимо выставить *, так как выпадающего списка нет.

Sketch effects in Expression Design

Mon, 05 Sep 2011 09:51:04 GMT

Есть несколько путей создания прототипов приложений с помощью SketchFlow. Одни рисуют на бумаге, затем сканируют/фотографируют, импортируют графику в Expression Design/Adobe Photoshop, обрабатывают ее, затем импортируют в Blend отдельные кусочки, создают анимацию и т.д. Способ красивый, креативный и с wow-эффектом, но долгий. Другие сразу в Blend делают прототип функциональности, используя стандартные скетчевые элементы управление и образцы данных, встроенные в Blend. Во втором случае прототип получается сделать гораздо быстрее, но используемые объекты-изображения в нем выходят совсем не “скетчи”.

Почему бы тогда не сделать как-то промежуточный вариант? У меня давно возникла идея вместо прорисовки на бумаге отдельных картинок – брать фотографии и иллюстрации и накладывать на них скетчевые эффекты в графическом редакторе. Такие эффекты можно заготовить один раз – и потом применять к набору тематических фотографий. Будь то авто, мебель или люди.

Для примера приведу ряд изображений, который я преобразовала в Expression Design для демо-прототипа на ReMIX10.

Было:

Стало:

В результате картинки в приложении-прототипе выглядят уже в стиле “скетчи”:

Понравившиеся эффекты можно скопировать на новое изображение с помощью инструмента Attribute Dropper :
– захватив свойства на одном объекте и перетащив их на другой.

Больше всего меня привлекли комбинации эффектов – Poster Edges + Note Paper и CrossHatch + Note Paper. Надеюсь вам они тоже пригодятся.
Прилагаю эффекты в файле Expression Design.

Новый формат образцов данных

Mon, 05 Sep 2011 09:48:59 GMT

В Expression Blend 4 появился новый формат для строковых образцов данных – Colors. Если создать новое свойство и выбрать Type = String, то в поле Format для выбора доступна опция Colors.

Его можно использовать в разных целях, в том числе и для заполнения фона объектов.

Приведу небольшой пример. Допустим у нас есть коллекция элементов, для которых задано два поля – Price и Color. Перетащим поле Price из созданной коллекции на рабочую область документа в режиме списка (List Mode).

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

В свойствах StackPanel выбираем установку цвета для Background. Раскрыв Advanced options редактора, сделаем привязку данных.

Выбираем Color из доступного списка.

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

Что такое DataStore?

Mon, 05 Sep 2011 09:47:43 GMT

В 4-ой версии Expression Blend появилось такое нововведение как DataStore. Постараюсь рассказать что это за зверь.

Задумывался DataStore как промежуточное хранилище данных, которое можно использовать при построении прототипов Silverlight и WPF приложений.

Где это использовать?

сохранение в DataStore введенного имени (и/или других данных) пользователя из одного окна и персонализация на основе этого остальной части приложения
просчет нового значения по формуле в зависимости от введенных пользователем данных в разных окнах
и т.д.

Как это использовать?

Создадим прототип Silverlight приложения.
Сделаем небольшую формочку логина.
Повесим на кнопку OK поведение SetDataStoreValueAction, которое можно найти в библиотеке Assets. Его функция будет заключаться в записывании данных в промежуточное хранилище с поля логин.
Настраиваем записываемое свойство у поведения:
В Common Properties выбираем для него новое значение:

Создаем имя для свойства, которое будем хранить в хранилище:
В тех же Common Properties нашего поведения задаем значение для только что созданного свойства, воспользовавшись пунктом Element Property Binding из Advanced options:

Свяжем его с свойством Text элемента login:

В появившемся окошке выбираем Text:
На закладке Data можем убедиться, что хранилище создано и данные туда записываются:
Создаем новый экран, на котором будем использовать наше значение логина:
Создаем на втором экране два текстовых блока, заключаем их в StackPanel. Одно поле можно назвать Welcome, а второе UserName:
Для свойства Text поля UserName привяжем соответствующее значение из DataStore:
Из панели Data с помощью Drag&Drop перетащим поле UserLogin на поле UserName
Небольшое отступление: сделаем переход на второй экран по нажатию на кнопку на первом экране:
Запускаем и тестируем приложение:
Вводим имя пользователя, нажимаем ОК – происходит переход на новый экран и мы видим в качестве приветствия свое имя!

Вот такое интересное применение новой возможности.

WP7 MINI icons

Mon, 05 Sep 2011 09:46:02 GMT

Как-то попросили создать инвертированный набор иконок SNA MINI. Меня также посетила мысль что эти иконки очень даже в стиле “METRO” и подходят для разработки приложений под WP7. Поэтому немного доработанная версия получила название “WP7 MINI”. Набор использует новые размеры 48x48 .png как и WP7 Application Bar Icons и поставляется в двух цветовых темах dark и light. Expression Design file с нарезкой также прилагается.

Arrow Buttons

Mon, 05 Sep 2011 09:44:04 GMT

Представляю небольшой наборчик масштабируемых кнопок-стрелочек в 4 стилях: ArrowLight, ArrowDark, ArrowLightColor, ArrowDarkColor. Кнопки в стиле стрелочек можно применять для различных случаев: управление прокруткой галереи изображений, переход на новые страницы приложения, отображение детальной информации, можно даже в уменьшенном варианте использовать как стрелки для скроллинга списков и т.д.

Описание стилей:

ArrowLight

Использует для фона кнопки всего один цвет, который можно задать в качестве свойства Background="White". Состояния изменяются за счет увеличения-уменьшения прозрачности и/или отображением белой тени. Стиль идеален для расположения на темных или ярких поверхностях.

ArrowDark

Использует для фона кнопки всего один темный/яркий цвет, который можно задать в качестве свойства Background. Например Background="#FFFCCE56". Состояния изменяются за счет увеличения-уменьшения прозрачности и/или отображением серой тени. Стиль идеален для расположения на белой или светлых поверхностях.

ArrowLightColor

Для фона кнопки используется два цвета, за счет указания свойства Background передается цвет в состоянии Normal, а свойства Foreground – в состоянии MouseOver. (Для примера White и #FF269B7B). Состояния изменяются за счет увеличения-уменьшения прозрачности обоих цветов и/или отображением белой тени. Стиль идеален для расположения на темных или ярких поверхностях. В качестве цвета для наведения рекомендуется использовать более темные оттенки фона, на котором располагается кнопка.

ArrowDarkColor

Для фона кнопки используется два цвета, за счет указания свойства Background передается цвет в состоянии Normal, а свойства Foreground – в состоянии MouseOver. (Для примера #FF269D7B и #FFFCCE56). Состояния изменяются за счет увеличения-уменьшения прозрачности обоих цветов и/или отображением серой тени. Стиль идеален для расположения на белой или светлых поверхностях. В качестве цветов для двух состояний рекомендуется использовать яркие, противоположные цвета.

Материалы:

Silverlight Navigation Application: Mini иконки для навигационной панели.

Mon, 05 Sep 2011 09:42:39 GMT

Необходимо расширить функциональность навигационной панели в Silverlight Navigation Application или Silverlight Business Application, но нет подходящих иконок? Сделала для этого случая простой черновой набор иконок “Mini”. Думаю, пригодится :) Кол-во и вид отдельных иконок впоследствии может измениться.

Иконки предоставляются в формате Expression Design в черно-белой гамме и черно-зеленой. В любом случае, можно перекрасить их в любые другие цвета – это как раз и есть вторая особенность данного набора. Также, если необходим размер иконок побольше - их всегда можно увеличить.

Список иконок:
Folder, Document, Documents, Tree,
Add to DB, Remove from DB, Edit DB structure, Search in DB,
Down, Up, Right, Left,
Stats, Tools, Filter, Refresh,
Info, Search, Zoom out, Zoom in,
Lock, UnLock, Person, Cloud.

Загрузить иконки “Mini” v2