Нин Чжан блог

Введение

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

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

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

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

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

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

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

Объекты и сроки Группа

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

Документы Группа

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

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

Свойства группы

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

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

  

Анимация Authoring

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

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

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

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

• в объектах и сроки Группа:
  • имя редактируемого сроки: Storyboard1;
  • Ключевой кадр редактируемого: keytime это 1 второе, с указанием сроков желтый;
  • двойной иконы стрелку слева от узлов на объектах панели (кнопка, RenderTransform, масштаб Scalex, Скали в ниже скриншоте) и белых точек, а сроки в сроки панели показывают изменения свойств объектов на keytime;
  • мы можем использовать играть управления в верхней части шкалы панели или перетащите желтые сроки, чтобы запустить анимацию;
• в планшете документов Группа:
  • красную кайму красную кнопку записи, и красная этикетка "Сроки записи на" все это свидетельствует Blend находится в режиме шкалы времени записи;
  • Вы можете нажать на красную кнопку записи, чтобы остановить режим записи и вернуться обратно в пользовательский интерфейс авторских режиме;
• В свойствах панели:
  • значение целевого свойства: как ScaleTransform.ScaleX установлен на 2;

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

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

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

• Storyboard1 выбран
• Автореверс и RepeatBehavior свойства меняются

Это код XAML Blend создается для более простое анимации:

  AutoReverse ="True" RepeatBehavior ="Forever" x:Name ="Storyboard1" > <Раскадровки Автореверс = "True" RepeatBehavior = "Forever" х: Name = "Storyboard1">
     BeginTime ="00:00:00" Storyboard . TargetName ="button" Storyboard . TargetProperty ="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" > <DoubleAnimationUsingKeyFrames BeginTime = "00:00:00" раскадровки. TargetName = "кнопку" раскадровки. TargetProperty = "(UIElement.RenderTransform). (TransformGroup.Children) [0]. (ScaleTransform.ScaleX)">
         KeySpline ="0.495999991893768,0.104000002145767,0.5,0.898999989032745" KeyTime ="00:00:01" Value ="2" /> <SplineDoubleKeyFrame KeySpline = "0.495999991893768,0.104000002145767,0.5,0.898999989032745" KeyTime = "00:00:01" Value = "2" />
     > </ DoubleAnimationUsingKeyFrames>
     BeginTime ="00:00:00" Storyboard . TargetName ="button" Storyboard . TargetProperty ="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" > <DoubleAnimationUsingKeyFrames BeginTime = "00:00:00" раскадровки. TargetName = "кнопку" раскадровки. TargetProperty = "(UIElement.RenderTransform). (TransformGroup.Children) [0]. (ScaleTransform.ScaleY)">
         KeyTime ="00:00:01" Value ="2" /> <SplineDoubleKeyFrame KeyTime = "00:00:01" Value = "2" />
     > </ DoubleAnimationUsingKeyFrames>
 > </> Раскадровки 

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

Шаблон Authoring

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

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

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

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

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

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

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

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

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

Стиль Authoring

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

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

Тогда Blend входит стиль режиме авторская:

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

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

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

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

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

Заключение

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

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

Строительство в верхней части интуитивное UI, Blend упрощает авторская анимация, вводя сроки режиме записи:

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

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

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

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

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