Учебное пособие по Windows Phone 8: Создание пользовательской кнопки в Expression Blend-I

Учебное пособие по Windows Phone 8: Создание пользовательской кнопки в Expression Blend-I
Учебное пособие по Windows Phone 8: Создание пользовательской кнопки в Expression Blend-I

Видео: Учебное пособие по Windows Phone 8: Создание пользовательской кнопки в Expression Blend-I

Видео: Учебное пособие по Windows Phone 8: Создание пользовательской кнопки в Expression Blend-I
Видео: Решение проблемы с мерцанием монитора. 100% РАБОТАЕТ! - YouTube 2024, Апрель
Anonim

Узнав о том, как создавать и развертывать приложение в Silverlight-версии инструментов CTP, в рамках этой серии руководств Windows Phone переходим к Expression Blend. Expression Blend - это авторская система для профессиональных дизайнеров для создания пользовательских интерфейсов, ориентированных на платформу.NET 3.0 +, и, более конкретно, WPF или Windows Presentation Foundation.

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

В этом уроке вы открываете проект Visual Studio, который вы создали в предыдущем упражнении в Expression Blend, и замените ControlTemplate кнопки, чтобы изменить его внешний вид. Потому что вы создаете ControlTemplate в XAML вы можете изменить внешний вид элемента управления без написания кода.

1. Откройте Microsoft Visual Studio 2010 Express для Windows Phone
1. Откройте Microsoft Visual Studio 2010 Express для Windows Phone

2. Если вы выполнили шаги в предыдущем упражнении, вы можете продолжить решение, которое вы создали для этого упражнения.

3. Откройте текущее решение в Expression Blend. Чтобы сделать это из Visual Studio, щелкните правой кнопкой мыши MainPage.xaml в Обозревателе решений, а затем выберите Открыть в Expression Blend. Если эта опция недоступна- вероятнее всего, ваша текущая версия Expression Blend не поддерживает необходимый тип проекта. Следуйте следующим шагам, чтобы создать временный проект, который вы можете редактировать с помощью Expression Blend

4. Откройте Microsoft Expression Blend

5. Создайте новый проект приложения для временного хранения ваших проектных активов. Для этого откройте файл меню, а затем выберите Новый проект

6. В Новый проект диалога, выберите Silverlight тип проекта, а затем выберите Приложение Silverlight 3 шаблон. Задайте имя для DesignHelloPhone, выберите подходящее место и сохраните язык как Visual C #, а затем нажмите Хорошо.

Image
Image

7. В Visual Studio дважды щелкните App.xaml в Обозреватель решений чтобы открыть этот файл в редакторе. Теперь откройте представление XAML, а затем выберите и скопируйте весь Application.Resources раздел в буфер обмена

8. Снова откройте Expression Blend, разверните DesignHelloPhone проекта в проектов панели и дважды щелкните App.xaml открыть файл

9. Укажите Просмотр активного документа в Посмотреть меню и выберите Просмотр XAML.

10. Найдите Application.Resources в этом файле - он должен быть пустым, а затем вставьте содержимое буфера обмена, чтобы заменить его.

11. Теперь найдите раздел во вновь вставленном тексте, который ограничен комментарием ***** LISTBOX / LISTBOXITEM ШАБЛОНЫ ***** «; он содержит стили, которые не совместимы с проектом Silverlight 3. Удалите весь раздел между разделителями начала и конца.

Image
Image

12. Теперь найдите заявка элемент в верхней части файла и вставить новое объявление пространства имен для ссылки на система пространство имен в mscorlib как показано ниже.

xmlns:system='clr-namespace:System;assembly=mscorlib' > # FF1F1F1F черный ?> var13 ->

13. Теперь сохраните измененные App.xaml в Expression Blend.

14. Затем откройте Visual Studio еще раз и откройте MainPage.xaml файл в представлении XAML. Затем выберите и скопируйте сетка элемент с именем LayoutRoot включая его детей в буфер обмена.

15. Вернитесь к Expression Blend, откройте MainPage.xaml файл в представлении XAML, а затем вставьте содержимое буфера обмена, чтобы заменить пустой LayoutRootсетка элемент в этом файле.

16. В MainPage.xaml файл, найдите корень UserControl и изменить значения Рост приписывать 800 и ширина приписывать 480.

17. Вернитесь в Visual Studio, щелкните правой кнопкой мыши MainPage.xaml.cs в Обозреватель решений и выберите Просмотреть код, Затем скопируйте ClickMeButton_Click обработчик события в буфер обмена.

18. Наконец, вернитесь к Expression Blend, разверните MainPage.xaml узла в проектов панели, дважды щелкните MainPage.xaml.cs открыть файл в редакторе и вставить код в буфер обмена в Главная страница учебный класс.

Теперь мы успешно реплицировали наш проект в выражение blend. Чтобы создать дизайн для пользовательской кнопки, пожалуйста, прочитайте следующий учебник, который будет опубликован завтра.

Рекомендуемые: