Нин Чжан блог

Введение

XAML является основным изобретением WPF и XMAL "программирование" является важной частью WPF / Silverlight развития. Хотя XAML является XML и может быть автором вручную, в основном, предназначены для инструментов, поэтому хорошие инструменты разработки являются более важными для XAML, чем для других языков, таких как C # или HTML. Смешайте в XAML является то, что Visual Studio заключается в C #. Есть много хороших учебников и документов для Blend, как Джесси Свобода Expression Blend для разработчиков . Это сообщение больше похоже на "ЖЖ смесь в течение 15 минут", с целью дать краткий обзор и руководство по использованию смесь для разработчиков, которые авторской XAML в основном в Visual Studio или блокнот, и поэтому они будут заинтересованы и знают, как приступить к работе в использовании Смешайте.

Управление проектами

Смешайте дубликатов много визуальных функциональных студии и имеет отличную интеграцию с ним. Очень часто (и даже рекомендуется, я должен сказать), чтобы иметь WPF / Silverlight проект открыт в обоих смесь и Visual Studio, используя смесь для XAML авторинга и Visual Studio для C # кодирования (или любой другой язык вам больше нравится), а также с использованием либо или как для управления проектами.

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

• Меню: File, Edit, проектов и помощи меню очень похожи на те, в Visual Studio. Через эти меню, вы можете создать / открыть WPF / Silverlight проекты, добавлять элементы / ссылки и т.д., и даже построить и запустить решение, как и в Visual Studio.
  
• Проект группы: он очень похож на обозревателе решений Visual Studio. Вы можете щелкнуть правой кнопкой на любом .xaml / .cs файл в проект панели и выберите "Edit в Visual Studio", и проект, и выбранный файл будет открыт в Visual Studio для редактирования.
  
• Результат панели: на вкладке Вывод и ошибки вкладки похожи на окно вывода и Список ошибок окна в Visual Studio.

Пользовательский интерфейс Authoring

Пользовательский интерфейс авторской делается в основном за счет трех групп:

Объекты и Хронология группы

Объекты панели делает логическую структуру дерева очень ясно. Легко ориентироваться в логическом дереве сворачивание / разворачивание / выбор элемента в дереве или реструктуризации дерево с помощью перетаскивания элементов по дереву. Выбранный элемент выделяется в панели объектов, и в обоих зрения дизайна и XAML вид панели документов; панели свойств отображаются свойства и события выбранного элемента. Внутренний узел с желтой каймой (LayoutRoot в скриншоте выше) является текущий контейнер по умолчанию.

Документы группы

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

• Вы можете использовать вкладки в верхней части окна документов для переключения между открытыми документами или близких документов (только одна вкладка, в приведенном выше скриншоте, так как только один файл Page.xaml открыта.).
• Вы можете переключаться между конструктора XAML зрения, или сплит зрения выбранного документа. Вы можете также настроить представление по умолчанию в меню Сервис -> Параметры -> Документы:
  
• Существует цепочка управления в верхней части конструктора (также называется монтажной), чтобы показать путь логического дерева выбранного элемента. Это еще один способ навигации логического дерева, кроме панели объектов, и для переключения между режимами авторинга, как мы увидим в ближайшее время.
• Вы можете изменять масштаб просмотра, дизайн
  • выберите значок масштаба с помощью панели инструментов, а затем нажмите Alt или нажмите на монтажной области;
  • использовать зум выпадающий список справа внизу монтажной области:
  • использовать меню Вид пункты или их сочетания клавиш:
• Конструкция зрения дизайнера WYSIWYG, где вы можете перетаскивать элементы из панели инструментов или активов Библиотека по левой границе окна смесь:
  
• Представление XAML обеспечивает прямой XAML авторинга. Он не имеет IntelliSense, но вы можете использовать представление дизайна и ошибки вкладки в панели результатов ниже, чтобы исправить ошибки во время ввода.

Панель Properties

Свойства панели имеет два представления: свойства и события, указывает две кнопки в правом верхнем углу панели.

• С учетом свойств:
  
  • свойства выбранного элемента сгруппированы по категориям, например, макет, общие свойства;
  • свойства, как правило, полезные подсказки, как Содержимое собственности подсказка в скриншоте выше;
  • свойства, как правило, встроенные / расширенные / диалог Редактор (ы), чтобы помочь пользователю выбрать значение, как и значение HorizontalAlignment, недвижимость в приведенном выше скриншоте можно настроить, нажав одну из четырех кнопок, а не вводить в такие ценности, как "Центр" в XAML просмотреть непосредственно;
  • если вы дадите свойство значение (так он больше не принимает значение по умолчанию), маленькие площади, чтобы его права станут белыми, как выравнивание свойств в скриншоте выше;
  • Вы можете нажать на стрелку (которая "Показать дополнительные параметры" подсказка) в большинстве категорий, чтобы видеть больше свойств этой категории;
  • Вы можете найти свойство быстро введя часть его имени в поле поиска в верхней части панели свойств:
    
• С учетом событий:
  
  • Вы можете ввести имя обработчика события для события, и смесь будет открыть проект в Visual Studio, с прототипом реализации обработчиков событий в код файла:

  

Анимация Authoring

Чтобы создать анимацию, щелкните знак плюс в объектах и ​​сроки панели "Создание раскадровки ресурсов" появится диалоговое окно, спрашивая имя нового Раскадровка:

Смесь затем поступает сроки режиме записи. Давайте создадим анимацию, которая удвоит размер кнопки. Ключевых шагов в создании анимации:

1. создать ключевой кадр, сначала перетащив желтую шкалу на KeyTime, а затем нажать кнопку "Запись Keyframe" зеленый плюс кнопки;
2. редактировать свойства элементов пользовательского интерфейса на KeyTime, как описано в предыдущем разделе Authoring пользовательского интерфейса;
3. повторите шаги 1 и 2 для каждого кадра;

Как мы можем видеть в скриншоте ниже:

• в объектах и ​​сроки панели:
  • Название сроки редактируемого: Storyboard1;
  • кадр редактируемого: KeyTime составляет 1 секунду, с указанием сроков желтый;
  • двойной иконки стрелку слева от узлов в объекты управления (кнопки, RenderTransform, масштаб ScaleX, ScaleY в скриншоте ниже) и белыми точками на временной шкале в сроки панели шоу изменения свойств объектов в KeyTime;
  • мы можем использовать игры управления в верхней части шкалы панель или перетащите желтую шкалу, чтобы запустить анимацию;
• В монтажной панели документы:
  • красной каймой, красную кнопку записи, и красная метка "Сроки записи на" все указывает смесь находится в режиме временной шкалы записи;
  • Вы можете нажать на красную кнопку записи, чтобы остановить режим записи и переключиться обратно в режим интерфейса разработки;
• В панели Properties:
  • Значение целевого свойства: как ScaleTransform.ScaleX установлен в 2;

Смесь используется XXXAnimationUsingKeyFrames и генерирует один кадр для каждого объекта / недвижимость / кадр трио. Мы можете настроить свойства кадра себя, выбрав сначала она на панели Объекты, а затем установив его свойства в панели свойств, как в скриншоте ниже:

• KeyTime является "00:00:01"
• целевой объект кнопки, целевой путь примерно RenderTransform.ScaleTransform.ScaleX
• Значение "2"
• KeySpline является "0.5,0.1,0.5,0.9"

мы можем также тонкой настройки свойств раскадровки таким же образом, как в скриншоте ниже:

• Storyboard1 выбран
• AutoReverse и RepeatBehavior изменении свойств

Это смесь XAML код, сгенерированный для выше простой анимации:

Ясно, что гораздо легче автор анимации в смесь вместо написания XAML вручную.

Шаблон Authoring

Красота и мощь WPF / Silverlight является возможность повторного шаблон элемента управления. Это довольно легко сделать, что в Blend: выберите пункт меню "Edit Control Parts (Template) -> Изменить шаблон" контекстного меню, либо из объектов и временной шкалы панели или цепочку в монтажной области:

"Изменить Копировать ..." меню также простой способ получить шаблон по умолчанию для элемента управления. В скриншоте ниже, мы видим:

• шаблон по умолчанию компоненты объектов и временной шкалы группы
• визуальный группы государства, визуальные состояния и переходы при взаимодействии группы
• Свойства шаблонов компонентов в панели свойств. Оранжевый квадрат справа от фона свойство указывает, что шаблон связан.

Просверлите в дальнейшем: выберите инвалидов визуальное состояние, и мы видим, что людей с ограниченными визуальными в монтажной области создается визуальная раскадровка переходном состоянии, что оживляет непрозрачность собственности DisabledVisualElement от 0% до 55% в 0 секунд:

