Expression

Обзор детских приложений под Windows 8

Fri, 04 Oct 2013 04:27:14 GMT

Думаю этот пост будет интересен родителям, чьи дети находятся в том чудесном возрасте, когда читать/писать они еще не умеют, мышкой не владеют, но тем не менее проявляют особый интерес ко всякого рода устройствам, реагирующих на касание маленьких пальчиков. В моем случае большое внимание ребенка привлек Surface, без которого не обходится ни одна дальняя поездка. Это не первое его touch-устройство, до этого были и параллельно используются телефоны под управлением Windows 7/8.

Знакомство с Surface ребенок начал с таких приложений как Flash Cards, успешно освоенных на Windows Phone. Далее пошли пазлы, развлекательные приложения в духе “лопни шарик”, “нажми на гудок авто” и т.д. Основная масса используемых приложений была и остается англо-язычной, но также присутствуют и русско-язычные.

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

простота интерфейса
Минимум кликов чтоб добраться до определенной обучающей/развлекающей точки в приложении. Когда ребенок только начинает знакомиться с компьютером, то наличие разветвляющихся сценариев и многоходовых настроек вряд ли вызовут у него интерес. В лучшем случае это будет хаотичное нажимание, в худшем - мгновенная потеря интереса.
минимум/отсутствие надписей на элементах выбора/меню
Ребенку 1-3 лет привычнее видеть объекты, на которые ему хочется нажать. А не непонятные текстовые надписи. Тем более что очень мало детей умеют читать в этом возрасте.
отсутствие рекламы
Думаю объяснение будет излишним. Случайный клик ребенка на рекламе однозначно приводит к возмущению – куда делась моя игра? Далее помощь родителя, чтоб все вернуть обратно. Или же потерянный навсегда интерес.
вменяемая цена приложения
Из моей практики, в среднем цена на детское приложение составляет 1.99$. Есть и достойные бесплатные приложения или в пробном ограниченном режиме. Иногда конечно попадаются варианты с сборниками сказок, где первые три сказки бесплатно, а каждая следующая 1.99$. Тут как-то уже здравый смысл берет вверх.
отключение фонового музыкального оформления
Если какая-то музыка играет в фоне, то важным критерием будет возможность ее отключения.

Ниже я приведу небольшой список приложений под Windows 8, который у нас остался и пополняется. Обычно в Windows Store указывается возраст 3+, но многие будут интересны и для 2-летнего ребенка.

Flash Cards (Карточки)

Toddler FlashCards+

Автор: Apps by Bernardo Zamora

Стоимость: бесплатная версия с ограниченным кол-вом объектов и полная платная платная

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

Недостатки: нет

Voice Toddler Cards

Автор: Apps by Sai Service LLC
Стоимость: бесплатная версия с ограниченным кол-вом объектов в категориях и полная платная

Хороший набор карточек даже в бесплатной версии. Озвучка названий объектов на англ. языке. Недостаток – приложение писалось первоначально под Windows Phone и обрезанные неиспользуемые поля по бокам смотрятся странно ( с точки зрения родителя).

Недостатки: для ребенка сложно вернуться назад и выбрать категорию самому. Нужна помощь родителя.

Flashcards Fruits

Автор: Yeylol Technology
Стоимость: бесплатная версия с ограниченным кол-вом фруктов (19) и полная платная (26 объектов)

Красочный и яркий набор карточек с фруктами. Изучение названий на англ или китайском языке. Обучению написанию слов. Можно выбирать цвет карандаша для написания. Есть подсказки как писать буквы.

Недостатки: В режиме обучения письму для ребенка сложно вернуться назад. Кнопка Назад спрятана в App Bar. Выбор карандаша и подсказки находятся в App Bar. Режим обучения письму достаточно сложен для ребенка. Даже у взрослого не всегда выходит с первого раза написать отдельные буквы.

TheKidTree Flash Cards

Автор: The Kid Tree
Стоимость: бесплатная версия

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

Недостатки: если б еще и на русском языке:) И немного отвлекает фон приложения.

Kids Fruit Chart

Автор: Sumit Dutta
Стоимость:бесплатная версия

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

Недостатки: На главной странице меню только в виде текста. Неплохо было бы сделать иконки.

Музыкальные приложения

My Baby Drum

Автор: DOKDOAPPS
Стоимость: бесплатная версия и платная версия

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

