Хочу поздравить всех с наступающим Новым 2010 Годом! Пожелать только положительных эмоций, хорошего настроения и всем-всем-всем - творческих успехов!
По традиции – новогодняя открытка :)
Одна из новых замечательных возможностей, которую уже можно попробовать в Silverlight 4 Beta, – это Implicit Styles. Позаимствованная из WPF, она позволяет задавать унифицированный стиль для всех элементов управления одного типа. Например, не прибегая к темам из Silverlight Toolkit, Вы можете один раз задать стиль для кнопок, текстовых полей, скроллинга, полностью стилизировав эти элементы в приложении раз и навсегда.
Что понадобится дизайнеру?
Дизайнеру для разработки понадобится установить:
Полный список инструментов смотреть тут.
С чего начать? С кнопки!
Создадим в Microsoft Expression Blend Preview for .NET 4 новый проект приложения на Silverlight 4. Возьмем небольшой набор графических элементов, который мы хотим преобразовать в стиль для кнопки. Состоит он из закругленного элемента Border и текстового блока.
<Border x:Name="Blue" HorizontalAlignment="Center" VerticalAlignment="Center" Background="#FF308899" CornerRadius="5" Padding="10,5">
<TextBlock Foreground="White" HorizontalAlignment="Center" TextWrapping="Wrap" Text="Button" VerticalAlignment="Center"/>
</Border>
А выглядит следующим образом:
Выделяем элемент Border в панели Objects & Timeline, вызываем контекстное меню и выбираем пункт “Make into control”. В появившемся диалоговом окне набираем в поиске Button, щелкаем на элемент Button, и в поле Name выбираем пункт “Apply to all” – таким образом мы будем задавать один общий стиль для всех кнопок. Также Вы можете создать новый файл ресурсов, и разместить стиль именно там.
После проделанной процедуры, в панели ресурсов можно увидеть следующее:
Появился ресурс с названием [Button default] – кликнув на который мы зайдем в режим редактирования стиля кнопки. Выполняя команду преобразования графических элементов в работающий элемент управления, Blend сделал практически всю работу за нас. Осталось немного подправить мелочи.
Собственно, мелочи…
Выделим в панели Objects & Timeline пункт Style
И зайдем в режим редактирования шаблона
В панели Objects & Timeline перетащим элемент ContentPresenter внутрь элемента Border. Если этого не сделать, то в нашем случае, кнопка может выглядеть не очень красиво – без внутренних отступов.
После того как мы переместили ContentPresenter внутрь элемента Border – кнопка выглядит так:
Ресурсы! Ресурсы! Ресурсы!
В чем можно убедиться неоднократно, так это в том, что максимально ВСЕ нужно выносить в ресурсы. Начнем мы с цветов. Как минимум один цвет у нас уже есть – фон для кнопки. Выберем наш элемент Border, для которого он используется, и в редакторе цвета нажмем на ма-а-аленький квадратик Advanced property options (в результате обсуждений Expression Community, эту кнопку-точку принято называть Property Peg).
В меню выберем пункт Convert to New Resource, зададим ключ-название для цвета, например, Blue и разместим все в том же файле ресурсов. После этого в панели ресурсов появится новый элемент, а в xaml-файле – строчка <Color x:Key="Blue">#FF308899</Color>. Заливка же фона для элемента Border преобразуется в следующую запись:
<Border.Background>
<SolidColorBrush Color="{StaticResource Blue}"/>
</Border.Background>
Состояния
Как мы знаем, в панели States можно сделать настройки для всех состояний нашей кнопки. Например, для состояния MouseOver
мы изменим цвет заливки фона кнопки. Находясь в режиме записи состояния MouseOver, на панели Objects & Timeline выберем элемент Border и, переключив обратно на редактор цвета, изменяем голубой цвет на более темный. После чего этот цвет аналогично можно добавить в ресурсы с названием, например как в нашем случае, DarkBlue.
В xaml-коде состояние MouseOver будет выглядеть так:
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="Blue">
<EasingColorKeyFrame KeyTime="0" Value="{StaticResource DarkBlue}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
Аналогичные действия можно сделать и для состояния Pressed, а для Disabled – понизить прозрачность фона до 30%:
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Blue">
<EasingDoubleKeyFrame KeyTime="0" Value="0.3"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
Для состояния Focused – можно сделать границу для Border размером 1, а в качестве цвета для нее выбрать ресурс DarkBlue. Все это делается визуально в режиме записи состояния. А код получается следующим:
<VisualState x:Name="Focused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderThickness)" Storyboard.TargetName="Blue">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Thickness>1</Thickness>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="Blue">
<EasingColorKeyFrame KeyTime="0" Value="{StaticResource DarkBlue}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
Оптимизация – основа всего
Думаете, на этом минимальные действия над стилизацией кнопки закончены? Отнудь нет. Как мы уже выяснили – все нужно выносить в ресурсы. У нас еще остались свойства, которые можно оптимизировать.
Например, у элемента Border нашей кнопке есть два свойства, одно из которых – CornerRadius, а второе – Padding. Очень логично, что при создании следующих стилей, например, для текстового блока, скроллинга и других, Вы не будете использовать совсем новые значения для закругления углов и внутренних отступов для контента.
Поэтому выносим их тоже. Из практики, я обычно для таких свойств создаю еще один файл ресурсов - Thickness.xaml, в котором храню только отступы, толщины границ, радиусы закругления и прочие общие значения, которые удобно менять в одном файле единоразово.
После этого привязка к значениям выглядит так:
а в файле Thickness.xaml у нас есть две строчки:
<Thickness x:Key="Padding">10,5</Thickness>
<CornerRadius x:Key="CornerRadius">5</CornerRadius>
Как Вы уже догадались, эти значения можно менять через панель Resources, что, согласитесь, очень удобно.
Как применить стили?
Ну и наконец, полученный нами стиль применяется автоматом, без указания каких-либо ключей - для всех новосозданных кнопок.
Стили по ключу – в силе
Никто не отменял стили с заданием по ключу. Вы можете создавать и использовать их для отдельных элементов, которые необходимо выделить. Например, указав для нового создаваемого стиля x:Key,
<Style x:Key="CancelButton" TargetType="Button"> ...
мы можем для отдельной кнопки применить его старым методом
<Button Content="Button" HorizontalAlignment="Center" VerticalAlignment="Center" Style="{StaticResource CancelButton}"/>
Уже доступна для загрузки версия Silverlight 4 Beta - http://www.silverlight.net/getstarted/silverlight-4-beta/
Список инструментов, документации, etc…:
Visual Studio 2010 Beta 2 или Visual Web Developer Express 2010 Beta 2
Silverlight Tools for Visual Studio 2010
Expression Blend for .NET 4 Preview – версия Blend для разработки Silverlight 4 и WPF 4 приложений
WCF RIA Services ( == .NET RIA Services) - preview-версия для Visual Studio 2010 Beta 2
Silverlight 4 SDK CHM - офлайн документация
Silverlight 4 Beta Documentation – онлайн документация
Обновление Silverlight Toolkit для Silverlight 4
Silverlight 4 SDK – отдельно
Версии Silverlight 4 Beta для разработчиков: Windows и Mac платформы
Детальнее о новых возможностях SL4 можно почитать в блоге Tim Heuer-a и, логично, - на сайте silverlight.net :)
Продолжаем тему замены иконок в панели навигации Silverlight DataForm. Настал черед добавления кнопок-иконок для новой функциональности. Например, Вы хотите расположить кнопки поиска, фильтрации, экспорта данных в формат xls, да мало ли что может потребоваться. (По просьбам в набор “SNA Mini v2” добавила еще 4 иконки).
Конечно, кнопки с необходимым функционалом можно вынести за пределы DataForm, но, как по мне, лучше держать это все в одном месте – в так называемом icons panel (введем это понятие для удобства и расширения navigation panel).
Часть 2. Добавление новых иконок в навигационную панель.
Для того чтобы добавить не просто значки иконок в шаблон, а и повесить на них необходимые обработчики событий, предлагаю воспользоваться cозданием Custom DataForm.
CustomDataForm
Добавим в наш проект новый класс - CustomDataForm.cs и в нем пронаследуемся от DataForm
public class CustomDataForm : DataForm
{
}
Размещаем на нашу страницу наш новый элемент управления (можно для сравнения - уже после существующего на странице Services.xaml):
<local:CustomDataForm DescriptionViewerPosition="BesideLabel" AutoCommit="True" CommitButtonContent="Save" CommandButtonsVisibility="Navigation,Add,Delete,Commit,Cancel" CancelButtonContent="Cancel" />
Наполняем данными
Чтоб было что отображать в CustomDataForm - добавим в проект образец данных для тестирования – коллекцию Company с полями Name, Street, WWW.
И укажем в качестве исходных данных для нашего local:CustomDataForm свойство ItemsSource="{Binding Company, Mode=OneWay}"
Запустите проект и убедитесь что форма и навигация по ней работает.
Шаблон для CustomDataForm
По аналогии с предыдущей частью создаем копию шаблона для нашего элемента управления и называем его CustomDataFormStyleNew, разместив в Resource dictionary - Forms.xaml
Снова идем по дереву шаблона в панели Objects & Timeline, находим StackPanel c группой элементов FirstItemButton, etc. Будем расширять эту панель своими кнопками.
Добавляем разделитель.
Как мы видим, в той же панели находятся кроме кнопок еще и разделители вида
<Border x:Name="ButtonSeparator" Margin="2,4,2,4" Width="3" Opacity="0.2" Background="{TemplateBinding BorderBrush}" BorderBrush="#59FFFFFF" BorderThickness="1,0,1,0"/>
Это маленькая палочка, которая визуально отделяет группы кнопок навигации, редактирования, добавления и т.д. Скопируем эту кнопку, изменив название на x:Name="ButtonSeparator2" и вставим ее перед элеменом FirstItemButton.
Новая кнопка в шаблоне (*).
За образец для нашей новой кнопки можно взять какую-то из готовых, например, NextItemButton и изменить ее имя на SearchButton.
<Button x:Name="SearchButton" Style="{StaticResource ButtonGeneric}">
<Path Fill="{TemplateBinding Foreground}" Stretch="Fill" Height="13" Margin="2,3,3,3" Width="16" Opacity="0.85" Data="F1 M 67.9714,119.322C 67.44,120.046 66.4185,120.199 65.6947,119.664L 61.455,116.513C 59.8991,117.666 57.7977,118.009 55.8766,117.234C 52.9368,116.05 51.5074,112.694 52.6931,109.755C 53.267,108.33 54.3613,107.214 55.7741,106.613C 57.1873,106.012 58.7495,105.998 60.1725,106.573C 61.5976,107.145 62.7119,108.239 63.3136,109.652C 63.8937,111.017 63.924,112.52 63.4083,113.905L 67.6296,117.044C 68.3532,117.578 68.5067,118.598 67.9714,119.322 Z M 62.1484,113.563C 62.5918,112.463 62.5801,111.255 62.1152,110.162C 61.6493,109.07 60.7869,108.224 59.6848,107.78C 58.5854,107.337 57.3759,107.348 56.2853,107.812C 55.192,108.277 54.3457,109.14 53.9012,110.241C 52.9856,112.514 54.0893,115.109 56.3639,116.026C 58.6362,116.942 61.2303,115.838 62.1484,113.563 Z ">
<Path.Effect>
<DropShadowEffect BlurRadius="8" Color="#FFFFFFFF" Direction="100" ShadowDepth="0"/>
</Path.Effect>
<Path.OpacityMask>
<LinearGradientBrush EndPoint="0.6,1" StartPoint="0.4,0">
<GradientStop Color="#7F000000" Offset="0"/>
<GradientStop Color="#BF000000" Offset="0.25"/>
<GradientStop Color="#FF000000" Offset="1"/>
</LinearGradientBrush>
</Path.OpacityMask>
</Path>
</Button>
Замена контура (**)
Выбираем в Expression Design необходимую иконку,
и по аналогии с предыдущей частью заменяем контур Path на свой собственный, меняем ширину, высоту и отступы.
Повторить действия (*) и (**) до тех пор пока нужное кол-во кнопок не будет достигнуто :)
Протестировав приложение, видим результат на панели:
Кнопочки очень органично вписались.
Навешиваем функционал
Осталось сделать так, чтоб что-то происходило при нажатии на эти кнопки. Для этого, мы возвращаемся в наш класс CustomDataForm.
Добавим следующий кусочек кода, в котором переопределим метод OnApplyTemplate() и получим возможность работать с обработчиком события OnSearchButtonClick для кнопки SearchButton.
private ButtonBase _searchButton;
public override void OnApplyTemplate()
{
base.OnApplyTemplate();
if (this._searchButton != null)
{
this._searchButton.Click -= new RoutedEventHandler(this.OnSearchButtonClick);
}
this._searchButton = base.GetTemplateChild("SearchButton") as ButtonBase;
if (this._searchButton != null)
{
this._searchButton.Click += new RoutedEventHandler(this.OnSearchButtonClick);
}
}
private void OnSearchButtonClick(object sender, RoutedEventArgs e)
{
}
Предлагаю для теста создать некоторое модальное диалоговое окно – добавим в проект ChildWindow, и назовем его SearchWindow.xaml.
И в обработчике OnSearchButtonClick создадим его экземпляр и покажем.
private void OnSearchButtonClick(object sender, RoutedEventArgs e)
{
SearchWindow ch = new SearchWindow();
ch.Show();
}
В результате при нажатии на кнопку поиска – получаем наше окошко.
Думаю с остальными кнопками механизм понятен – действия можно сделать любые.
Понажимать кнопочку можно тут :)
Недавно я выложила набор иконок, которые можно использовать для панели навигации в Silverlight DataForm. Может возникнуть вопрос - как их применить? Есть два пути, один из которых мы рассмотрим в этой части, второй – в следующей.
Часть 1. Замена стандартных иконок на новые из набора.
Предположим, у Вас уже есть DataForm с данными. Включение навигационной панели происходит через задание у свойства CommandButtonsVisibility - различных вариантов значений, которые можно указывать поодиночно или комбинировать. Например, следующая запись CommandButtonsVisibility="Add,Navigation,Commit,Cancel" позволит отобразить панель навигации с возможностью просмотра, добавления нового элемента в коллекцию и двумя кнопками – подтверждения и отмены.
И теперь, предположим, мы хотим заменить стандартные иконки – в начало, назад, вперед, в конец – на стрелки из коллекции “Mini v2”.
Создаем копию шаблона для DataForm.
Открываем проект в Expression Blend, в панели Objects & Timeline выбираем элемент DataForm и в строке навигации по шаблонам элемента создаем копию шаблона:
Задаем подходящее название, например DataFormStyleNew и разместим его в новом файле ресурсов, например, Forms.xaml.
Определяем нужную кнопку панели навигации.
Находясь в режиме редактирования шаблона, в панели Objects & Timeline мы видим большой набор элементов, организованных соответствующим образом.
Необходимо найти StackPanel, в которой находятся наши иконки навигации – их можно визуально определить по соответствующим названиям – FirstItemButton, PreviousItemButton, etc… и значкам. Зеленая галочка на пазле указывает на то, что это - часть элемента управления.
Раскрыв, например, кнопку NextItemButton, мы видим, что эта кнопка состоит из одного контура – Path.
В качестве стиля для кнопки применяется Style="{StaticResource ButtonGeneric}", в качестве эффекта для контура – отброс тени, которые мы не будем трогать, чтобы не нарушать общую стилистику элемента. Нас интересует только замена контура, с сохранением заливки и всего остального.
Замена контура.
Открываем иконки в Expression Design. Находим стрелочку, и поворачиваем ее на 90 градусов.
Копируем XAML в буфер обмена (Edit – > Copy XAML).
Примечание: Для более эффективной работы с буфером обмена, его лучше заранее настроить. Если вы чаще всего работаете с дизайном Silverlight приложений, то укажите в качестве формата – XAML Silverlight 3 Canvas (Edit –> Options –> Clipboard(XAML)).
В режиме XAML или Split, вставляем наш код перед уже существующим контуром в кнопке. Фактически нам от нового контура нужно всего три свойства – Data, Width, Height, которые мы скопируем в старый контур:
Width="12.1772" Height="12.8996" Data="F1 M 54.3555,74.1308C 53.5271,74.1308 52.8556,73.4593 52.8556,72.6309C 52.8556,71.8025 53.5271,71.131 54.3555,71.131L 59.9113,71.131L 57.5223,68.7419C 56.9365,68.1562 56.9365,67.2064 57.5223,66.6207C 58.1081,66.0349 59.0578,66.0349 59.6436,66.6207L 64.5934,71.5705C 65.1792,72.1563 65.1792,73.106 64.5934,73.6917L 59.6436,78.6416C 59.0579,79.2273 58.1081,79.2273 57.5223,78.6416C 56.9366,78.0558 56.9366,77.106 57.5224,76.5203L 59.9118,74.1308L 54.3555,74.1308 Z "
Теперь взятый с Expression Design код XAML нам уже не нужен, и его можно сразу удалить, чтоб не мешал.
Изменение отсупов Margin.
Учитывая что дизайнеры, проектирующие панель навигации, задумали так, чтобы каждая маленькая кнопка была не более чем 19х19 (Height старого контура 9, Width - 5, Margin – влево 6, вправо 8, вверх 5, вниз 5.) Нам нужно, чтобы сумма ширины и соответствующих отступов и сумма высоты и отступов – вмещались в эти размеры. Делаем выводы, что с новыми значениями должно быть Margin – влево 3, вправо 3, вверх 3, вниз 3.
В итоге – при запуске приложения получаем новую кнопочку, которая по стилю вписывается в наше приложение, но уже более заметна.
Аналогично вышеуказанным, проделываем действия с контурами для остальных 3 кнопок. Полученную панель можно посмотреть тут.
Продолжение следует…
Для желающих почитать литературу не на английском языке – появилcя русский перевод книги Лоуренса Морони “Введение в Microsoft Silverlight 3". Конечно, кто читал 2-ую книгу (Введение в Microsoft Silverlight 2"), заметит, что есть схожие главы и содержание, но также есть и новые интересные моменты: в частности, про SketchFlow, выполнение приложений вне браузера, Photosynth, связывание данных и т.д.
Кроме того – сегодня анонсирован выход установщика Silverlight на русском языке. И еще - теперь Вы можете предоставить посетителям веб-сайтов, у кого не установлен Silverlight - ссылку на ресурс http://www.microsoft.com/rus/silverlight/.
Ну и еще одна новость – сайт Expression на русском теперь тоже обновлен!
Необходимо расширить функциональность навигационной панели в 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.
100% Zoom preview:
200% Zoom preview:
Зум избранных иконок:
Если есть пожелания – можно добавить еще иконок или что-то изменить.
Загрузить иконки “Mini” v2
[!Обновлено 23.09.2009].
Вдохновение черпается из многих источников. Просматривая старые фото лунного затмения, решила, что давно не выпускала обои с тематикой Silverlight.
Слоган “See The Light” из последних событий также стал вдохновением :) Эти обои сделаны в Expression Design. Доступные размеры указаны ниже.
seethelight_1024_768
seethelight_1280_1024
seethelight_1280_800
seethelight_1440_900
Все размеры в одном архиве
Данная тема отчасти была навеяна серией статей Бреда Абрамса о разработке бизнес-приложений с использованием Silverlight 3 и .NET RIA Services, а частично книгой Web Form Design: Filling in the Blanks (автор Luke Wroblewski). В книге рассказывается об удобном представлении для пользователя различных онлайн-форм с целью быстрого и качественного сбора информации. Про правильную разработку форм для Silverlight-приложений тут не сказано. Но, тем не менее, почему бы не применить знания с одной области для другой? Тем более что Silverlight-приложение в первую очередь является веб-приложением.
Что ж, если мы представляем себе бизнес-приложение, то в первую очередь мы думаем о том, что оно действительно должно быть профессиональным как по реализации его функциональности, так и по дизайну.
SNA, SBA
Один из легких путей в этом направлении – создание такого приложения из Visual Studio 2008 на основе шаблонов Silverlight Navigation Application или Silverlight Business Application (с поддержкой login\logout). В Expression Blend 3 при создании проекта такая возможность отсутствует. Надеемся что пока :)
Достаточно выбрать необходимый шаблон (например, Silverlight Navigation Application), нажать кнопку создания проекта и у Вас уже будет необходимая минимальная структура из двух страниц с поддержкой навигации между ними. Добавить любое другое кол-во страниц можно следующим способом:
-
в Solution Explorer кликнуть правой кнопкой мыши на папке Views, выбрать пункт Add New Item и затем Silverlight Page, задать имя страницы (например, Contact).
-
Кроме этого необходимо добавить возможность перехода на эту страничку с остальных. Для этого в файле MainPage.xaml в элементе StackPanel с названием LinksStackPanel, по аналогии с существующими гиперссылками, добавим еще одну и разделитель между пунктами в виде прямоугольника.
…
<Rectangle x:Name="Divider2" Style="{StaticResource DividerStyle}"/>
<HyperlinkButton x:Name="Link3" Style="{StaticResource LinkStyle}" NavigateUri="/Contact" TargetName="ContentFrame" Content="contact"/>
…
В том же файле MainPage.xaml можно изменить заголовок приложения в шапке, присвоив соответствующему атрибуту текстового блока с именем ApplicationNameTextBlock - новое значение. После этого, можно запустить приложение и убедиться что две базовые страницы и одна новая присутствуют, но на странице контактов пока еще ничего нет. Открываем файл Contact.xaml и нагло скопируем в него содержимое Grid-a, например, с файла Home.xaml, изменив после этого заголовок для текста.
Темы
Также, по умолчанию Ваше приложение будет оформлено в лучших традициях, а точнее, будет применена стандартная тема. Сейчас доступно 7 новых тем, которые можно загрузить с сайта Microsoft Expression, распаковать и всего лишь заменить в проекте соответствующий файл Styles.xaml. Больше править ничего не нужно. The Best of The Best, наверное, это Skyline и Aurora (также есть и для .NET RIA Services Template) а также совсем свежие - вчера добавленные Seeing Sound и Mediterranean Sun. Вряд ли кому-то приглянется розовая тема Pinky, но мало ли, все бывает :)
При желании можно подправить цвета у стандартной темы в файле Styles.xaml, а можно сделать свою тему.
Кстати, не смотря на то, что в Expression Blend нельзя создать с самого начала новый проект Silverlight Navigation Application или Silverlight Business Application, не стоит отчаиваться. Как мы уже давно все знаем, мы можем открыть в Expression Blend 3 проект, созданный в Visual Studio 2008. В этом случае тот же функционал, которым мы воспользовались для добавления новой страницы в проект – доступен и в Blend.
Ну и конечно, цвета приложения подправить и поменять проще будет также в Blend. В закладке Resources мы видим полный список кистей и стилей.
Добавление формы
Основные минимальные приготовления мы сделали, теперь пришло время вернуться к формам. Кому ближе Expression Blend 3 – тот может остаться в этом инструменте. Кому – Visual Studio 2008 – тоже пожалуйста. Ради эксперимента даже можно открыть и поработать над проектом через Visual Studio 2010 Beta 1.
Открываем в Expresssion Blend 3 файл Contact.xaml.
В Expression Blend 3 есть замечательная панель Assets, которую всегда можно держать под рукой. Воспользовавшись поиском, найдем элемент управления DataForm, который нам как раз и нужен для добавления на страницу контактов.
И перетаскиваем его на рабочую область, так чтобы он находился в элементе StackPanel с именем ContentStackPanel.
Наш элемент формы в коде выглядит так:
<dataFormToolkit:DataForm />
Теперь добавим в наш проект небольшой класс ContactPerson
public class ContactPerson
{
public string FirstName { get; set; }
public string EmailAddress { get; set; }
public string Subject { get; set; }
public string Text { get; set; }
}
Для тестирования добавим в ресурсы нашей страницы контактов следующую запись:
<navigation:Page.Resources>
<local:ContactPerson
FirstName="" EmailAddress="" Subject="Message from site"
Text="Hello, " x:Key="MyContact" />
</navigation:Page.Resources>
В качестве текущего элемента для формы укажем наш ресурс:
<dataFormToolkit:DataForm CurrentItem="{StaticResource MyContact}" >
Можно прописать вручную в коде, а можно выбрать через панель свойств:
После чего уже в рабочей области Expression Blend 3 у Вас покажутся заветные поля.
Запустив приложение, и перейдя на нашу страницу контактов, мы увидим следующее:
Настройка формы
Теперь мы уже подошли гораздо ближе к настройке и изменению внешнего вида нашей формы.
Первое, что сразу бросается в глаза, это название меток к полям. Мы воспользуемся механизмом атрибутов для данной настройки.
Атрибуты – как подсказка к полям
Первое, что сделаем, в файле ContactPerson.cs подключим соответствующее пространство имен:
using System.ComponentModel.DataAnnotations;
Теперь, сделаем следующие изменения в нашем классе ContactPerson:
public class ContactPerson
{
[Display(Name="First Name:")]
public string FirstName { get; set; }
[Display(Name="Your e-mail:")]
public string EmailAddress { get; set; }
[Display(Name = "Subject:")]
public string Subject { get; set; }
[Display(Name="Your message:")]
public string Text { get; set; }
}
Теперь после запуска, мы увидим, что текст наших меток поменялся.
На этом возможности атрибутов не заканчиваются. Хорошим тоном будет задание подсказки к полям. Например, можно указать, какие являются обязательными для заполнения, либо дать какую-то расшифровывающую информацию.
Делается это с помощью задания второго параметра Description для атрибута:
[Display(Name = "Your e-mail:", Description = "Required. We could contact with you by e-mail.")]
После чего, в вашем приложении, возле соответствующего поля появится маленькая иконка ( i ), наведя мышку на которую – появится подсказка.
Кнопки
Нам необходимо несколько кнопок для нашей формы. Укажем следующие свойств для формы:
AutoCommit="True" CommandButtonsVisibility="Commit,Cancel" CommitButtonContent="Send" CancelButtonContent="Cancel"
Валидация
Отдельным атрибутом [Required()] можно указать обязательные поля.
Визуально они будут показаны более жирным текстом. Если поле не заполнено, то после нажатия кнопки отправки – будет выведено сообщение об ошибке.
Также с помощью атрибутов можно провести проверку на корректность ввода, например для e-mail это будет выглядеть следующим образом:
[RegularExpression(@"[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?", ErrorMessage="Provide valid e-mail")]
В итоге, если форма заполнена некорректно, то после нажатия кнопки “Send” мы увидим следующее:
Улучшение внешнего вида формы
Теперь хотелось привести некоторые советы по расположению элементов формы и их внешнего вида.
Позиционирование меток
Существует три общераспространенных метода расположения меток к полям ввода.
- Метки, выровненные по верхнему краю
- Метки, выровненные по правому краю
- Метки, выровненные по левому краю
Метки, выровненные по верхнему краю
Этим элементам характерны следующие утверждения:
- Собираемые данные известны и легко вспоминаемы
- Необходимо минимальное время для заполнения
- Требуется больше вертикального пространства
- Требуется больше пространства между элементами или дополнительного контраста
- Гибкость для локализации
С помощью свойства LabelPosition="Top" для элемента dataFormToolkit:DataForm есть возможность расположить метки, выровненные по верхнему краю.
Метки, выровненные по правому краю (по умолчанию в DataForm)
Этим элементам характерны следующие утверждения:
- Очевидная ассоциация между меткой и полем
- Требует меньше вертикального пространства
- Тяжелее визуально сканировать метки (мы привыкли читать с левого края)
- быстрое время заполнения формы
Метки, выровненные по левому краю
Этим элементам характерны следующие утверждения:
- Собираемые данные неизвестны или трудно вспоминаемы
- Легкое визуальное сканирование меток
- Менее очевидная ассоциация между меткой и полем
- Требует меньше вертикального пространства
- изменение длины метки может нарушить положение остальных элементов
Рекомендации по выбору выравнивания меток:
- Для уменьшения времени заполнения форм легко вспоминаемыми данными - используйте выравнивание по верхнему краю
- Когда необходимо экономить вертикальное пространство экрана - используйте выравнивание по правому краю
- При заполнении формы большим кол-вом данных или трудно вспоминаемыми данными используйте выравнивание по левому краю
Группировка контента
Если форма содержит большое кол-во полей, используйте релевантную группировку контента. Это позволит организовать форму более эффективно и позволит осуществить более быстрый визуальный поиск. Группы можно разделить большим пространством между группами, цветом фона, рамкой.
Обязательные для заполнения поля
Мы с вами рассмотрели - как с помощью атрибутов можно указать обязательные для заполнения поля.
Еще некоторые общие рекомендации
- Старайтесь избегать необязательных полей
- Если большинство полей обязательны - поставьте визуальные отметки возле необязательных полей
- Если большинство полей необязательны - поставьте визуальные отметки возле обязательных полей
- Информационная иконка с текстом - замечательный элемент. Но обычная * работает эффективнее
Помощь в заполнении формы
Один из способов, который мы с Вами рассмотрели – подсказки к полям. Положение этой иконки также можно поменять. По умолчанию она справа. Но ее можно расположить между меткой и полем для ввода, что гораздо удобнее при длинных полях ввода.
Сделать это можно с помощью свойства DescriptionViewerPosition="BesideLabel"
Общие рекомендации
- Минимизируйте кол-во подсказок, необходимых для заполнения формы
- При большом кол-ве данных, обязательных для заполнения - используйте динамическую систему отображения подсказок
Взаимодействие с пользователем
Если форма содержит большое кол-во полей - покажите прогресс заполнения формы. Если путь заполнения формы нелинейный - расставьте индексы табуляции.
Итоги
Сегодня мы рассмотрели аспекты создания форм и повышение их юзабилити. Конечно же, мы не рассмотрели еще стилизацию элементов формы. Но об этом в следующий раз :)
Что можно почитать и посмотреть:
Пакет Expression Studio 3 уже появился в MSDN подписке! Также доступны триал-версии всех продуктов Expression Studio 3. Загрузите на Ваш выбор:
- Expression® Studio 3,
- Expression Web 3,
- Expression Blend 3 + SketchFlow,
- Expression Design 3,
- Expression Encoder 3.
Напомню, что теперь расклад по коробкам немного поменялся. Теперь полная Expression Studio 3 включает в себя:
- Expression Blend™ + SketchFlow,
- Expression Web,
- Expression Design,
- Expression Encoder.
Как видите, продукт Expression Media – уже не входит сюда.
Также появилось еще одно коробочное решение, которое так и называется Expression Web 3 – ориентировано на дизайнеров и верстальщиков и включает следующее:
- Expression Web + SuperPreview,
- Expression Design,
- Expression Encoder.
Т.е. без возможности разрабатывать приложения Silverlight и WPF.
В подписку же Expression Professional Subscription входит:
- Expression Blend + SketchFlow
- Expression Web
- Expression Design
- Expression Encoder
- Visual Studio® Standard
- Office Standard
- Office Visio® Professional
- Windows® XP
- Windows Vista® Business Edition
Что еще нового сегодня и за неделю:
И небольшая статистика на данный момент по Silverlight c RiaStats:
По всем странам
- Not Detected – 67,56 %
- Silverlight 3 -0,69 %
- Silverlight 2 – 30,07 %
- Silverlight 1 – 1,66 %
United States
- Not Detected – 70,26 %
- Silverlight 3 -0,5 %
- Silverlight 2 – 27,31 %
- Silverlight 1 – 1,93 %
Украина
- Not Detected – 39,15 %
- Silverlight 3 -17,29 %
- Silverlight 2 – 43,00 %
- Silverlight 1 – 0,54 %
В общем, интересная картина :)
Появилось еще одно обновление - Microsoft .NET RIA Services July 2009 Preview. Обзорная документация также прилагается.
Постараюсь перечислись впечатления от первого взгляда на продукты, кое-что было раньше, кое-что новое...
Silverlight 3 RTW (3.0.40624.0),
Silverlight™ 3 SDK,
Silverlight™ 3 Tools for Visual Studio 2008 SP1,
Expression Blend 3 + SketchFlow RC,
Deep Zoom Composer
Expression Blend 3
Доступный триал на 60 дней полностью функционален. В нем есть всеми ожидаемый SketchFlow – инструмент для прототипирования интерфейсов Silverlight & WPF.
Новый инсталлятор
Можно было ожидать от дизайнерской команды Expression улучшений в плане дизайна интерфейса. Красивый инсталлятор уже порадовал взгляд. А объем окна запуск продукта существенно стал меньше.
Создаем проект
Окно создания нового проекта для Silverlight содержит следующий выбор:
- Silverlight 3 App + Website
- Silverlight 3 App
- Silverlight 3 Control Library
- Silverlight 3 SketchFlow App
И для WPF
- WPF App
- WPF Control Library
- WPF SketchFlow App
Рабочее пространство
Создадим для примера самое первое приложение Silverlight 3 App + Website. Рабочее область документа в Blend 3 как и в Preview версии осталась без изменений. Также сохраняется принцип пристыковки панелей к разным частям области приложения.
Среди новых панелей стоит выделить Assets – быстрый способ организации элементов управления, стилей, поведений, эффектов и т.д.
Аналогично кнопка Assets на панели инструментов значительно изменилась по своему оформлению и структуре. Обратите внимание на увеличенный список элементов управления и их новые значки :) в закладке Controls.
Панель Parts – гораздо проще стал скиннинг элементов управления.
Панель Data – уже знакомые нам образцы данных и сценарий Master/Details.
Панель States – более понятный и улучшенный интерфейс. Детальнее остановимся позже.
Панель Projects – качественное превью графических файлов.
На рабочий холст документа теперь можно добавлять аннотации: Tools –> Create Annotation. Появляется желтый листик с именем автора, датой, временем, заметкой. Автосокрытие работает.
Запуск проекта в браузере
Blend награждает теперь каждый созданный в нем проект – своей отметкой. Чтоб сразу стало понятно кто в чем делает Silverlight проекты :) favicon.ico файл выглядит в виде буквы B на голубом фоне.
Импорт
Expression теперь дружит с компанией Адоби :) Импорт файлов Photoshop & Illustrator. Окно импорта впечатляет. А еще интересный пункт PowerPoint.
Трансформация объектов
Логично что добавлена панель для Projection. Вращение объекта прямо на сфере с помощью мышки…
Binding
Фишка Silverlight 3 - Element2Element binding – визуальными средствами.
SketchFlow
Долго ждали этого инструмента прототипирования интерфейсов. Можно рассказывать, показывать, но лучше это просто попробовать. Зарисовки на салфетках уже в прошлом? Отнюдь нет. Просто это новый следующий этап, на котором Вы создаете полнофункциональные прототипы, взаимодействие с пользователем, анимации, отображение данных…. При чем это не какое-то там “левое” приложение, это реальное приложение Silverlight или WPF. Коротко о доступном интерфейсе:
Панели присущие этому приложению:
- SketchFlow App (по сути граф приложения)
- SketchFlow Animation
- Feedback
Импорт
PowerPoint? Немного ошарашила такая неожиданная возможность. А почему бы и нет?
SketchFlow Player
Окошко в окошке заказывали? По запуску приложения Вы немного удивитесь. Оно будет в окошке специального плеера, который обрамляет панелями навигации, отзывов, карты приложения.. Клиент хочет оставить отзыв? Пожалуйста.
В общем пробуйте. Детальнее – чуть позже. Для тех кто не видел и хочет посмотреть видео про SketchFlow и Blend, правда Preview – можно посмотреть на сесиях ReMix09
Конечно, есть вещи которые поменялись, но многое осталось.
Silverlight 3
Сейчас все изменения не буду перечислять, напишу то, на что обратилось внимание:
Выполнение приложений Silverlight вне браузера
Чтобы включить функциональность Silverlight-приложения, выполняющиеся вне браузера, необходимо внести некоторые изменения в манифест приложения.
Файл АppManifest.xml, находящийся в папке Properties теперь должен выглядеть немного по-другому:
<Deployment xmlns="http://schemas.microsoft.com/client/2007/deployment"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
EntryPointAssembly="SL1"
EntryPointType="SL1.App">
<Deployment.Parts>
</Deployment.Parts>
<Deployment.OutOfBrowserSettings>
<OutOfBrowserSettings ShortName="Simple Out-of-Browser App">
<OutOfBrowserSettings.Blurb>
Do really cool stuff at home or on the go.
</OutOfBrowserSettings.Blurb>
<OutOfBrowserSettings.WindowSettings>
<WindowSettings Title="SL App's Title"></WindowSettings>
</OutOfBrowserSettings.WindowSettings>
</OutOfBrowserSettings>
</Deployment.OutOfBrowserSettings>
</Deployment>
Silverlight 3 SDK
Более 100 новых элементов управления...
Deep Zoom Composer
Сегодня вышедшая версия Deep Zoom Composer не сильно отличается от June Release 2009. Но это уже не маленький инструмент как раньше, с помощью которого можно просто растаскивать и совмещать картинки и экспортировать в DeepZoom коллекции. Тут уже масштабные галереи можно создавать с мега-функциональной навигацией. Поддержка:
- добавление ссылок (внутренни и внешние)
- создание меню
- слайдшоу
В генерируемом Silverlight –приложении улучшен инструмент зума и выбора объектов для просмотра.
Недавно, в процессе очередного поиска идей по оптимизации интерфейса, на глаза попался один занимательный пост “12 Standard Screen Patterns” (автор Theresa Neil). Указанные шаблоны по отдельности многим из Вас знакомы и каждый из нас ежедневно сталкивается с их воплощением в различных приложениях. Но в этом документе (также доступном в формате pdf) они собраны и описаны вместе, наведена их структура и классические примеры, а также дельные советы по реализации. Рекомендую для ознакомления разработчикам, дизайнерам, архитекторам, менеджерам проектов и всем-всем-всем…
После прочтения мне вспомнилось одно из нововведений, которое уже есть в Blend 3 Preview. Это так называемый сценарий Master/Detail, реализация которого доступна визуальными средствами с помощью режимов List Mode и Detail Mode панели Data. С некоторыми нововведениями, коснувшимися данной панели мы уже познакомились ранее на примере генерации образцов данных.
Master/Detail
Прежде чем мы рассмотрим этот сценарий в Blend, дадим ему общее вводное описание. Данный сценарий позволяет пользователю перемещаться по списку элементов и просматривать при необходимости детальную информацию об отдельном элементе, оставаясь при этом в пределах одного экрана. Бывает вертикальная и горизонтальная компоновка панелей Master/Detail.
Если брать вертикальную компоновку (1 рис.) то панель Master обычно представлена в левой части списком, деревом, панелью-аккордеоном или таблицей.
Панель Detail может включать в себя текстовое описание, иконки-миниатюры, таблицы, списки, графы или диаграммы, формы и т.п. - любое другое детальное описание-расшифровку элемента из панели Master.
Горизонтальная компоновка (2 рис.) используется тогда, когда пользователю необходимо предоставить гораздо больше детальной информации чем просто описание и несколько полей с небольшим или средним изображением.
Панель Data в Blend: List Mode
После того, как Вы добавили коллекцию данных в проект, включите режим List Mode на панели Data. Выделив нужное кол-во полей, перетащите их на рабочий холст.
Blend автоматически создаст ListBox, а также DataTemplate, включающий выбранные свойства коллекции.
Панель Data в Blend: Detail Mode
Следующий шаг – переключение в Detail Mode на той же панели Data. Аналогичным образом выберите нужное кол-во свойств в коллекции и перетащите их снова на рабочий холст в свободное место. Blend сгенерирует Grid, содержащий заголовки выбранных свойств и соответствующие им значения. Заголовки при желании можно переименовать или совсем удалить, так как, например, название свойства Image возле картинки будет смотреться не столько объясняющим, сколько неуместным.
DataContext
Для того чтобы по нажатию на элемент в ListBox-e – у нас в режиме Detail отображались нужные данные, необходимо сделать еще некоторые действия. По крайней мере для версии Blend 3 Preview. В панели Objects & Timeline выделяем сгенерированный Grid, который отображает детальную информацию. В панели свойств Properties для нашего Grid-а находим свойство DataContext, и выбираем в меню Data Binding…
Далее на закладке Element Property выбираем свойство Selected Item вышеуказанного ListBox-а.
Таким образом, запустив наше приложение мы получим работающий сценарий Master/Detail. Выделяя нужный элемент списка, справа мы получаем детальную информацию о нем.
Как мы убедились, фактически не написав ни строчки кода, только визуальными средствами в Blend теперь можно реализовать такой полезный сценарий.
Если Вы только начинаете разрабатывать Ваше приложение и необходимо где-то взять данные для временного наполнения и тестирования приложения, то Вам пригодится одно из последних нововведений в Blend 3 (что доступно уже сейчас в Preview версии) - возможность генерировать примеры данных прямо в Blend.
Доступна данная возможность через панель Data (для ее отображения можно выбрать в меню Window). Ранее в Blend 2 закладка Data была привязана к панели Project и имела более ограниченный набор возможностей как для Silverlight-приложений так и для WPF.
Теперь в Blend 3 эта закладка вынесена в отдельную панель. Возможности по работе с реальными “живыми” данными вынесены в правую иконку (отмечено зеленым), а работе с примерами данных соответствует новая иконка “Add sample data source”. Что мы сейчас и рассмотрим.
Добавление примеров данных
После нажатия на иконку, и выбора пункта “Define New Sample Data” у Вас появится окно с выбором названия для коллекции данных, предложением выбора области видимости данных – только в текущем документе или в пределах всего приложения. Кроме этого можно сразу поставить галочку для активирования данных в момент запуска приложения (по умолчанию она снята).
После этого в панели Data у Вас появится коллекция с добавленным по умолчанию одним свойством.
Кроме визуального отображения произошли еще некоторые изменения. В файл App.xaml в <Application.Resources> автоматически добавилась строка <SampleData:MyData x:Key="MyData" d:IsDataSource="True"/>
В самом проекте тоже произошли изменения.
Добавлена папка SampleData с подпапкой, соответствующей названию, которое Вы задали для набора данных. В ней содержится автоматически генерируемые xsd-файл, xaml-файл и cs code-behind. Их редактировать вручную не рекомендуется, что указано в заголовках обоих файлов. Но посмотреть что они собой представляют Вы всегда можете :)
Вернемся к нашим примерам данных. Кликая на названии базового свойства, Вы можете поменять заголовок на более подходящий, а кликнув на + напротив Collection – добавить новое требуемое свойство.
Напротив каждого свойства доступна иконка ABC для изменения его типа. Что для нас и представляет интерес.
В данном окошке мы можем выбрать один из следующих типов:
- String
- Number
- Boolean
- Image
Для каждого из этих типов есть некоторые настройки, например для строкового значения доступны следующие форматы:
- Lorem Ipsum (для тех кто не знает что это, можно ознакомится на сайте http://uk.lipsum.com/) – можно задать даже кол-во слов и мах длину слова
- Name
- Phone number
- E-mail Address
- Web-site url
- Address
- Company name
- Date
- Time
- Price
После того как Вы определились какие свойства Вам нужны и каких типов (я для примера остановилась на свойствах Image, Price, ProductName, ShortDescription, Store, Supplier, SupplierDate), пришло время добавить данные в приложение.
Для этого Вам необходимо оставить включенной по умолчанию иконку ListMode и поставить свой выбор на Collection.
После чего, перетаскивая мышкой Collection на рабочий холст, автоматически создается ListBox, наполненный Вашими данными.
Обратите внимание на то, в каком виде отображаются данные. Для изображения по умолчанию берется набор картинок, поставляемых с Expression Blend – это стулья-кресла. Для свойства, тип которого выбран Price – автоматически сгенерировано числовое значение, и добавлен знак валюты перед ним. Для ProductName и ShortDescription был выбран тип Lorem Ipsum, но для ProductName - кол-во слов 2, а для ShortDescription – 10. Для Store был выбран тип Boolean, и отображение в этом случае ckeckbox-a полностью оправдано.
Вы можете протестировать приложение с этим Listbox-ом, чтобы убедиться что он полностью рабочий.
Настройка данных
В любом случае, Вы можете полностью в дальнейшем настраивать свойства коллекции данных и изменять их типы. Например, с большой вероятностью Вам не подойдут изображения стульев для данного приложения. Вы можете поменять их, выбрав папку со своими собственными картинками, вместо тех, которые предлагает Blend.
Выбранная Вами папка с изображениями автоматически добавится в подпапку SampleData для Вашего проекта и произойдет обновление Listbox.
Если все же и данный вид не устраивает, можно сделать более тонкую настройку для генерируемых данных.
Для этого нажимаем на иконку “Edit sample values” напротив Collection
и попадаем в окно с расширенными настройками,
в котором Вы можете быстро посмотреть какие свойства у Вас есть, поменять их тип. Кроме того, дважды кликнув на определенной ячейке, можно вручную подправить некоторые текстовые, числовые значения есть они не устраивают, либо поменять изображение, если подряд идут два одинаковых. Также можно выбрать кол-во записей для отображения.
Изменение шаблона элемента в Listbox
Как для обычного Listbox-a, так и для этого, Вы можете всегда настроить шаблон элемента (ItemTemplate).
В режиме редактирования ItemTemplate, выделяя отдельный пункт-свойство, и перемещая его положение относительно других прямо на рабочем холсте, можно поменять порядок расположения свойств.
Учитывая то, что все эти свойства для отдельного элемента Listbox расположены в StackPanel, изменив ориентацию с вертикальной на горизонтальную можно поменять расположение свойств отдельного элемента.
Ну и так далее, по направлению фантазии можно добиться нужного наполнения и отображения наших данных.
Еще один, пожалуйста
Если Вам необходимо несколько видов представлений одних и тех же данных, не обязательно перетаскивать всю коллекцию и создавать Listbox со всеми элементами и их свойствами, которые Вы определили. Можно выбрать часть из них, зажав Ctrl, и перетащить на рабочий холст нужное кол-во. В этом случае тоже создастся Listbox, только свойств у отдельного элемента будет меньше.
В общем, как мы убедились, доступна очень хорошая новая возможность. Теперь не нужно ломать голову где взять образцы данных для приложения, а можно быстро сгенерировать их прямо в Blend.
Вышло обновление .NET RIA Services May 2009 Preview. Добавлен шаблон New Business application, исправлено большое кол-во ошибок, указанных на форуме, на http://code.msdn.microsoft.com/RiaServices опубликованы различные примеры, такие как Authentication, XML Metadata provider, Linq2Sql Domain Provider, SilverlightStore SEO. Обновлен asp:DomainDataSource для работы с Dynamic Data. В самой документации по .NET RIA Services May 2009 Preview также рассмотрено много примеров.