Обратите внимание, что в верхней части объекта и сроки панель, она показывает отключенном состоянии, а раскадровка, указывая смесь находится в состоянии режима записи.

Теперь давайте сделаем некоторые изменения в шаблон по умолчанию, изменяя визуальное внимание переходное состояние, чтобы повлиять на кнопку, когда она направлена:

• Выберите Focused визуальное состояние при взаимодействии панели щелкните стрелку плюс справа от нее, выберите один из трех вариантов (те варианты для визуального перехода государства и из этого состояния, а также между двумя странами особенно в визуальном группа состоянии);
• Смесь в визуальном режиме записи состояния: целенаправленный является выбранный визуальный государства;
• добавить новый косой превращаются в верхней сетке, как описано в разделе Авторская анимация. Обратите внимание, что кнопка в монтажной сейчас искажены. Монтажной WYSIWYG делает анимацию авторской простым и интуитивно понятным.
• удалить компонент FocusVisualElement шаблон в панели объектов, так как мы не нужны больше. Обратите внимание на подсказки в верхней указывает смесь автоматически удаляются визуального переходного состояния, которая показывает FocusVisualElement также.

Смесь порожденных XAML для пользовательского шаблона выше 102 линий, 6179 символов! Представьте себе, трудности в авторской это вручную!

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

Стиль Authoring

Использование стиля, как правило, лучше, чем задания свойств объектов непосредственно, так как стили могут быть повторно использованы, которые просты в обслуживании, а также помочь отдельным представления от содержания (элементы интерфейса). Стиль разработки похоже на шаблон авторинга говорилось выше, за исключением того, гораздо проще. Вы должны использовать Object -> Изменить стиль меню, чтобы войти в стиле режиме разработки. Существует нет контекстного меню для него, что делает стиль авторской менее обнаружить.

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

Затем смесь переходит в режим стиль разработки:

• Объекты и сроки панель отображает подчеркнул элемент стиля, а пользовательский интерфейс логического дерева;
• цепочка на верхней монтажной также указывает нам стиль авторской LayoutRoot с значок палитры;
• Давайте добавим кое-что в стиле установки фона с помощью кисти редактор, обратите внимание на монтажной отражает изменения немедленно;
• представление XAML панели документов показывает простой XAML создан для разработки стиля;

Как только у нас стиль ресурс, применяя это просто: достаточно выбрать объект и использование объекта -> Edit Style -> Применить пункт меню ресурсов.

Управление ресурсами

Storyboard, стили и шаблоны автором выше всех ресурсов. Мы можем использовать ресурсы группы для управления ресурсами:

• мы можем видеть все ресурсы, как в app.xaml (глобальные ресурсы) и текущий файл XAML Page.xaml, что в настоящее время редактируется (локальные ресурсы).
  • Не знаю, почему Storyboard1 создан в разделе анимация Authoring не появляется. Смешайте ошибка или ошибка пользователя?
• мы можем изменить ресурс с помощью контекстного меню или отредактировать ресурс кнопки:
  
  
• мы также можем перетащить ресурс по дереву, чтобы изменить его расположение (и видимости), как и перемещение между app.xaml и Page.xaml или [UserControl] и кнопки.

Заключение

Напомним, Blend делает интерфейс разработки простым и интуитивно понятным:

• инструментов (активов и библиотеки) и монтажной позволяет WYSIWYG интерфейс разработки;
• Объекты панели помогает организовать все элементы пользовательского интерфейса в логическом дереве;
• панель свойств упрощает настройку свойств с редакторами;

Построенный на основе интуитивного интерфейса разработки, Blend упрощает анимации авторской путем введения временной шкале в режиме записи:

• Смесь всегда использует XXXAnimationUsingKeyFrames, поэтому раскадровки всегда набор ключевых кадров;
• Смесь генерирует ключевые кадры, косвенно, позволяя пользователю набор свойств элементов пользовательского интерфейса на keytimes через интуитивно понятный интерфейс разработки пользовательского интерфейса;
• Смесь всегда порождает все четыре преобразования, как показано ниже, чтобы сделать его ключевой кадр единый поколения для преобразования:

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

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

Таким образом, смесь большая авторская XAML инструментов. Это не только дизайнеры, но также может дать разработчикам большой прирост производительности. Надеюсь этот пост дает хороший обзор смесь и вы начали изучать в Blend, с энтузиазмом ). Спасибо!