Недостатки: Нет. По идее в бесплатной версии должна быть реклама, но кроме названия компании на барабане – ее нет.

My Baby Piano

Автор: DOKDOAPPS
Стоимость: бесплатная версия и платная версия (без рекламы)

Еще одно музыкальное приложение от той же компании, что и My Baby Drum. В этот раз ребенку предлагают поиграть на ярком пианино.

Недостатки: Нет.

Teach Kids Music

Автор: Bruno Terkali
Стоимость:бесплатная версия на один день и платная версия по истечении этого времени

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

Недостатки: Нет

Рисование

Paint for Kids

Автор: Ela & Pietro
Стоимость: условно-бесплатная (дополнительные наборы раскрасок покупаются отдельно)

Большое кол-во категорий (как платных так и бесплатных) с раскрасками. Приключения, морской мир, транспорт, Рождество. В каждой категории есть платные и бесплатные рисунки. В режиме раскраски предоставлен удобный и очевидный выбор красок даже для начинающего пользователя. Можно сохранять и печатать рисунки. Это приложение не оставит равнодушным вашего малыша.

Недостатки: Немного тормозит выход из режима раскраски рисунка.

Развлечения

Boppy Cars

Автор: Boppi Games
Стоимость: Платная

Интересное приложение по изучению различного транспорта, начиная от мотоцикла и до ракеты. Реалистичные 3D-модели, которые открывают дверцы, издают звуки и мигают. Достаточно прикоснуться к различным частям, чтобы что-то произошло. Хоть набор транспорта в приложении и не сильно велик, но каждый раз малыш с интересом будет изучать как объект реагирует на его прикосновения.

Недостатки: нет, только мало объектов :)

Simple Toddler Pop Dots

Автор: Byteflakes
Стоимость: бесплатное

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

Недостатки: нет

QQ Fish

Автор: ZhiYong
Стоимость: Бесплатная

Одна из простейших игр-развлечений для самых маленьких - лопать пузырики с рыбками:) Есть хорошие пузыри с хорошими рыбками и плохие – с медузами и акулами, которые трогать не нужно. Игра хорошо развивает внимание. Один из плюсов игры - можно убрать фоновый звук.

Недостатки: Нет. Простой интерфейс и малышу сразу понятно куда и как нажимать.

Boppi Drive

Автор: Boppi Games

Стоимость: Платная

Еще одно занимательное и реалистичное приложение от Boppi Games. Теперь малышу предлагается прикрутить к различным автомобилям колеса на свой вкус, а для разнообразия можно прицепить зонтик, вентилятор, мигалки или мотор от лодки. После выхода машины из мастерской, можно прокатить свое произведение по дороге, попутно потрогав мельницу, воздушный шар или разнести горку кубиков.

Недостатки: Нет

Надеюсь ваш малыш найдет немало интересного и познавательного в этих приложениях.

Продолжение следует…

Дизайн Windows 8 приложений с помощью Blend for Visual Studio 2012. Шаг за шагом. Вступление.

Mon, 30 Sep 2013 22:04:31 GMT

Августовский анонс Blend for Visual Studio 2012 снова подогрел интерес аудитории к дизайну Windows 8 приложений, а очередная волна ожидается незадолго до, во время и после конференции BUILD.

Что ж, после того как нас посещает идея создать что-то новое и, в частности, под Windows 8, мы начинаем искать удачные аналоги или приближения того, что собираемся создать. Да, можно начать с нуля и напролом, но всегда интереснее разобрать готовое и полнофункциональное приложение и посмотреть как оно сделано изнутри. А уже потом делать свои пробы пера.

Если Вы уже являетесь счастливым обладателем Windows 8, то источник вдохновения можно сразу же искать в установленных приложениях и в Windows Store, который регулярно пополняется новыми поступлениями. Некоторые экземпляры выходят очень интересными и на их примерах можно изучать как разрабатывать и к чему нужно стремиться.

Корни стиля Windows 8 приложений

После просмотра работающих приложений под Windows 8 складывается первое впечатление об их стиле. Он очень простой, понятный и современный. Если пойти дальше и проследить откуда же возник этот новый стиль, то можно сказать, что в его основу положен Swiss Style, также известный как International Typographic Style.

Swiss Style возник в России, Германии и Нидерландах в 1920-х годах и активно развивался в Швейцарии после Второй мировой войны. Швейцарские дизайнеры активно импровизировали с базовым дизайном и пришли к абсолютно новому графическому языку дизайна в 1950-х годах. Они создали целую волну постеров, рекламных материалов, проездных билетов, буклетов для путешественников и т.д. Этот стиль стал популярен во всем мире из-за своей четкости, ясности, читабельности и типограграфики.Типографика и контент были основой и более важны чем текстуры, иллюстрации и так называемый "художественный мусор". Швейцарский стиль так и говорит нам - "используй минимум". Вместо добавления новых элементов и работы с ними, дизайнеры предпочли убрать все лишнее и оставить только суть сообщения, которое хотели донести. Swiss Style до сих пор популярен и продолжает вдохновлять дизайнеров в наше время.

Ниже несколько примеров Swiss Style

Swiss Style Graphic Design. Design by Ruedi Rüegg/Godi Fröhlich 1972

Swiss Style Graphic Design. Musica Viva Kleiner Tonhallesaal, 1959. Design by Josef Müller–Brockmann.

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

Orlamcgraph's photostream

Blanka.co.uk's photostream

Josef Müller-Brockmann

Расширить свои познания об этом стиле и посмотреть примеры Swiss Style можно также в книге Altitude: Contemporary Swiss Graphic Design . Довольно специфичные изображения, но в качестве расширения кругозора – очень познавательно.

Продолжение следует…

Долгожданный Visual Studio 2013 RC

Mon, 09 Sep 2013 17:58:41 GMT

Ура, сегодня стал доступен Visual Studio 2013 Release Candidate, который уже сейчас можно загрузить с продуктового сайта Visual Studio. Известна также дата официального запуска – 13 ноября 2013. Очень символично. Также как и Preview версия, RC успешно работает параллельно с Visual Studio 2012. Порадовало, что RC можно поставить поверх Preview версии, не занимаясь деинсталляцией последней.

О последних обновлениях RC можно почитать в блоге Somasegar.

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

Fri, 06 Sep 2013 22:47:17 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

Arrow Buttons

Fri, 06 Sep 2013 22:47:17 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). Состояния изменяются за счет увеличения-уменьшения прозрачности обоих цветов и/или отображением серой тени. Стиль идеален для расположения на белой или светлых поверхностях. В качестве цветов для двух состояний рекомендуется использовать яркие, противоположные цвета.

Материалы:

WP7 MINI icons

Fri, 06 Sep 2013 22:47:17 GMT

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

Что такое DataStore?

Fri, 06 Sep 2013 22:47:17 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
Небольшое отступление: сделаем переход на второй экран по нажатию на кнопку на первом экране:
Запускаем и тестируем приложение:
Вводим имя пользователя, нажимаем ОК – происходит переход на новый экран и мы видим в качестве приветствия свое имя!

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

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

Fri, 06 Sep 2013 22:47:17 GMT

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

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

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

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

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

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

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

Sketch effects in Expression Design

Fri, 06 Sep 2013 22:47:17 GMT

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

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

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

Было:

Стало:

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

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

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

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

Fri, 06 Sep 2013 22:47:17 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 работает тот же принцип. Только визуально для ширины необходимо выставить *, так как выпадающего списка нет.

Blend preview for Silverliht 5 RC

Fri, 06 Sep 2013 22:47:17 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. Среды разных версий также, как и раньше, устанавливаются и работают независимо друг от друга.

NumericUpDown

Fri, 06 Sep 2013 22:47:17 GMT

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

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

Toggle Button

Fri, 06 Sep 2013 22:47:17 GMT

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

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

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

Fri, 06 Sep 2013 22:47:17 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.

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

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

Fri, 06 Sep 2013 22:47:17 GMT

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

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

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

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

Fri, 06 Sep 2013 22:47:17 GMT

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

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

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

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

Magic Backgrounds for Windows Phone

Fri, 06 Sep 2013 22:47:17 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.

Calendar Button

Fri, 06 Sep 2013 22:47:17 GMT

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

Масштаб 200 %

Масштаб 100%

Было:

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

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

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

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

UX Next

Fri, 06 Sep 2013 22:47:17 GMT

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

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

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

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

Fri, 06 Sep 2013 22:47:17 GMT

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

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

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

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

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

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

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

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

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