Как установить xaml для visual studio
В этом разделе вы научитесь выполнять следующие действия.
- Создание проекта Visual Studio, предназначенного для Windows 10 и платформы UWP.
- Писать код XAML, чтобы изменить пользовательский интерфейс на начальной странице.
- Запуск проекта на локальном компьютере в Visual Studio.
- Использовать объект SpeechSynthesizer, чтобы добавить в приложение голосовую функцию, активируемую нажатием кнопки.
Перед началом работы.
В этом руководстве используется Visual Studio Community 2017. Если вы используете другую версию Visual Studio, она может выглядеть иначе.
Шаг 1. Создание нового проекта в Visual Studio.
Запустите Visual Studio.
В меню Файл выберите Создать > Проект, чтобы открыть диалоговое окно Новый проект.
(Если вы не видите универсальных шаблонов, возможно, у вас отсутствуют компоненты для создания приложений UWP. Чтобы повторить процесс установки и добавить поддержку UWP, нажмите кнопку открыть установщик Visual Studio в диалоговом окне Новый проект. См. статью о получении настройки.)
Если вы используете Visual Studio впервые, может открыться диалоговое окно с запросом включить параметр Режим разработчика. Режим разработчика — это специальный параметр, включающий определенные функции, например разрешение на непосредственный запуск приложений, а не только через Store. Дополнительные сведения см. в разделе Подготовка устройства к разработке. Чтобы продолжить работу с этим руководством, выберите Режим разработчика, нажмите Да и закройте диалоговое окно.
Отобразится диалоговое окно с полями целевой/минимальной версии Windows. Параметры по умолчанию подходят для этого руководства, поэтому нажмите кнопку ОК, чтобы создать проект.
После того как откроется новый проект, его файлы будут представлены на панели Обозреватель решений справа. Чтобы просмотреть файлы, вместо вкладки Свойства можно выбрать вкладку Обозреватель решений.
Что содержат файлы?
Для просмотра и изменения файла проекта дважды щелкните файл в Обозревателе решений. Разверните XAML-файл так же, как и папку, чтобы увидеть соответствующий файл кода. XAML-файлы открываются в разделенном представлении, в котором отображается как поверхность конструктора, так и редактор XAML.
Что такое XAML? Расширяемый язык разметки для приложений (Extensible Application Markup Language, XAML) — это язык, который используется для определения пользовательского интерфейса приложения. Код на нем можно писать вручную или создавать с помощью средств разработки Visual Studio. В XAML-файле есть файл кода программной части .xaml.cs, содержащий логику приложения. Совместно XAML и код программной части образуют полный класс. Дополнительные сведения см. в разделе Обзор языка XAML.
Файлы App.xaml и App.xaml.cs
- App.xaml — это файл, в котором объявляются ресурсы, используемые по всему приложению.
- App.xaml.cs — это файл кода программной части для App.xaml. Как и все страницы с кодом программной части, эта страница содержит конструктор, который вызывает метод InitializeComponent . Вам нет необходимости писать метод InitializeComponent . Он создается в Visual Studio, и его главной целью является инициализация элементов, объявленных в XAML-файле.
- App.xaml.cs — это точка входа для вашего приложения.
- App.xaml.cs также содержит методы для обработки активации и приостановки приложения.
- В файле MainPage.xaml определяется пользовательский интерфейс приложения. Добавлять элементы можно непосредственно с помощью разметки XAML или с помощью инструментов конструктора, предоставляемых Visual Studio.
- MainPage.xaml.cs — это страница с кодом программной части для MainPage.xaml. Здесь вы добавляете логику приложения и обработчики событий.
- Вместе эти два файла формируют новый класс, называемый MainPage , наследующий от Page в пространстве имен HelloWorld .
- Файл манифеста, в котором описывается ваше приложение: его имя, описание, плитка, начальная страница и т. д.
- Содержит список зависимостей, ресурсов и файлов, содержащихся в приложении.
Набор изображений логотипов
- Файлы Assets/Square150x150Logo.scale-200.jpg и Wide310x150Logo.scale 200.jpg — это значок вашего приложения (средний или широкий) для меню "Пуск".
- Файл Assets/Square44x44Logo.jpg — это значок вашего приложения, отображаемый в списке приложений в меню "Пуск", на панели задач и в диспетчере задач.
- Файл Assets/StoreLogo.jpg представляет ваше приложение в Microsoft Store.
- Файл Assets/SplashScreen.scale-200.jpg — это экран-заставка, отображающаяся при запуске вашего приложения.
- Файл Assets/LockScreenLogo.scale-200.jpg можно использовать для представления приложения на экране блокировки, когда система заблокирована.
Шаг 2. Добавление кнопки
Использование представления конструктора
Добавим кнопку на нашу страницу. В этом руководстве вы будете работать лишь с несколькими из перечисленных ранее файлов: App.XAML, MainPage.xaml и MainPage.xaml.cs.
Дважды щелкните файл MainPage.xaml, чтобы открыть его в представлении конструктора.
В верхней части экрана будет отображаться графическое представление, а под ним представление кода XAML. Изменения можно внести в любое представление, но сейчас мы будем использовать графическое представление.
Выберите вертикальную вкладку Панель элементов слева, чтобы открыть список элементов управления пользовательского интерфейса (чтобы эта вкладка отображалась постоянно, можно щелкнуть значок закрепления в строке заголовка вкладки).
Разверните группу Типовые элементы управления XAML и перетащите Кнопку в центр полотна проектирования.
Если вы посмотрите на окно кода XAML, то увидите, что "Кнопка (Button)" была добавлена и туда.
Измените текст кнопки.
Установите курсор в представлении кода XAML и задайте свойству "Содержимое (Content)" значение "Hello, world!" вместо значения "Кнопка (Button)".
Обратите внимание, что текст кнопки на полотне проектирования обновится.
Шаг 3. Запуск приложения
К этому моменту вы создали очень простое приложение. Этот этап подходит для сборки, развертывания и запуска приложения, а также его просмотра. Вы можете выполнить отладку приложения на локальном компьютере, симуляторе или эмуляторе, а также на удаленном устройстве. Меню целевого устройства в Visual Studio.
Запуск приложения на настольном ПК
По умолчанию приложение запускается на локальном компьютере. Меню целевого устройства предоставляет ряд возможностей для отладки приложения на устройствах с настольного ПК.
Запуск отладки на локальном компьютере
В меню Отладка выберите команду Начать отладку.
Нажмите клавишу F5.
Приложение откроется в новом окне и сначала отобразится экран-заставка по умолчанию. Экран-заставка определяется изображением (SplashScreen.jpg) и цветом фона (указанным в манифесте приложения).
После исчезновения экрана-заставки появится ваше приложение. Это выглядит следующим образом:
Нажмите клавишу Windows, чтобы открыть меню Пуск, и выберите пункт «Все программы». Обратите внимание, что при локальном развертывании приложения его плитка добавляется в меню Пуск. Чтобы снова запустить приложение (не в режиме отладки) нажмите или щелкните соответствующую плитку в меню Пуск.
Ваше приложение пока что умеет не много, но все равно поздравляем — вы создали свое первое приложение UWP!
Остановка отладки
В меню Отладка выберите команду Остановить отладку.
Закройте окно приложения.
Шаг 4. Обработчики событий
Термин "обработчик событий" звучит непонятно, однако это просто еще одно имя кода, который вызывается при возникновении события (например, когда пользователь нажимает кнопку).
Остановите приложение, если вы еще не сделали этого.
Дважды щелкните элемент управления "Кнопка (Button)" на полотне проектирования, чтобы среда Visual Studio создала обработчик событий для вашей кнопки.
Также вы можете создать код вручную. Либо можно щелкнуть кнопку, чтобы выбрать ее, и посмотреть сведения в окне Свойства в нижнем правом углу. Перейдя на панель События (с изображением молнии), вы сможете задать имя для обработчика событий.
- Измените код обработчика событий в файле MainPage.xaml.cs на странице с кодом программной части. Это самый интересный этап. Код обработчика событий по умолчанию выглядит следующим образом.
Давайте изменим его, чтобы он выглядел следующим образом.
Убедитесь, что сигнатура метода теперь содержит ключевое слово async. В противном случае приложение выдаст ошибку при попытке его запуска.
Что нам удалось сделать?
В этом коде используются некоторые API-интерфейсы Windows для создания объекта синтеза речи, которому передается определенный текст для его озвучивания. Дополнительные сведения по использованию объекта SpeechSynthesis см. в документации поПространству имен SpeechSynthesis.
Если вы запустите приложение и нажмете кнопку, ваш компьютер (или телефон) воспроизведет фразу "Hello, World!".
Сводка
Поздравляем! Вы создали свое первое приложение для Windows и платформы UWP!
Чтобы узнать, как использовать XAML для размещения элементов управления, которые будут использоваться в вашем приложении, изучите руководство по сетке или сразу перейдите к следующему шагу.
Файл кода программной части обеспечивает поддержку кода для разметки. Вместе эти два файла вносят вклад в новое определение класса, которое включает дочерние представления и инициализацию свойств. В файле XAML классы и свойства указываются с помощью XML-элементов и атрибутов, а также устанавливаются ссылки между разметкой и кодом.
Создание решения
чтобы начать редактирование первого файла XAML, используйте Visual Studio или Visual Studio для Mac для создания нового Xamarin.Forms решения. (Выберите вкладку, соответствующую вашей среде.)
в Windows запустите Visual Studio 2019 и в окне пуск щелкните создать новый проект для создания нового проекта:
В окне Создать проект в раскрывающемся списке Тип проекта выберите Мобильное приложение, а затем выберите шаблон Мобильное приложение ( ) и нажмите кнопку Далее:
в окне настройка нового проекта задайте имя Projectксамлсамплес (или другое значение) и нажмите кнопку создать .
В диалоговом окне Создание межплатформенного приложения щелкните пустои нажмите кнопку ОК :
в Visual Studio для Mac выберите в меню файл создать решение . в диалоговом окне создание Project выберите многоплатформенное приложение в левой части и приложение пустых форм (неприложение форм) из списка шаблон:
В следующем диалоговом окне можно выбрать расположение для проекта:
После создания решения ксамлсамплес может потребоваться протестировать среду разработки, выбрав различные проекты платформы в качестве запускаемого проекта решения, а также создав и развернув простое приложение, созданное с помощью шаблона проекта, на эмуляторах телефонов или на реальных устройствах.
Анатомия файла XAML
Чтобы увидеть файл кода программной части, необходимо щелкнуть стрелку рядом с файлом app. XAML .
И app. XAML , и app. XAML. CS вносят вклад в класс с именем , производным от . Большинство других классов с файлами XAML вносят вклад в класс, производный от ContentPage класса; эти файлы используют XAML для определения визуального содержимого целой страницы. Это справедливо для двух других файлов в проекте ксамлсамплес :
Файл MainPage. XAML выглядит следующим образом (хотя форматирование может быть немного другим):
Два объявления пространства имен XML ( xmlns ) ссылаются на URI, первый — на веб-сайте Xamarin, а второй — в корпорации Майкрософт. Не пытайтесь проверить, что эти URI указывают. Нет ничего. Они представляют собой универсальные коды ресурсов (URI), принадлежащие Xamarin и Microsoft, и, по сути, работают как идентификаторы версий.
Первое объявление пространства имен XML означает, что теги, определенные в файле XAML без префикса, ссылаются на классы в Xamarin.Forms , ContentPage например. Второе объявление пространства имен определяет префикс x . Используется для нескольких элементов и атрибутов, которые являются встроенными для самого XAML и поддерживаются другими реализациями XAML. Однако эти элементы и атрибуты немного отличаются в зависимости от года, внедренного в URI. Xamarin.Forms поддерживает спецификацию XAML 2009, но не все.
В конце первого тега x префикс используется для атрибута с именем Class . Поскольку использование этого x префикса является практически универсальным для пространства имен XAML, АТРИБУТЫ XAML, такие как Class , почти всегда называются x:Class .
Файл MainPage. XAML. CS выглядит следующим образом (помимо неиспользуемых директив):
MainPage Класс является производным от ContentPage , но обратите внимание на partial Определение класса. Это предполагает, что для MainPage существует еще одно определение разделяемого класса, но где это так? И что такое InitializeComponent метод?
Хотя обычно не требуется тратить много времени на создание файлов кода, иногда исключения среды выполнения создаются для кода в созданных файлах, поэтому вы должны быть знакомы с ними.
При компиляции и запуске этой программы в Label центре страницы отображается элемент, как показано в XAML:
Для более интересных визуальных элементов требуется только более интересный код XAML.
Добавление новых страниц XAML
В проект добавляются два файла: хеллоксамлпаже. XAML и файл кода программной части хеллоксамлпаже. XAML. CS.
Задание содержимого страницы
Измените файл хеллоксамлпаже. XAML , чтобы только теги были доступны для и ContentPage.Content :
ContentPage.Content Теги являются частью уникального синтаксиса XAML. Сначала они могут показаться недействительными XML, но они являются допустимыми. Этот период не является специальным символом в XML.
ContentPage.Content Теги называются тегами ContentPage.Content . Content является свойством ContentPage , и обычно для него задано отдельное представление или макет с дочерними представлениями. Обычно свойства становятся атрибутами в XAML, но было бы трудно установить Content атрибут для сложного объекта. По этой причине свойство выражается в виде элемента XML, состоящего из имени класса и имени свойства, разделенного точкой. Content Теперь свойство можно задать между ContentPage.Content тегами следующим образом:
Также обратите внимание, что Title для корневого тега задан атрибут.
В настоящее время связь между классами, свойствами и XML должна быть очевидной: Xamarin.Forms класс (например ContentPage , или Label ) отображается в файле XAML как элемент XML. Свойства этого класса, включая Title ContentPage и семь свойств Label , обычно отображаются как XML-атрибуты.
Для задания значений этих свойств существует множество сочетаний клавиш. Некоторые свойства являются базовыми типами данных: например, свойства и Text имеют тип String Rotation , имеет тип Double и IsVisible (который true по умолчанию задан только для иллюстрации) имеет тип Boolean . Title
HorizontalTextAlignment Свойство имеет тип TextAlignment , который является перечислением. Для свойства любого типа перечисления необходимо указать только имя члена.
Однако для свойств более сложных типов используются преобразователи для синтаксического анализа XAML. Это классы в Xamarin.Forms , которые являются производными от TypeConverter . Многие являются открытыми классами, но некоторые — нет. Для этого конкретного XAML-файла некоторые из этих классов играют роль в фоновом режиме:
- LayoutOptionsConverter VerticalOptions для свойства
- FontSizeConverter FontSize для свойства
- ColorTypeConverter TextColor для свойства
Эти преобразователи управляют допустимым синтаксисом параметров свойств.
ThicknessTypeConverter Может обработано одно, два или четыре числа, разделенные запятыми. Если указано одно число, оно применяется ко всем четырем сторонам. С двумя числами первым является левое и правое заполнение, а вторая — сверху и снизу. Четыре числа находятся в порядке слева, сверху, справа и снизу.
Объект LayoutOptionsConverter может преобразовать имена открытых статических полей LayoutOptions структуры в значения типа LayoutOptions .
FontSizeConverter Может выполнять обработку NamedSize элемента или размера числового шрифта.
Каждая из маленьких букв представляет собой шестнадцатеричную цифру. Вот как включается альфа-канал:
При альфа-канале следует помнить, что FF полностью непрозрачны, а 00 — полностью прозрачно.
Два других формата позволяют указать только одну шестнадцатеричную цифру для каждого канала:
Переход по страницам
При запуске программы ксамлсамплес отображается. Чтобы увидеть новое HelloXamlPage значение, можно задать новую стартовую страницу в файле HelloXamlPage или переходить к новой странице из MainPage .
Чтобы реализовать навигацию, сначала измените код в конструкторе app. XAML. CS , чтобы создать объект:
В конструкторе MainPage. XAML. CS можно создать простой и использовать обработчик событий для перехода к HelloXamlPage :
Content Установка свойства страницы заменяет значение Content свойства в файле XAML. При компиляции и развертывании новой версии этой программы на экране появляется кнопка. При нажатии клавиши выполняется переход к HelloXamlPage . ниже приведена результирующая страница для iPhone, Android и UWP:
Вернуться к MainPage использованию MainPage кнопки "назад" в iOS можно с помощью стрелки влево в верхней части страницы или в нижней части телефона на устройстве Android или с помощью стрелки влево в верхней части страницы Windows 10.
Вы можете экспериментировать с XAML для различных способов визуализации Label . Если в текст необходимо встроить символы Юникода, можно использовать стандартный синтаксис XML. Например, чтобы вставить приветствие в парные кавычки, используйте:
Вот как это выглядит:
Взаимодействие XAML и кода
Пример хеллоксамлпаже содержит только один элемент на странице, но это очень нередкое. Большинство ContentPage производных типов задают Content свойство в макете некоторой сортировки, например StackLayout . Children Свойство объекта StackLayout определено как имеющее тип IList , но фактически является объектом типа ElementCollection , и эта коллекция может быть заполнена несколькими представлениями или другими макетами. В XAML эти связи типа «родители-потомки» устанавливаются с обычной XML-иерархией. Ниже приведен XAML-файл для новой страницы с именем ксамлплускодепаже:
Этот XAML-файл является синтаксически завершенным и выглядит следующим образом:
Однако, скорее всего, эта программа будет работать проблемных. Slider Возможно, ожидается Label , что в программе отображается текущее значение, и Button , вероятно, предполагалось что-то делать в рамках программы.
Как можно увидеть в части 4. Основы привязки данных. Задание отображения значения с помощью Label можно полностью обработать в XAML с помощью привязки данных. Но рекомендуется сначала увидеть решение Code. Несмотря на Button то, что для обработки щелчка определенно требуется код. Это означает, что файл кода программной части для XamlPlusCodePage должен содержать обработчики для ValueChanged события Slider и Clicked события Button . Добавим их:
Эти обработчики событий не обязательно должны быть открытыми.
В файле Slider XAML Теги и Button должны включать атрибуты для ValueChanged событий и Clicked , ссылающихся на эти обработчики:
Обратите внимание, что назначение обработчика для события имеет тот же синтаксис, что и присваивание значения свойству.
Если обработчик для ValueChanged события Slider будет использовать Label для вывода текущего значения, обработчику необходимо сослаться на этот объект из кода. Для Label требуется имя, указанное с помощью x:Name атрибута.
x Префикс x:Name атрибута указывает, что этот атрибут является встроенным для XAML.
ValueChanged Теперь обработчик событий может установить, Label чтобы отобразить новое Slider значение. Новое значение доступно из аргументов события:
Или обработчик может получить Slider объект, создающий это событие из sender аргумента, и получить Value свойство из этого:
При первом запуске программы Label не отображает это Slider значение, так как ValueChanged событие еще не запущено. Но при любой манипуляции со Slider значением отображается значение:
Теперь для Button . Давайте имитируем ответ на Clicked событие, отображая предупреждение с помощью Text кнопки. Обработчик событий может безопасно привести аргумент к Button типу sender , а затем получить доступ к его свойствам:
Метод определяется так DisplayAlert , как async метод является асинхронным и должен начинаться с await оператора, который возвращает, когда метод завершается. Так как этот метод получает Button событие, которое запускается из sender аргумента, один и тот же обработчик можно использовать для нескольких кнопок.
Вы увидели, что объект, определенный в XAML, может инициировать событие, которое обрабатывается в файле кода программной части, и что файл кода программной части может обращаться к объекту, определенному в XAML, используя имя, присвоенное ему с x:Name атрибутом. Это два фундаментальных способа взаимодействия кода и XAML.
Некоторые дополнительные сведения о том, как работает XAML, можно получить, изучив созданный файл ксамлплускоде. XAML. g. CS, который теперь включает любое имя, присвоенное любому атрибуту в качестве частного поля. Ниже приведена упрощенная версия этого файла:
Объявление этого поля позволяет свободно использовать переменную в любом месте внутри XamlPlusCodePage файла разделяемого класса в вашей юрисдикции. Во время выполнения поле назначается после синтаксического анализа XAML. Это означает, что valueLabel когда конструктор начинается, XamlPlusCodePage но является допустимым после InitializeComponent вызова метода, это поле становится null обязательным.
После InitializeComponent возвращения управления обратно в конструктор визуальные элементы страницы были созданы так же, как если бы они были созданы и инициализированы в коде. Файл XAML больше не играет роли в классе. Вы можете манипулировать этими объектами на странице любым нужным образом, например, путем добавления представлений в StackLayout или Content для свойства страницы на что-то другое. Вы можете «пройти по дереву», изучив Content свойство страницы и элементы в Children коллекциях макетов. Можно задать свойства для представлений, доступ к которым осуществляется таким способом, или назначить обработчики событий динамически.
Можете бесплатно. Это страница, и XAML — это только средство для создания содержимого.
Сводка
С помощью этого введения вы узнали, как файл XAML и файл кода вносят вклад в определение класса и как взаимодействуют файлы XAML и Code. Но XAML также имеет собственные уникальные синтаксические функции, позволяющие использовать его очень гибким способом. Вы можете приступить к изучению этих данных в части 2. Важный синтаксис XAML.
Из этого краткого руководства вы узнаете, как создать приложение Windows Presentation Foundation (WPF) с помощью Visual Studio. После создания первоначального приложения вы научитесь добавлять элементы управления и обрабатывать события. По завершении работы с этим руководством у вас будет простое приложение, добавляющее имена в список.
В этом руководстве описано следующее:
- Создание приложения WPF
- Добавление элементов управления на форму
- Обработка событий элемента управления для предоставления функциональных возможностей приложения
- Запустите приложение
Ниже представлен предварительный просмотр приложения, которое будет создано в данном руководстве.
Предварительные требования
Создание приложения WPF
Первым шагом в создании нового приложения является запуск Visual Studio и создание приложения на основе шаблона.
Запустите Visual Studio.
Выберите Создать новый проект.
В поле Поиск шаблонов введите wpf и нажмите клавишу ВВОД .
В списке шаблонов выберите Приложение WPF, а затем нажмите Далее.
В окне Настройка нового проекта выполните следующие действия:
Запустите Visual Studio.
Выберите Создать новый проект.
В поле Поиск шаблонов введите wpf и нажмите клавишу ВВОД .
В списке шаблонов выберите Приложение WPF, а затем нажмите Далее.
В окне Настройка нового проекта выполните следующие действия:
После создания приложения в Visual Studio должна открыться панель конструктора XAML для формы по умолчанию MainWindow. Если конструктор не отображается, дважды щелкните файл MainWindow.xaml в области Обозреватель решений, чтобы открыть конструктор.
Важные элементы среды Visual Studio
Поддержка WPF в Visual Studio состоит из пяти важных компонентов, с которыми вы будете взаимодействовать при создании приложения.
Все файлы проекта, код, окна и ресурсы отображаются в этой области.
На этой панели отображаются параметры свойств, которые можно настроить в зависимости от выбранного элемента. Например, если выбрать элемент в Обозревателе решений, отобразятся параметры свойств, связанные с файлом. Если выбрать объект в конструкторе, отобразятся параметры этого элемента.
Панель элементов содержит все элементы управления, которые можно добавить на форму. Чтобы добавить элемент управления на текущую форму, дважды щелкните элемент управления или перетащите его.
Это конструктор для документа XAML. Он является интерактивным, и на него можно перетаскивать объекты из панели элементов. Выбирая и перемещая элементы в конструкторе, можно визуально создавать пользовательский интерфейс для приложения.
Если конструктор и редактор отображаются, изменения в одном из них сразу отражаются в другом. При выборе элементов в конструкторе в области Свойства отображаются свойства и атрибуты этого объекта.
Редактор кода XAML
Это редактор кода XAML для документа XAML. Редактор кода XAML — это способ создания пользовательского интерфейса вручную без конструктора. Конструктор может вычислять значения свойств элемента управления при его добавлении в конструктор. В редакторе кода XAML вам предоставляется гораздо больше контроля.
Если конструктор и редактор отображаются, изменения в одном из них сразу отражаются в другом. При переходе по текстовым курсорам в редакторе кода в области Свойства отображаются свойства и атрибуты этого объекта.
Изучение кода XAML
После создания проекта в редакторе кода XAML отображается минимальный объем кода XAML для отображения окна. Если редактор не открыт, дважды щелкните элемент MainWindow.xaml в обозревателе решений. Вы должны увидеть XAML, аналогичный приведенному ниже примеру.
Корень документа представляет тип объекта, описываемого файлом XAML. Объявлено восемь атрибутов, и обычно они относятся к трем категориям:
Пространство имен XML предоставляет структуру XML, определяя, какое содержимое XML может быть объявлено в файле.
Основной атрибут xmlns импортирует пространство имен XML для всего файла, а в данном случае сопоставляется с типами, объявленными в WPF. Другие пространства имен XML объявляют префикс и импортируют другие типы и объекты для XAML-файла. Например, пространство имен xmlns:local объявляет префикс local и выполняет сопоставление объектов, объявленных в проекте, с теми, которые объявлены в пространстве имен кода Names .
Этот атрибут сопоставляет с типом, определенным в коде: файл MainWindow.xaml.cs или MainWindow.xaml.vb, который является классом Names.MainWindow .
Любой обычный атрибут, объявленный в объекте XAML, задает свойство этого объекта. В этом случае Title атрибут задает Window.Title свойство.
Изменение окна
Сначала запустите проект и просмотрите выходные данные по умолчанию. Вы увидите окно, которое появляется, без элементов управления, и заголовок MainWindow:
Для нашего примера приложения это окно слишком велико, а его заголовок не является описательным. Измените заголовок и размер окна, заменив соответствующие атрибуты в XAML следующими значениями:
Подготовка макета
В WPF имеется система макетов с широкими возможностями с множеством различных элементов управления макетом. Элементы управления макета помогают размещать дочерние элементы управления и изменять их размеры, а также могут даже это делать автоматически. Элемент управления макета по умолчанию, предоставляемый вам в этом XAML, — это элемент управления .
Элемент управления Grid позволяет определить строки и столбцы, почти как в таблице, и размещать элементы управления внутри границ определенной комбинации строк и столбцов. Можно добавить любое количество дочерних элементов управления или других элементов управления макетом, имеющихся в Grid . Например, другой элемент управления Grid можно поместить в определенную комбинацию строк и столбцов, а для этого нового Grid затем можно задать больше строк и столбцов и собственные дочерние элементы.
Элемент управления определяет строки и столбцы, в которых будут находиться элементы управления. В сетке всегда объявлена одна строка и столбец, то есть сетка по умолчанию является отдельной ячейкой. Это не обеспечивает большую гибкость при размещении элементов управления.
Прежде чем добавлять новые строки и столбцы, добавьте новый атрибут в элемент : Margin="10" . Будет вставлена сетка, благодаря чему окно будет выглядеть немного лучше.
Затем определите две строки и два столбца, разделив сетку на четыре ячейки:
Выберите сетку в редакторе кода XAML или в конструкторе XAML. Вы увидите, что в конструкторе XAML отображается каждая строка и столбец:
Добавление первого элемента управления
После создания сетки можно приступать к добавлению в нее элементов управления. Начните с элемента управления Label. Создайте новый элемент внутри элемента после определений строк и столбцов, а затем присвойте ему строковое значение Names :
определяет содержимое Names . Некоторым элементам управления известно, как управлять содержимым, а другим — нет. Содержимое элемента управления сопоставляется со свойством Content . При задании содержимого с помощью синтаксиса атрибутов XAML можно использовать следующий формат:
. Оба способа служат для выполнения одного и того же действия — отображение текста Names в качестве содержимого метки.
У нас есть проблема, поскольку метка занимает половину окна, так как она была автоматически назначена первой строке и столбцу сетки. Для первой строки нам не нужно много пространства, поскольку мы будем использовать эту строку только для метки. Измените атрибут Height первого параметра с * на Auto . Значение Auto автоматически изменяет размер строки сетки под размер ее содержимого (в данном случае это элемент управления Label).
Обратите внимание, что теперь в конструкторе отображается метка, занимающая небольшую часть доступной высоты. Теперь имеется больше места для следующей строки. Большинство элементов управления определяют значения высоты и ширины, которые они должны занимать. Например, элемент управления "метка" имеет значение высоты, которое гарантирует, что его можно прочитать.
Размещение элементов управления
Давайте поговорим о размещении элементов управления. Метка, созданная в разделе выше, автоматически помещается в строку 0 и столбец 0 сетки. Нумерация строк и столбцов начинается с 0 и увеличивается на 1 для каждой новой строки или столбца. Элементу управления ничего не известно о сетке, и элемент управления не определяет свойства для управления своим размещением в сетке. Элемент управления может быть даже помещен в другой элемент управления макета, имеющий собственный набор правил, определяющих способ размещения элементов управления.
Как указать элементу управления, что ему следует использовать другую строку или столбец, если элемент управления не имеет сведений о сетке? В этом случае на помощь придут вложенные свойства! Сетка использует эффективную систему свойств, предоставляемую WPF. Сетка определяет новые свойства, которые дочерние элементы управления могут объявлять и использовать. Свойства фактически не существуют в самом элементе управления, они вкладываются сеткой при добавлении элемента управления в сетку.
Сетка определяет два свойства для определения размещения строк и столбцов дочернего элемента управления: Grid.Row и Grid.Column . Если эти свойства опущены в элементе управления, предполагается, что они имеют значения по умолчанию 0, поэтому элемент управления помещается в строку 0 и столбец 0 сетки. Попробуйте изменить расположение элемента управления , присвоив атрибуту Grid.Column значение 1 :
Обратите внимание, что метка теперь переместилась во второй столбец. Вложенные свойства Grid.Row и Grid.Column можно использовать для размещения последующих элементов управления, которые мы создадим. Но на этом этапе следует вернуть метку в строку 0.
Создание поля со списком имен
Теперь, когда сетка имеет правильный размер и создана метка, добавьте элемент управления "Список" в строку под меткой. Список будет находиться в строке 1 и столбце 0 . Присвоим этому элементу управления имя lstNames . После именования элемента управления на него можно ссылаться в коде программной части. Имя присваивается элементу управления с помощью атрибута x:Name .
Добавление оставшихся элементов управления
Последние два элемента управления, которые предстоит добавить, — это текстовое поле и кнопка, которые пользователь будет использовать для ввода имени, добавляемого в список. Однако вместо того, чтобы пытаться создать больше строк и столбцов для сетки, эти элементы управления будут размещены в элементе управления .
Панель стека отличается от сетки тем, как в ней размещаются элементы управления. В сетке для указания того, где должны располагаться элементы управления, вы используете свойства Grid.Row и Grid.Column , тогда как в панели стека это выполняется автоматически: сначала размещается первый элемент управления, затем после него следующий элемент управления, и так до тех пор, пока не будут размещены все элементы управления. Элементы управления размещаются в "стек" один под другим.
Создайте элемент управления после списка и вставьте его в строку 1 и столбец 1 сетки. Добавьте еще один атрибут с именем Margin и значением 5,0,0,0 :
Атрибут Margin ранее уже использовался в сетке, однако теперь мы поместим только одно значение, 10 . Мы использовали значение 5,0,0,0 в панели стека. Поле является типом Thickness и может интерпретировать оба значения. Толщина определяет пространство вокруг каждой стороны прямоугольника, слева, сверху, справа, снизу, соответственно. Если значение поля является одним значением, оно используется для всех четырех сторон.
Затем создайте и элемент управления в .
Макет окна готов. Однако в наше приложение следует добавить логику, чтобы оно работало. Далее необходимо подключить события элемента управления к коду, чтобы приложение выполняло действия.
Добавление кода для события Click
Созданная нами кнопка имеет событие Click , возникающее, когда пользователь нажимает кнопку. Можно подписаться на это событие и добавить код, который будет добавлять имя в список. Как и при задании свойства элемента управления путем добавления атрибута XAML, можно использовать атрибут XAML для подписки на событие. Задайте для атрибута Click значение ButtonAddName_Click .
Теперь необходимо создать код обработчика. Щелкните правой кнопкой мыши ButtonAddName_Click и выберите Перейдите к определению. Это действие создает метод в коде программной части, который соответствует введенному имени обработчика.
Затем добавьте следующий код для выполнения следующих трех шагов:
- Проверка того, что в текстовом поле содержится имя.
- Проверка того, что имя, указанное в текстовом поле, еще не добавлено.
- Добавление имени в список.
Запустите приложение
Теперь, когда у нас есть код события, можно запустить приложение, нажав клавишу F5 или выбрав пункт меню Отладка>Начать отладку. Отобразится окно, и вы можете ввести имя в текстовое поле, а затем добавить его, нажав кнопку.
Итак, начнем работу с Universal Windows Platform и создадим первый проект. Для этого откроем Visual Studio 2017 и в меню выберем пункт File->New->Project. . Перед нами откроется окно создания нового проекта:
После этого нам отображается с выбором тех версий SDK, на которые будет ориентировано приложение:
Как правило, эти версии отражают глобальные обновления ОС Windows, например, Creators Update, Anniversary Update и т.д. В качестве опции Target Version (целевой среды приложения) рекомендуется устанавливать последнюю доступную версию SDK, которая обычно уже установлена по умолчанию. При выборе минимальной версии следует учитывать, что выбранное значение задает минимальную версию платформы UWP, с которой проект может работать.
Оставим данные опции по умолчанию и нажмем на OK. И Visual Studio создает новый проект:
Рассмотрим все узлы, из которых состоит проект:
References : стандартный узел с подключенными библиотеками
Assets : предназначен для хранения различных ресурсов приложения. По умолчанию здесь несколько файлов изображений
HelloApp_TemporaryKey.pfx : временный ключ, которым подписываются приложения во время запуска на локальном компьютере разработчика
Package.appxmanifest : файл манифеста, устаналивающий различные настройки приложения
Теперь сделаем простейшее приложение. Визуально приложение UWP представлено через страницы - отдельные объекты Page. По умолчанию в проекте есть только одна страница - MainPage. Код этой страницы и определяет то, что мы увидим на экране при запуске приложения. И теперь немного изменим ее.
Итак, откроем файл MainPage.xaml:
Снизу у нас окажется разметка на языке XAML - языке для декларативного определения графического интерфейса, а сверху визуальное представления кода XAML в виде прямоугольника, представляющего окно приложения.
Внесем небольшие изменения. Изменим код XAML на следующий:
Суть сделанных нами изменений состоит в том, что мы добавили элемент - обычную текстовую метку с надписью "Hello World!". И чтобы сделать текст крупным, у текстовой метки устанавливается шрифт высотой в 30 единиц. После изменения также должны произойти автоматические изменения в визуальном представлении:
Теперь запустим проект на выполнение, нажав на F5. И у нас отобразиться такое вот окошко, представляющее MainPage:
При запуске это приложение устанавливается на рабочий компьютер разработчика, и мы можем найти его в меню Пуск и оттуда запускать:
Запуск на Windows 10 Mobile
Также мы можем развернуть и простестировать приложение на мобильном устройстве под управлением Windows 10 Mobile. Но для этого надо подключить мобильное устройство к компьютеру с помощью кабеля USB, а на самом смартфоне установить режим разработчика на телефоне можно, перейдя в Параметры -> Обновление и безопасность -> Для разработчиков и выбрав пункт "Режим разработчика":
In MS Visual Studio Express 2013 for Windows Desktop:
It appears from the tutorial (see Figures 7 & 8) that there should be some windows showing the GUI. However, when I try to open the .xaml file in the Solution Explorer, View Code (Ctrl + Alt + 0) and View Designer (Shift + F7) both present the same thing: just the code. How do I open up the GUI box?
No XAML UI Designer option:
No Full XAML View Setting: Thanks!
This is the version of Visual Studio that I downloaded. The description leads me to believe that the XAML UI Designer should be installed and that this shouldn't be an issue.
Express 2013 for Windows Desktop
You may have malformed XAML, so the editor can't determine its a visual designer file. Please post the XAML content so we can help determine why.
At the bottom of the window showing the XAML, there should be 2 tabs labeled XAML, and Design. Click the Design tab and see if that fixes the issue.
your view is missing buttons, there should be tabs on the lower left corner and 3 little buttons on the lower right corner
24 Answers 24
Tools>Option>XAML Designer and enable XAML Designer worked for me.
PS: By default it is enabled. I disabled it due to VS performance issue and forgot about this change and end up facing same issue when I started working on WPF project.
To add to this, my ReSharper "Performance Guide" (under options) had "Disable XAML Designer" set to "Fix Silently", causing it to be disabled automatically. I changed it to "Ignore" and now it is enabled again.
Resharper (in voice of Bill Lumbergh from Office Space): "Hello, Developer. (sigh) Whaaat's haaappening? Ummm, I'm gonna need you to go ahead and use Visual Studio without your XAML Desiiiigner. So, if youuu could al-low us to - silently auto-diiiisable that option in your Visual Stuuuudio and leave it off, that would be great. Mmmkay?"
XML designer can be disabled by Resharper in Resharper > Options > Performance Guide
I fixed my problem by turning off Resharper block, and restoring XML designer in Tools > Options
Resharper (in voice of Bill Lumbergh from Office Space): "Hello, Developer. (sigh) Whaaat's haaappening? Ummm, I'm gonna need you to go ahead and use Visual Studio without your XAML Desiiiigner. So, if youuu could al-low us to - auto-diiiisable that option in your Visual Stuuuudio and leave it off, that would be great. Mmmkay?"
I am using Microsoft VS Community 2015 (final update)
In VS2017 v15.8.9 I found the designer wasn't displaying e.g. when right clicking in a xaml view's code pane and selecting View Designer.
Performing the following resolved it for me: I went into Tools > Options > XAML Designer and the Enable XAML Designer option was ticked. So, I unticked it, clicked Ok on the Options dialog to close it.
I exited and restarted Visual Studio and again went into Tools > Options > XAML Designer, ticked the Enable XAML Designer, clicked Ok, restarted Visual Studio, and it's now working.
I am not sure if I should post the answer here because it may not apply for VS Express 2013.
I have exactly the same problem using Visual Studio 2015 Community Edition. It turns out my project Target version is higher.
Try the following:
- Right click on your project in solution explorer.
- Change the Target version to Windows 10 (10.0; Build 10240).
Let me know if it is not relevant and I will delete my answer.
Problem: XAML UI Designer not showing
Solutions: (different from and much more elegant than my earlier solution)
- Click on the Solution file ( .sln ) in the Solution Explorer, if the .sln file is listed in theSolution Explorer
- Click on the Expand Pane icon to display the Design pane, if it's shown
Solution 1: Open the .sln file:
My project is cloned from a git repository. When I open it from the Start Page it opens up with a whole list of files in the Solution Explorer. If I open any of the .xaml files from that Solution Explorer they open with a XML editor which doesn't show the graphical XAML view.
At the very bottom of the Solution Explorer is a .sln (solution) file. Opening that file then loads the file list I'm used to. If any .xaml files are open they will not have access to the Design view. Opening them and closing them at this point will load the Design view. If the Design view still doesn't appear see Solution 2 immediately below.
Solution 2: Click on Expand Pane:
At the bottom of the XAML editor window you may see a small icon with a double arrow (Expand Pane). If you do, it means that you've hidden the Design Pane. Click it and you should get the Design Pane back.
Version: Visual Studio 2017
Problem Details:
I pulled a project I was working on from a git repository onto the problem computer (using all of Microsoft's in-built software and accounts). It was cloned successfully onto the problem computer and Visual Studio worked. After a pull from the repo the XAML UI Designer (Blend?) disappeared leaving me with only the XAML source.
An earlier solution I came across was to delete the source directory from my local computer and pull a fresh clone of the project. That fixed my problem, however, now I've played with it and found two other reasons my XAML Design View was missing. I imagine that I didn't need to delete the folder and that these two solutions would've been sufficient.
Читайте также: