Expression blend, основні особливості роботи

Побудова власних проектів в Expression Blend ви почнете трохи пізніше, а до тих пір розглянемо коротко основи роботи в цій інтегрованому середовищі розробки на прикладі завантаження одного з доступних в ній прикладів проектів. Це буде корисно для вас в тому відношенні, що ви зможете переконатися на власні очі, як створюється реальний проект, а по ходу справи - отримати більш повне уявлення про тих видах додатків, які можна створювати на платформах WPF і Silverlight.

Якщо діалогове вікно New Project все ще відкрито в середовищі Expression Blend IDE, натисніть клавішу щоб повернутися до екрана привітання. (Якщо ви вже закрили діалогове воно New Project, то повернутися до екрана привітання ви зможете по команді меню Help -> Welcome Screen). Але в будь-якому випадку клацніть на вкладці Samples (показано на малюнку), де знаходиться ряд вбудованих в Expression Blend прикладів проектів:

Конкретний перелік прикладів проектів залежить від версії Expression Blend, тому не особливо переймайтеся, якщо цей перелік не збігається у вас з тим, що наведений на малюнку. Тут і далі буде розглядатися приклад проекту Silverlight типу ColorSwatchSL. але ви вільні завантажити будь-який інший приклад проекту для подальшого вивчення.

Завантаження прикладу проекту в Expression Blend

Перш ніж заглиблюватися у вивчення інтегрованого середовища розробки Expression Blend, пояснимо, яким чином проект виконується в Expression Blend, щоб ви могли самі тестувати розробляється в ньому додаток.

При натисканні клавіші або комбінації клавіш в Expression Blend створюється і виконується поточний проект. Якщо ви створюєте додаток на платформі WPF, кінцевий результат, як правило, являє собою нове вікно, що з'являється на робочому столі операційної системи вашого комп'ютера. А якщо створюєте новий додаток на платформі Silverlight, то у вікні використовуваного вами за замовчуванням браузера завантажується і відображається веб-сторінка, на якій розміщується цей додаток.

Отже, виконайте проект ColorSwatchSL. Зверніть увагу на те, що при переміщенні курсору миші по кольоровим смужках вони висуваються на передній план завдяки спеціальній анімації. Якщо ви клацнете на одній з кольорових смужок, з'явиться область "подробиць" завдяки ще одній анімаційної послідовності. На малюнку показаний один з можливих результатів пробного виконання даного проекту:

По завершенні пробного виконання прикладу проекту ColorSwatchSL закрийте вікно браузера і поверніться до Expression Blend.

монтажний стіл

Монтажний стіл розташовується в самому центрі вікна Expression Blend і є чи не найпершим компонентом цієї інтегрованої середовища розробки, який відразу ж знаходить застосування. Адже цей візуальний конструктор служить для створення зовнішнього вигляду будь-якого вікна в додатку WPF або елемента користувальницького інтерфейсу додатку Silverlight.

Зліва внизу на монтажному столі розташований ряд елементів управління, які, як і слід було очікувати, називаються елементами управління монтажного столу. З їх допомогою ви можете змінювати загальний вигляд поверхні цього візуального конструктора:

Зліва в області елементів управління монтажного столу знаходиться елемент управління масштабуванням. за допомогою якого можна змінювати розміри поверхні візуального конструктора. Маніпулюючи цим елементом управління, ви виявите, що він представляє собою комбінований елемент управління, в якому можна ввести конкретне значення, вибрати попередньо встановлене значення зі списку, задати масштаб, клацнувши лівою кнопкою миші і утримуючи її до тих пір, поки курсор не опиниться на потрібній величиною масштабу, як при переміщенні повзунка по смузі прокрутки. Можливість змінювати розміри поточного монтажного столу виявляється дуже корисною при створенні, серед іншого, елементів управління із спеціальним вмістом, шаблонів прив'язки даних і спеціальних стилів оформлення.

Далі по порядку слідує елемент управління, позначений знаком математичної функції (fx) і службовець для включення або відключення будь-яких ефектів візуалізації, що накладаються на елемент призначеного для користувача інтерфейсу в візуальному конструкторі.

До складу Expression Blend входить цілий ряд попередньо заданих візуальних ефектів, в тому числі ефект падаючої тіні. При побудові вишуканих призначених для користувача інтерфейсів у вас може періодично виникати потреба приховувати подібні візуальні ефекти на час конструювання, щоб було зручніше налаштовувати основні елементи призначеного для користувача інтерфейсу. У розглянутому тут прикладі проекту візуальні ефекти не застосовуються, тому якщо ви клацнете на кнопці fx, то нічого особливого не станеться.

Далі йдуть три елементи управління за допомогою яких можна задавати реакцію монтажного столу на розташування на ньому елемента користувальницького інтерфейсу. Якщо клацнути на кнопці Show snap grid (Показати сітку для прив'язки), на поверхню візуального конструктора буде накладена сітка. Після цього можна активізувати одну з двох інших кнопок: Turn on snapping to gridlines (Включити прив'язку до ліній сітки) або Turn on snapping to snaplines (Включити прив'язку до ліній прив'язки).

Якщо включений режим прив'язки до ліній сітки, то при переміщенні об'єкта поверхні монтажного столу він буде прив'язуватися або відв'язувати від найближчих горизонтальною і вертикальною ліній сітки. Такий режим прив'язки може виявитися корисним при вирівнюванні положення кількох елементів управління користувальницького інтерфейсу по горизонталі або по вертикалі.

Режим прив'язки до ліній прив'язки виявляється корисним в тому випадку, якщо потрібно, щоб два або три елементи призначеного для користувача інтерфейсу були розташовані відносно один одного цілком певним чином. Так, активізувавши режим прив'язки до ліній прив'язки, ви зможете домогтися розташування тексту в обох елементах управління на одній і тій же горизонтальній лінії. У цьому режимі можна так само прив'язувати елементи управління до осередків диспетчера компонування по сітці або ж за вказаною величиною заповнення або проміжку між пов'язаними елементами.

Але перш ніж переглядати і правити подібну розмітку, вам доведеться перейти від кнопки Design (Конструювати) до кнопки XAML або Split (Розділити). Всі ці кнопки знаходяться в правому верхньому кутку монтажного столу: