Размещение стандартного элемента управления winrt xaml в приложении wpf с помощью xaml islands

Внедряем/используем User Control

С приведенным выше кодом, все, что нам нужно — это поместить наш Control в окно. Для этого нужно добавить ссылку на пространство имен с созданным UserControl сверху XAML-кода вашего окна:

После этого мы можем использовать префикс uc в нашем окне, как если бы это был любой другой контрол:

Обратите внимание, что мы используем свойства Title и MaxLength прямо в XAML-коде. Вот полный пример кода вашего окна:. Теперь весь созданный функционал можно использовать, написав всего лишь строчку кода, как в примере, где у нас два раза используется ограниченный ввод

Конечный результат выглядит так:

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

Использование элемента управления

Когда создание элемента управления завершено, использовать его очень легко. Чтобы применить указатель цвета в другом окне, понадобится отобразить сборку и пространство имен .NET на пространство имен XML, как показано ниже:

Используя определенное ранее пространство имен XML и имя класса пользовательского элемента управления, можно создать элемент точно так же, как в коде разметки создаются объекты любого другого типа. Можно также устанавливать его свойства и присоединять обработчики событий непосредственно в дескрипторе элемента управления:

Поскольку свойство Color использует тип данных Color, а тип Color декорирован атрибутом TypeConverter, WPF знает, как использовать ColorConverter для превращения строкового наименования цвета в соответствующий объект Color перед установкой его в свойство Color.

Код, обрабатывающий событие ColorChanged, достаточно прост:

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

Размещение CalendarView с использованием размещаемого элемента управления

После добавления в приложение заключенных в оболочку элементов управления WinRT XAML InkCanvas и InkToolbar вы можете использовать элемент управления WindowsXamlHost для добавления CalendarView в приложение.

Примечание

Элемент управления WindowsXamlHost предоставляется с пакетом Microsoft.Toolkit.Wpf.UI.XamlHost. Этот пакет входит в установленный ранее пакет Microsoft.Toolkit.Wpf.UI.Controls.

1. В обозревателе решений откройте файл MainWindow.xaml.

2. В элемент Window в верхней части XAML-файла добавьте следующий атрибут. Он указывает на пространство имен XAML для элемента управления WindowsXamlHost.

   Когда вы добавите этот атрибут, элемент Window будет выглядеть следующим образом:

3. В файле MainWindow.xaml замените имеющийся элемент следующим XAML-кодом. Этот код XAML добавляет строку в сетку, а также добавляет объект WindowsXamlHost в последнюю строку. Чтобы разместить элемент управления UWP CalendarView, этот код XAML задает для свойства полное имя элемента управления. Этот код XAML также определяет обработчик событий для события , которое происходит при преобразовании размещенного элемента управления для просмотра.

4. Сохраните файл MainWindow.xaml и откройте файл MainWindow.xaml.cs.

5. В верхней части файла добавьте следующее объявление пространства имен:

6. Добавьте следующий метод обработчика событий в класс и сохраните файл кода. После преобразования размещенного элемента управления для просмотра этот обработчик событий запускается и создает простой обработчик событий для события элемента управления «Календарь».

7. Снова нажмите клавишу F5, чтобы перестроить приложение и открыть его в отладчике. Убедитесь, что элемент управления «Календарь» теперь отображается в нижней части окна.

Release history

• December 2, 2021 v4.2.0 released with 18 bug fixes and improvements.
• July 19, 2021, released v4.2.0 of the Plus Edition released with .
• May 18, 2021 v4.1.0 released with 20 bug fixes and improvements.
• January 25, 2021, released v4.1.0 of the Plus Edition released with .
• January 7, 2021 v4.0.2 released with 22 bug fixes and improvements.
• August 17, 2020, released v4.0.1 of the Plus Edition released with .
• June 26, 2020 v4.0.0 released with 46 bug fixes and improvements.
• January 30, 2020 v3.8.0 released with 35 bug fixes and improvements.
• January 30, 2020, released v4.0.0 of the Plus Edition released with .
• November 26, 2019 v3.7.0 released with 18 bug fixes and improvements.
• September 27, 2019 v3.6.0 released with 36 bug fixes and improvements.
• February 7, 2019 v3.5.0 released with 26 bug fixes and improvements.
• January 30, 2019, released v3.8.0 of the Plus Edition released with .
• June 27, 2018 v3.4.0 released with 42 bug fixes and improvements.
• June 18, 2018, released v3.7.0 of the Plus Edition released with .
• March 5, 2018, released v3.3.0 with a major update to the DataGrid and 35 bug fixes and improvements.
• Jan. 15, 2018, released v3.6.0 of the Plus Edition released with .
• September 25, 2017, released v3.2.0 with 1 new control and 24 bug fixes and improvements.
• September 12, 2017, released Plus Edition v3.5.0 with .
• July 11, 2017, released v3.1.0 with 37 bug fixes and improvements.
• July 11, 2017, project moved to Github from Codeplex. Over 440K downloads on Codeplex. 800K on NuGet.
• June 5, 2017, released Plus Edition v3.4.0 with .
• March 1, 2017, released Plus Edition v3.3.0 with .
• Dec. 13, 2016, released v3.0.0 with 1 new control and 28 bug fixes and improvements.
• Nov. 21, 2016, released Plus Edition v3.2.0 with .
• July 13, 2016, released Plus Edition v3.1.0 with .
• June 14, 2016, released v2.9.0 with 32 bug fixes and improvements.
• May 6, 2016, released v2.8.0 with 23 bug fixes and improvements.
• April 6, 2016, released v2.7.0 with 31 bug fixes and improvements.
• April 5, 2016, released Plus Edition v3.0.0 with .
• Feb. 10, 2016, released Plus Edition v2.9.0 with .
• Jan. 8, 2016, released v2.6.0 with 15 bug fixes and improvements.
• Sept. 14, 2015, released Plus Edition v2.8.0 with .
• July 3, 2015, released v2.5.0 with .
• Feb. 13, 2015, released v2.4.0 with .
• Oct. 7, 2014, released v2.3.0 with .
• Sept. 29, 2014, released Plus Edition v2.4.0 with .
• June 17, 2014, released v2.2.1 with .
• June 17, 2014, released Plus Edition v2.3.1 with .
• June 2, 2014, released v2.2.0, with .
• May 12, 2014, released Plus Edition v2.3.0 with .
• Feb 20, 2014, released v2.1.0 with .
• Feb. 12, 2014, released Plus Edition v2.2.0 with .

Реализация пользовательского элемента управления

Чтобы реализовать пользовательский элемент управления WPF, создайте пользовательский интерфейс в XAML, а затем напишите события кода программной части в C# или другой язык .NET.

Написание XAML для пользовательского элемента управления

1. Откройте файл XAML для пользовательского элемента управления. В элементе добавьте следующие определения строк в элемент управления.

2. В элемент Main добавьте следующий новый элемент, который содержит текстовое поле для ввода веб-адресов и кнопку для установки нового адреса.

3. Добавьте следующий кадр в элемент верхнего уровня сразу после элемента, содержащего кнопку и текстовое поле.

4. В следующем примере показан завершенный XAML для пользовательского элемента управления.

Написание событий кода программной части для пользовательского элемента управления

1. В конструкторе XAML дважды щелкните кнопку Set Address (задать адрес ), добавленную в элемент управления.

   Файл UserControl1. CS откроется в редакторе кода.

2. Заполните обработчик событий SetButton_Click следующим образом.

   Этот код задает веб-адрес, введенный в текстовом поле в качестве целевого объекта для веб-браузера. Если адрес является недопустимым, код выдает ошибку.

3. Необходимо также выполнить обработку события WebFrame_Navigated:

4. Постройте решение.

Рефакторинг кода указателя цвета

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

В этом примере класс ColorPicker наследуется от Control. Класс FrameworkElement не подходит, поскольку указатель цвета требует взаимодействия с пользователем, а другие высокоуровневые классы не могут точно описать его поведение. Например, указатель цвета не позволяет вставлять в него другое содержимое, а потому ContentControl тоже не годится.

Код внутри класса ColorPicker точно такой же, как код пользовательского элемента управления (за исключением того факта, что из конструктора понадобится удалить вызов InitializeComponent()). Вы следуете тому же подходу для определения свойств зависимости и маршрутизируемых событий. Единственное отличие связано с необходимостью сообщения WPF о том, что для класса элемента управления будет предоставлен новый стиль. Этот стиль будет обеспечен новым шаблоном элемента. (Если пропустить этот шаг, будет использован шаблон, определенный в базовом классе.)

Чтобы сообщить WPF о том, что предоставляется новый стиль, следует вызвать метод OverrideMetadata() в статическом конструкторе класса. Этот метод вызывается на свойстве DefaultStyleKeyProperty, которое является свойством зависимости, определяющим стиль по умолчанию для элемента управления. Необходимый код выглядит так:

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

Создание пользовательского элемента управления WinRT XAML

Чтобы разместить пользовательский элемент управления WinRT XAML в приложении WPF, необходим исходный код элемента управления, чтобы скомпилировать его в приложение. Обычно, чтобы облегчить перенос, настраиваемые элементы управления определяются в проекте библиотеки классов UWP.

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

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

1. В обозревателе решений, щелкните правой кнопкой мыши по узлу решения и выберите Добавить -Новый проект.

2. Добавьте проект библиотеки классов (универсальная платформа Windows) в свое решение. Убедитесь, что для целевой и самой ранней версии установлены те же значения, что и для целевой и минимальной сборки ОС проекта UWP.

3. Щелкните правой кнопкой мыши файл проекта и выберите команду Выгрузить проект. Снова щелкните правой кнопкой мыши файл проекта и выберите команду Изменить.

4. Перед закрывающим элементом добавьте указанный ниже XML-код, чтобы отключить несколько свойств, а затем сохраните файл проекта. Эти свойства должны быть включены для размещения пользовательского элемента управления в приложении WPF (или Windows Forms).

5. Щелкните правой кнопкой мыши файл проекта и выберите команду Перезагрузить проект.

6. Удалите стандартный файл Class1.cs и добавьте новый пользовательский элемент управления в проект.

7. В файле XAML для пользовательского элемента управления добавьте следующий объект в качестве дочернего элемента по умолчанию. В этом примере добавляется элемент управления , а затем атрибут этого элемента управления привязывается к полю .

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

9. Выполните сборку проекта библиотеки классов UWP.

10. В проекте WPF щелкните правой кнопкой мыши узел Зависимости и добавьте ссылку на проект библиотеки классов UWP.

11. В ранее настроенном проекте приложения UWP щелкните правой кнопкой мыши узел Ссылки и добавьте ссылку на проект библиотеки классов UWP.

12. Перестройте все решение и убедитесь, что все проекты успешно построены.

Добавление обработчика событий «Ввод» для элемента управления NumericUpDown

1. Выберите первый элемент управления NumericUpDown (с именем sum) в форме, а затем в диалоговом окне Свойства выберите на панели инструментов значок События.

   На вкладке События в диалоговом окне Свойства отображаются все события для выбранного в форме элемента, на которые можно реагировать (т. е. которые можно обрабатывать). Поскольку выбран элемент управления NumericUpDown, все перечисленные события относятся к нему.

2. Выберите событие Ввод, а затем введите и нажмите клавишу ВВОД.

   Вы только что добавили обработчик событий «Ввод» для элемента управления NumericUpDown с именем «sum» и назвали этот обработчик answer_Enter.

