Expression Blend для разработчиков Silverlight - Приложения для обмена сообщениями (чат) - первые шаги
ОГЛАВЛЕНИЕ
Приложения для обмена сообщениями (чат) - первые шаги
Мы начнем с перехода в режим дизайнера, затем зажмем клавишу Сontrol и затем при помощи колесика мыши увеличим отображаемое таким образом, чтобы вы смогли разглядеть всю табличную сетку.
В случае отсутствия колесика на вашей мышке вы можете изменить план просмотра при помощи значения (либо вписав любое значение) в нижней части окна дизайнера или при помощи опций меню View®Zoom In и View®Zoom Out
Вы можете переместить поверхность нажав на инструмент "рука" и затем при помощи мыши щелкать и перетаскивать окошко, либо выполнить это при помощи полос прокрутки. Взгляните на правый верхний угол вашей табличной сетки (рисунок 5-7)
Рисунок 5-7. Правый верхний угол табличной сетки
Наведя курсор над верхним левым углом вы увидите информацию о том, на каком уровне редактирования внешнего вида вы находитесь - редактирования табличной сетки, либо полотна (Canvas). Если вы находитесь на уровне полотна, щелчок вернет вас на уровень редактирования табличной сетки. Вы можете создавать строки и столбцы просто прокручивая по отступам и щелкая в местах, где вам необходимо расположить строки и отступы, как это показано на рисунке 5-8
Рисунок 5-8. Создание строк при помощи мыши
Сразу же после того, как вы щелкнете по рамке, появится иконка открытого замка над и под созданной строкой. Я добавлю две линии - одну для верхней строки, и вторую для нижней, тем самым явно создав строку между ними, при этом у нас будет три замка как это показано на рисунке 5-9.
Рисунок 5-9. Создание нижней строки
Обратите внимание на то, что сразу после создания строки отображаются не только иконки замков, но и курсор изменяет свою форму чтобы указать вам на то, что вы можете переместить, а также изменить размер строк.
Открытые замки обозначают то, что строки будут изменять свой размер в зависимости от размера окна обозревателя (в котором будет запущено ваше приложение Silverlight). Нам необходимо реализовать такое поведение для средней строки, при этом верхняя и нижняя строки должны иметь фиксированные размеры, поэтому щелкните по верхнему и нижнему замку и затем по опции обзора в режиме разделения для того, чтобы увидеть эффект данных изменений в XAML, как это показано на рисунке 5-10.
Рисунок 5-10. Средняя строка имеет динамические размеры
Обратите внимание на то, что в определении средней строки свойство высоты (Height) установлено в значение * (звезда) - строка будет занимать все оставшееся пространство после распределения всех других строк.
Создание колонок
Давайте создадим две колонки: справа маленьку, которая будет обладать фиксированными размерами, а слева колонку побольше, обладающую динамическими размерами. Вы можете теперь это выполнить без посторонней помощи.
Настройка фонового цвета
Нам скорее всего понадобится придать всему приложению синий фон, но для того, чтобы сделать фон более элегантным, мы будем использовать линейную градиентную кисть. Чтобы реализовать это вам понадобится пройти через следующие шаги (отображенные также на рисунке 5-11).
- Щелкните по табличной сетке (Layout Root) в панели Interaction
- Щелкните по панели свойств и раскройте закладку кистей (Brushes). Щелкните по кисти фона (Background)
- Щелкните по кнопки градиентной кисти (Gradient Brush)
- Добавьте некоторые остановки путем щелканья во время заливки градиентом
- Затем манипулируя шкалой цвета
- Передвигайте точку цвета в конкретный цвет
Рисунок 5-11. Добавление градиентной заливки фона
Добавление кнопки отправки сообщений
Следующим шагом будет добавление кнопки к правому нижнему углу. Нажмите на кнопку в инструментарии и перетащите ее в соответствующее место на форме, затем щелкните по окошку свойств. Далее откройте закладку Layout и установите ширину (Width) и высоту (Height) в значение Auto и установите небольшое значение (к примеру 4) для отступа (Margin) со всех сторон. Это заполнит пространство, при этом отделив его от колонки и строки.
Значение, которое вы занесете в закладке свойств не будет использовано пока вы не покинете поле заполнения (то есть, нажмете клавишу tab)
Кое-что все же необходимо упомянуть об Layout Panel (Рисунок 5-12)
Рисунок 5-12. Установка внешнего вида кнопки при помощи панели внешнего вида (Layout)
Для начала вам понадобится уставить ширину и/или высоту в значение auto нажав на кнопку, расположенную справа от поля. Во-вторых, при установке конкретных значений (не стандартных) вы увидите белую точку рядом с измененным свойством (всего на рисунке 5-12 вы можете заметить 5 точек).
Исследуйте Xaml, как только вы установите данные значения,
<Button HorizontalAlignment="Stretch" Margin="4,4,4,4" VerticalAlignment="Stretch" Grid.Column="1" Grid.Row="2" Content="Button"/>
Blend преобразовал ваши значения в Xaml для того, чтобы в результате у элемента был вид, который хотели ему придать. Тем не менее, мы забыли изменить свойство "Content" с Button на "Send". Простейшим путем будет написание слова Content в свойство Search box,
В позиции "co" вы получите "Column", "Horizontal Content", "Data Content" и "Content" как это показано на рисунке 5-13
Рисунок 5-13. Поиск с "co"
Пересмотрите свой поиск и вы сможете немного уменшить уровень сложности, как это показано на рисунке 5-14,
Рисунок 5-14. Преобразованный поиск
В любом случае, удалите слово Button из поля Content и впишите слово Search. Следующим шагом будет установка размера шрифта в значение 18 и его тип в Verdana, а также установка его свойства в Bold. (Сделать это необходимо в Xaml!)
Некоторые элементы управления имеют текстовое свойство (text) и многие имеют свойство содержимого (content). Те, которые обладают свойством content зачастую заполняют его текстом, но его можно заполнить любым значением, а также любым элементом управления.
Рисунок 5-15. Настройка типа шрифта (Font) и многое другое