Нин Чжан блог

Введение

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

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

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

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

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

UI Authoring

UI авторинга осуществляется в основном через три панели:

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

Объекты панели делает логическую структуру дерева очень ясно. Легко ориентироваться в логическом дереве сворачивающиеся / разворачивающиеся / выбор элемента в дереве, или реструктурировать дерева с помощью перетаскивания элементов по дереву. Выбранный элемент выделяется в панели объектов, и в обоих зрения дизайна и 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 для каждого ключевого кадра;

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

• в объектах и ​​Timeline Panel:
  • Название сроки редактируемого: 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 секунд:

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

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

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

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

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

Стиль Authoring

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

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

Затем смесь переходит в режим стиль авторинга:

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

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

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

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

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

Заключение

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

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

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

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

    > <Button.RenderTransform>
       > <TransformGroup>
           /> <ScaleTransform />
           /> <SkewTransform />
           /> <RotateTransform />
           /> <TranslateTransform />
       > </ TransformGroup>
   > </ Button.RenderTransform> 

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

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

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

Будьте Общительный, Share!

•