3. В методе для обработчика событий answer_Enter введите следующий код:

   Importante

   Используйте элемент управления языка программирования в правом верхнем углу этой страницы, чтобы просмотреть фрагмент кода на C# или Visual Basic.

   Этот код может показаться сложным, однако в нем легко разобраться, если просмотреть его шаг за шагом. Сначала посмотрите на верхнюю часть метода — в C# или в Visual Basic. Этот параметр ссылается на объект, событие которого срабатывает. Он называется отправителем. В данном случае объектом-отправителем является элемент управления NumericUpDown. Поэтому в первой строке метода указывается, что отправителем является не просто какой-либо объект, а именно элемент управления NumericUpDown. (каждый элемент управления NumericUpDown это объект, но не каждый объект, это элемент управления NumericUpDown). Элемент управления NumericUpDown в этом методе называется answerBox, поскольку он будет использоваться для всех элементов управления NumericUpDown в форме, а не только для элемента управления NumericUpDown с именем «sum». Поскольку переменная answerBox объявлена в этом методе, ее область действия ограничена этим методом. Иными словами, эту переменную можно использовать только внутри этого метода.

   В следующей строке кода выполняется проверка, что answerBox был успешно преобразован из объекта в элемент управления NumericUpDown. Если бы преобразование завершилось неудачей, переменная имела бы значение (C#) или (Visual Basic). Третья строка получает длину ответа, который отображается в элементе управления NumericUpDown, а четвертая строка выделяет текущее значение в элементе управления, основываясь на этой длине. Теперь, когда игрок выбирает элемент управления, Visual Studio запускает это событие, в результате чего текущий ответ выделяется. Как только игрок начинает вводить другой ответ, предыдущий ответ удаляется и заменяется новым ответом.

4. В конструкторе Windows Forms выберите элемент управления NumericUpDown с именем difference.

5. На странице События диалогового окна Свойства прокрутите вниз до события Ввод, щелкните направленную вниз стрелку в конце строки, а затем выберите обработчик событий , который вы только что добавили.

6. Повторите предыдущий шаг для элементов управления NumericUpDown с именами product и quotient (т. е. произведение и частное).

7. Сохраните программу и запустите ее.

   При выборе элемента управления NumericUpDown существующее значение автоматически выделяется и удаляется, когда вы начинаете вводить другое значение.

Controls included

Проверка платформы

Потому что теперь есть поддержкаМультиплатформенностьCsproj, поэтому при написании кода часто бывает необходимо определить, на какой платформе он сейчас находится.

Поскольку при разработке UWP необходимо указать минимальную платформу, а разные платформы могут иметь разные API, вы можете узнать, какие API доступны сейчас, только прочитав документацию, и вы можете установить их сейчас.Microsoft.Toolkit.Uwp.PlatformSpecificAnalyzer Приходите и проверяйте. Эта библиотека представляет собой аналитическую библиотеку Roslyn, которая может помочь проверить, можно ли использовать некоторые специальные платформы при компиляции. Он может автоматически запрашивать платформу этого интерфейса и автоматически генерировать код.

Тестирование настраиваемой начальной страницы, созданной вручную

1. скопируйте файл XAML и все вспомогательные текстовые файлы или файлы разметки в папку %USERPROFILE%\My documents \ Visual Studio 2015 \ startpages \ .

2. если начальная страница ссылается на любые элементы управления или типы в сборках, которые не установлены с помощью Visual Studio, скопируйте эти сборки и вставьте их в папку установки Visual Studio\Common7\IDE\PrivateAssemblies \.

3. в Visual Studio командной строке введите команду devenv/рутсуффикс Exp , чтобы открыть экспериментальный экземпляр Visual Studio.

4. В экспериментальном экземпляре перейдите на страницу Сервис > Параметры > Среда > и выберите файл XAML в раскрывающемся списке настроить начальную страницу .

5. В меню Вид выберите пункт Начальная страница.

   Должна отобразиться настраиваемая Начальная страница. Если вы хотите изменить какие-либо файлы, необходимо закрыть экспериментальный экземпляр, внести изменения, скопировать и вставить измененные файлы, а затем повторно открыть экспериментальный экземпляр для просмотра изменений.

Проверка поведения по умолчанию

Запустите программу и запустите головоломку.
В элементе управления NumericUpDown для задачи сложения курсор мигает рядом с цифрой .

Введите 3 и обратите внимание, что в элементе управления отображается 30.

Введите 5 и обратите внимание, что появляется число 350, но через секунду оно меняется на 100.
Перед исправлением ошибки подумайте, почему она возникла. Подумайте, почему цифра не исчезла, когда вы ввели 3, и почему 350 меняется на 100, причем не сразу.
Такое поведение может показаться странным, но оно полностью соответствует логике кода

При нажатии кнопки Запуск ее свойство Enabled принимает значение False, из-за чего кнопка становится недоступна и отображается серым цветом. Программа переводит текущее выделение (фокус) на элемент управления, имеющий следующее наименьшее значение TabIndex, т. е. элемент управления NumericUpDown для задачи сложения. Когда вы нажимаете клавишу TAB для перехода к элементу управления NumericUpDown, курсор автоматически помещается в начало элемента управления, поэтому вводимые цифры появляются слева, а не справа. При вводе числа, превышающего значение свойства MaximumValue (которому присвоено значение 100), введенное число заменяется значением этого свойства.

Добавление пользовательского элемента управления WPF в решение

сначала добавьте пользовательский элемент управления Windows Presentation Foundation (WPF) в решение начальной страницы.

1. Создайте начальную страницу, используя созданную в статье Создание настраиваемой начальной страницы.

2. В Обозреватель решений щелкните решение правой кнопкой мыши, выберите Добавить, а затем щелкните создать Project.

3. в левой области диалогового окна создание Project разверните узел Visual Basic или Visual C# и выберите пункт Windows. В средней области выберите Библиотека пользовательских элементов управления WPF.

4. Присвойте элементу имя и нажмите кнопку ОК.

Создание экземпляра объекта XamlApplication в точке входа приложения WPF

Далее добавьте код к точке входа приложения WPF, чтобы создать экземпляр класса , определенного в проекте UWP (этот класс является производным от ).

1. В своем WPF проекте щелкните правой кнопкой мыши по узлу проекта, выберите Добавить -Новый элемент, затем выберите Класс. Назовите класс Program и щелкните Добавить.

   

   

   

   

   

   

   

   

   

   

2. Замените созданный класс кодом ниже, а затем сохраните файл. Замените пространством имен проекта приложения UWP, а  — пространством имен проекта приложения WPF.

3. Щелкните правой кнопкой мыши узел проекта и выберите пункт Свойства.

4. На вкладке Приложение в диалоговом окне «Свойства» щелкните раскрывающийся список Объект запуска и выберите полное имя класса , добавленного на предыдущем шаге.

   Примечание

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

5. Сохраните изменения в свойствах проекта.

Свойства

Необходимые компоненты

Чтобы разместить пользовательский элемент управления WinRT XAML в приложении WPF (или Windows Forms), вам потребуются указанные ниже компоненты в решении. Эта статья содержит инструкции по созданию каждого из этих компонентов.

• Код проекта и исходный код приложения. Использование элемента управления WindowsXamlHost для размещения настраиваемых элементов управления WinRT XAML поддерживается только в приложениях, предназначенных для .NET Core версии 3.x.

• Пользовательский элемент управления WinRT XAML Для настраиваемого элемента управления, который необходимо разместить, необходим исходный код, чтобы скомпилировать его в приложение. Как правило, настраиваемый элемент управления определяется в проекте библиотеки классов UWP, на которую вы ссылаетесь в решении с проектом WPF или Windows Forms.

• Проект приложения UWP, определяющий корневой класс Application, производный от XamlApplication. В проекте WPF или Windows Forms должен быть доступ к экземпляру класса Microsoft.Toolkit.Win32.UI.XamlHost.XamlApplication, предоставленному в наборе средств сообщества Windows, чтобы он мог обнаруживать и загружать настраиваемые элементы управления UWP XAML. Для этого рекомендуется определить объект в отдельном проекте приложения UWP, который является частью решения приложения WPF или Windows Forms.

  Примечание

  Решение может содержать только один проект, определяющий объект . Все пользовательские элементы управления WinRT XAML в приложении используют один и тот же объект . Проект, определяющий объект , должен содержать ссылки на все другие библиотеки и проекты WinRT, которые используются для размещения элементов управления в XAML Island.

  

  

  

  

  

  

Использование VisualState

Визуальные состояния определяются и активируются элементом управления. Например, при наведении указателя мыши на элемент управления активируется состояние . Изменения свойств можно анимировать на основе текущего состояния элемента управления. В предыдущем разделе с помощью <PropertyTrigger> фон кнопки изменялся на , когда свойство получало значение . Теперь вместо этого создайте визуальное состояние, которое анимирует изменение этого цвета, обеспечивая плавный переход. Дополнительные сведения об элементе VisualStates см. в разделе .

Чтобы преобразовать <PropertyTrigger> в анимированное визуальное состояние, сначала удалите элемент <ControlTemplate.Triggers> из вашего шаблона.

Затем в разделе <Grid> шаблона элемента управления добавьте элемент <VisualStateManager.VisualStateGroups> с <VisualStateGroup> для . Определите два состояния — и .

Все анимации, определенные в <VisualState> , применяются при активации соответствующего состояния. Создайте анимации для каждого состояния. Анимации помещаются в элемент <Storyboard> . Дополнительные сведения о раскадровках см. в статье Общие сведения о Storyboard.

• Норм.

  Это состояние анимирует заливку эллипса, восстанавливающую цвет элемента управления.

• MouseOver

  Это состояние анимирует изменение цвета эллипса на новый цвет: .

<ControlTemplate> будет иметь следующий вид.

Запустите проект

Обратите внимание, что при наведении мыши на кнопку цвет анимируется

Создание пакета приложения

При необходимости вы можете упаковать приложение WPF в пакет MSIX для развертывания. MSIX — это современная технология упаковки приложений для Windows. В ее основе лежат технологии установки MSI, APPX, App-V и ClickOnce.

В приведенных ниже инструкциях рассказывается, как упаковать все компоненты решения в пакет MSIX с помощью проекта упаковки приложения Windows в Visual Studio 2019. Эти действия необходимы только в том случае, если нужно упаковать приложение WPF в пакет MSIX.

Примечание

Если вы решили не упаковывать приложение в пакет MSIX для развертывания, на компьютерах с запущенными приложениями должна быть установлена среда выполнения Visual C++.

1. Добавьте новый проект упаковки приложений Windows в свое решение. При создании проекта выберите те же целевую и минимальную версии, что и для проекта UWP.

2. В проекте упаковки щелкните правой кнопкой мыши узел Приложения и выберите команду Добавить ссылку. В списке проектов выберите проект WPF в решении и нажмите кнопку ОК.

   Примечание

   Если вы хотите опубликовать приложение в Microsoft Store, необходимо добавить в проект упаковки ссылку на проект UWP.

3. Настройте решение для конкретной платформы, например x86 или x64. Это необходимо для выполнения сборки приложения WPF в пакет MSIX с помощью проекта упаковки приложений Windows.

   1. В обозревателе решений, щелкните правой кнопкой мыши по узлу решения и выберите Свойства -Свойства конфигурации -Configuration Manager.
   2. В списке Active solution platform (Активная платформа решения) выберите пункт x64 или x86.
   3. В строке проекта WPF в столбце Платформа щелкните Создать.
   4. В диалоговом окне Создание платформы решения выберите x64 или x86 (ту же платформу, которую вы выбрали в списке Active solution platform (Активная платформа решения)) и нажмите кнопку ОК.
   5. Закройте открытые диалоговые окна.

4. Выполните сборку и запустите проект упаковки. Убедитесь, что WPF выполняется и элемент управления UWP отображается надлежащим образом.