Всплывающие элементы
Всплывающий элемент — это контейнер с возможностью исчезновения, который отображает в качестве содержимого произвольный пользовательский интерфейс. Всплывающие элементы могут содержать другие вложенные всплывающие элементы или контекстные меню.
Выбор правильного элемента управления
- Не используйте всплывающий элемент вместо подсказки или контекстного меню. Используйте подсказку, чтобы вывести краткое описание, которое исчезает через определенное время. Для контекстных действий, связанных с элементом пользовательского интерфейса, например копированием или вставкой, используйте контекстное меню.
Рекомендации по целесообразности использования диалоговых окон и всплывающих элементов (аналогичных элементов управления) приведены в статье Диалоговые окна и всплывающие элементы.
UWP и WinUI 2
Сведения и примеры в этой статье оптимизированы для приложений, использующих Windows App SDK и WinUI 3, но обычно применимы к приложениям UWP, использующим WinUI 2. Сведения и примеры для конкретной платформы см. в справочнике по API UWP.
В этом разделе содержатся сведения, необходимые для использования элемента управления в приложении UWP или WinUI 2.
API для этого элемента управления существуют в пространстве имен Windows.UI.Xaml.Controls .
- API UWP:класс Flyout, свойство Button.Flyout
- Откройте приложение «Коллекция WinUI 2» и просмотрите всплывающий элемент в действии. Приложения из коллекции WinUI 2 включают интерактивные примеры большинства элементов управления, возможностей и функций WinUI 2. Получите приложение из Microsoft Store или получите исходный код в GitHub.
Мы рекомендуем использовать последнюю версию WinUI 2 , чтобы получить самые последние стили и шаблоны для всех элементов управления. WinUI 2.2 или более поздней версии включает новый шаблон для этого элемента управления, использующий скругленные углы. Дополнительные сведения см. в разделе о радиусе угла.
Создание всплывающего элемента
- Важные API: класс Flyout, свойство Button.Flyout
Приложение «Коллекция WinUI 3» содержит интерактивные примеры большинства элементов управления, функций и функций WinUI 3. Получение приложения из Microsoft Store или исходный код на сайте GitHub
Всплывающие элементы связаны с определенными элементами управления. Вы можете использовать свойство Placement для указания места отображения всплывающего элемента: вверху, слева, внизу, справа или в центре. Если выбрать полный режим размещения, приложение растягивает всплывающий элемент или размещает его в центре окна приложения. Некоторые элементы управления, например Button, содержат свойство Flyout, которое можно использовать для привязки всплывающего элемента или контекстного меню.
В этом примере создается простой всплывающий элемент, в котором отображается текст при нажатии кнопки.
Если элемент управления лишен свойства «Flyout», вы можете использовать присоединенное свойство FlyoutBase.AttachedFlyout. При этом также следует вызвать метод FlyoutBase.ShowAttachedFlyout для отображения всплывающего элемента.
В этом примере к изображению добавляется простой всплывающий элемент. Когда пользователь нажимает на изображение, приложение отображает всплывающий элемент.
private void Image_Tapped(object sender, TappedRoutedEventArgs e)
В предыдущих примерах всплывающие элементы определялись внутренне. Вы также можете определить всплывающий элемент как статический ресурс и использовать его с несколькими элементами. В этом примере показано создание более сложного всплывающего элемента, в котором отображается увеличенный вариант изображения при нажатии его эскиза.
" MaxHeight="400" MaxWidth="400" Stretch="Uniform"/> " DataContext=">"/> " DataContext=">"/> " DataContext=">"/> private void Image_Tapped(object sender, TappedRoutedEventArgs e)
Стилизация всплывающего элемента
Для стилизации всплывающего элемента изменяется его свойство FlyoutPresenterStyle. В этом примере показан абзац создания программы-оболочки текста и делает блок текста доступным для программ чтения с экрана.
" Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."/> Изменение стиля всплывающих элементов для более наглядного отображения
Элементы управления с исчезновением, например всплывающие элементы, захватывают фокус клавиатуры или геймпада внутри промежуточного пользовательского интерфейса, пока не будут закрыты. Для предоставления визуальной подсказки по этому поведению элементы управления с исчезновением на приставке Xbox отображают наложение, затемняющее контрастность и видимость вне области действия пользовательского интерфейса. Это поведение можно изменить с помощью свойства LightDismissOverlayMode . По умолчанию всплывающие элементы пользовательского интерфейса отображают наложение с исчезновением на приставке Xbox, но не на других семействах устройств, хотя приложения могут принудительно устанавливать наложению постоянное значение Вкл. или Выкл. .
Поведение с исчезновением
Всплывающие элементы можно закрыть с помощью таких действий исчезновения:
- Коснитесь области за пределами всплывающего элемента.
- Нажмите клавишу Escape на клавиатуре.
- Нажмите аппаратную или программную системную кнопку «Назад».
- Нажмите кнопку геймпада «B».
При закрытии касанием этот жест обычно не передается пользовательскому интерфейсу под элементом. Например, если за открытым всплывающим элементом отображается кнопка, первое касание приведет к закрытию всплывающего элемента, но кнопка при этом не будет активирована. Для нажатия кнопки нужно второе касание.
Вы можете изменить это поведение, назначив кнопку в качестве прозрачного элемента ввода для всплывающего элемента. Всплывающий элемент закроется при выполнении действий исчезновения, описанных выше, и передаст событие касания назначенному элементу OverlayInputPassThroughElement . Такое поведение рекомендуется использовать для ускорения взаимодействия пользователей с функционально схожими элементами. Если ваше приложение имеет коллекцию избранного и каждый элемент в коллекции содержит присоединенный всплывающий элемент, логично предположить, что пользователям может потребоваться последовательно взаимодействовать с несколькими всплывающими элементами.
Старайтесь не назначать прозрачный элемент ввода наложения, так как это приведет к деструктивным действиям. Пользователи привыкают к действиям незаметного исчезновения, которые активируют основной пользовательский интерфейс. Кнопки закрытия, удаления или аналогичные разрушительные кнопки не должны активироваться при закрытии света, чтобы избежать непредвиденного и аварийного поведения.
В следующем примере будут активированы все три кнопки внутри FavoritesBar при первом касании.
Bing "/> private void Folder2_Click(object sender, RoutedEventArgs e) < Flyout flyout = new Flyout(); flyout.OverlayInputPassThroughElement = FavoritesBar; . flyout.ShowAt(sender as FrameworkElement); Получение примера кода
- Пример коллекции WinUI — просмотр всех элементов управления XAML в интерактивном формате.
Похожие статьи
- Подсказки
- Меню и контекстное меню
- Класс Flyout
- Класс ContentDialog
Calendar Flyout — календарь для панели задач из Windows 10
В Windows 11 календарь, вызываемый с панели задач, лишился часов с секундами, не поддерживает показ запланированных пользователем событий и не позволяет добавлять новые. Calendar Flyout возвращает нуждающимся эту частичку Windows 10.
Приложения и программы
| 7 ноября 2022 в 09:40
Calendar Flyout служит для ведения календаря дел и событий с панели задач, практически полностью повторяя интерфейс аналогичного инструмента Windows 10. Разве что вызывается это приложением кликом по собственной иконке, а не по часам, как в оригинале.
Также как в десятке, добавить новое событие в календарь Outlook, можно прямо из всплывающей панели. Список дел на выбранную дату можно легко свернуть, а в заголовке кроме даты есть и часы с секундами.
За временем Calendar Flyout позволяет наблюдать сразу в трёх часовых поясах, вызываться на рабочий стол может и при помощи настраиваемого сочетания клавиш. По желанию можно включить показ индикатора о событиях прямо на иконке приложения в трее.
Распространяется Calendar Flyout на платной основе — $1,49, с бесплатным пробным режимом. Язык интерфейса пока доступен только один — английский.
Новые функции: Microsoft начала распространение Windows 10 Insider Preview Build 19013
Программный гигант Microsoft выпустил новую версию Insider Preview Windows 10. Версия 20H1 с номером сборки 19013 теперь доступна всем подписчикам программы Microsoft Fast Ring. Кроме многочисленных исправлений, Microsoft добавила и ряд новых функций. Среди них - обновленные каомодзи и символы ASCII. Их можно выбирать в диалоговом меню Windows+точка.
Одна из важных инноваций - приложение Your Phone, разработка которого проводилась совместно с Samsung. Теперь подключение через Bluetooth не является обязательным.
Еще одна новость касается Windows Subsystem for Linux (WSL) 2, которая будет отдавать неиспользованную память VM Linux обратно Windows. Отметим обновление набора утилит PowerToys v0.12. Появилась в том числе утилита PowerRename для переименования нескольких файлов одновременно. Наконец, новая версия билда содержит DirectX 12 Preview с поддержкой DirectX Raytracing Tier 1.1 и Mesh Shaders.
В новой сборке были исправлены следующие ошибки:
- We fixed an issue resulting in frames being skipped, starting with Build 19002, when running games and videos fullscreen.
- We fixed an issue where initiating “Reset this PC” with the cloud download option wasn’t working when started from Windows RE.
- We fixed an issue resulting in preinstalled apps (like Calculator) and other UWP apps being missing from the Apps & Features page in Settings.
- We fixed an issue resulting in Wi-Fi unexpectedly resetting (turning off and back on) frequently in recent flights.
- We fixed an issue where Wi-Fi Settings might get stuck saying Connecting, even though the network flyout (correctly) indicated that you were Connected.
- We fixed an issue where an update being temporarily suspended would result in an 0xc19001e1 error being displayed in Windows Update history.
- We fixed an issue resulting in the “Open location” search result option not working if the search result was a folder.
- We fixed an issue where if you moved Cortana’s window to certain places on your screen, and then closed the window, the minimize animation wouldn’t go towards Cortana’s icon on the taskbar.
- We fixed an issue resulting in File Explorer not rendering correctly sometimes when using multiple monitors with different DPIs on the previous flight.
- We fixed an issue where you could get into a state where it wasn’t possible to set focus to File Explorer’s search box in order to type your query.
- We fixed an issue that could result in the app thumbnail disappearing when you right clicked it in Task View.
- We fixed an issue that could result in the Send Message button in certain notifications not being visible when using High Contrast White.
- We fixed an issue where the notification following WIN+Shift+S might have a blank space for the screenshot (rather than actually displaying the screenshot).
- We fixed an issue resulting in Resource Manager unexpectedly not showing any disk activity.
- We fixed an issue where, if you called SUBST with a path ending with a \ it would give a Path not found error.
- We fixed a memory leak with running apps that repeatedly sent calls to adjust gamma.
- Some of you have reached out about when trying to shutdown, seeing a message saying that an app named “G” was preventing shutdown. We investigated and found an issue where windows related to GDI+were only referenced as “G.” We’ve fixed this, so going forward, these will now have the name “GDI+ Window ()”, where will show the .exe name of the app using GDI+.
- We fixed an issue resulting in speechruntime.exe using an unexpectedly high amount of CPU on the previous flight.
- We fixed an issue resulting in Bluetooth devices potentially not reconnecting as expected after closing then reopening the device lid for certain devices.
- We fixed an issue resulting in the Surface Dial not scrolling in recent builds if you switched to something like zoom and then back to scrolling.
- We fixed an issue where Narrator would sometime report focus as the page instead of reporting the actual focused control within Chrome.
- We fixed an issue where Narrator would not automatically start reading the Narrator user guide webpage and the YouTube webpage.
- We corrected Narrator’s “Next Table” command so that it would work in Excel.
- We fixed an issue where the text cursor indicator was visible on top of the lock screen background picture.
- We fixed an issue where the text cursor indicator preview wasn’t displaying correctly in Settings when using dark theme.
- We fixed an issue where when using dark theme, the hardware keyboard text prediction candidate window was unreadable due to black text on a dark grey background.
- We fixed an issue that could result in the touch keyboard flickering when inputting emoji.
- We fixed an issue where English punctuations were outputted when using the Chinese Pinyin and Wubi IMEs, even if input mode was set to Chinese under the default IME settings. Thanks for your feedback.
- We’ve fixed an issue where the character width of alphanumeric characters when using the Traditional Chinese Bopomofo IME would change from half width to full width unexpectedly in some input fields. Thanks for reporting it! If you feel this issue hasn’t been fully addressed in the new version of Bopomofo IME.
- We’ve fixed an issue where after successfully updating to a new build, the Windows Update Settings page may have shown the same build needed to be installed.
- We’ve fixed an issue where Optional drivers were failing to install.
Но часть ошибок остаются:
- BattlEye and Microsoft have found incompatibility issues due to changes in the operating system between some Insider Preview builds and certain versions of BattlEye anti-cheat software. To safeguard Insiders who might have these versions installed on their PC, we have applied a compatibility hold on these devices from being offered affected builds of Windows Insider Preview.
- We’ve heard that Settings still isn’t available outside of launching via the URI (ms-settings:) for some Insiders and are investigating.
- If you use remote desktop connection and the target PC is on this build, within about an hour (if not sooner), DWM may start crashing, and the session window will either go totally black, experience black flashes, or you may get signed out of the remote desktop session altogether. We appreciate your patience.
Ноябрьское обновление финализировано
Обновление Windows под версией 1909 в рамках программы Microsoft Slow Ring должно быть скоро выпущено. Но пока неизвестно, когда именно это произойдет. Вполне возможно, что Microsoft начнет распространение последней версии Windows в ближайшие дни. Будем надеяться, что с новым обновлением 1909 все пройдет гладко. Раньше крупные обновления у Microsoft проходили не всегда безупречно.
Xamarin.Forms Shell
В конце мая Microsoft выпустила в релиз Xamarin.Forms Shell — оболочку нацеленную на упрощение создания кроссплатформенных мобильных приложений и включающий в себя следующий функционал: боковое меню, вкладки, навигация, поиск.
Давайте начнем с создания пустого проекта Xamarin.Forms в Visual Studio 2019. Обратите внимание, на данный момент Shell официально поддерживает только 2 платформы: iOS и Android, UWP еще в стадии разработки. Рекомендую сразу же обновить все nuget пакеты в решении.
Далее создадим производный от Shell класс AppShell, для этого в добавим XAML-файл в общий проект со следующим содержимым:
AppShell.xaml
AppShell.xaml.cs
namespace HelloShell < [XamlCompilation(XamlCompilationOptions.Compile)] public partial class AppShell : Shell < public AppShell() < InitializeComponent(); >> >после чего в файле App.xaml.cs указываем что в качестве MainPage у нас будет выступать AppShell:
public App() < InitializeComponent(); //MainPage = new MainPage(); MainPage = new AppShell(); >и пару ContentPage страниц: Page1 и Page2. Так же в нашем тестовом приложении будут использоваться изображения, поэтому добавим их в платформозависимые проекты, для андройд в папку Resources=>drawable, а для ios в папку Resources.
Боковое меню
Боковое меню (часто его называют гамбургер меню) представляет из себя выезжающее меню, которое можно вызвать по нажатию на кнопку или специальным жестом и включает в себя заголовок (Header), список страниц (Flyout Items) и меню (Flyout Menu)
AppShell.xaml
AppShell.xaml.cs
namespace HelloShell < [XamlCompilation(XamlCompilationOptions.Compile)] public partial class AppShell : Shell < public AppShell() < InitializeComponent(); >private async void MenuItem_Clicked(object sender, System.EventArgs e) < await DisplayAlert("","Привет Хабр!","OK"); >> >Вкладки
Xamarin.Forms Shell в качестве корневого шаблона может поддерживать нижние и верхние вкладки, а так же их комбинацию:
AppShell.xaml.cs
Как видите, сделать это довольно просто. Еще одним преимуществом является эффективная загрузка страниц, которая позволяет инициализировать страницу только когда на нее переходит пользователь, что существенно ускоряет запуск приложения.
Навигация
Xamarin.Forms предоставляет улучшенную навигацию по интерфейсу на основе URI, позволяя переходить на любую страницу в приложении без соблюдения строгой иерархии и переходить назад без необходимости прохода всех страниц в стеке навигации. Чтобы навигация работала, страницу нужно зарегистрировать, сделать это можно в разметке XAML в FlyoutItem, Tab и ShellContent с помощью свойства Route
Routing.RegisterRoute("page1", typeof(Page1));навигация осуществляется с помощью команды
await Shell.Current.GoToAsync("//page2");В качестве примера внесем изменения в следующие файлы:
AppShell.xaml
MainPage.xaml
MainPage.xaml.cs
public partial class MainPage : ContentPage < public MainPage() < InitializeComponent(); >private async void ToPage2(object sender, EventArgs e) < await Shell.Current.GoToAsync("//page2"); >>
Page2.xaml.cs
public partial class Page2 : ContentPage < public Page2() < InitializeComponent(); >private async void Back(object sender, EventArgs e) < await Shell.Current.GoToAsync("//main"); >>
Поиск
Xamarin.Forms Shell имеет встроенные функции поиска, предоставляемые классом SearchHandler. Чтобы добавить функцию поиска на страницу, мы создадим класс PetSearchHandler производный от SearchHandler и переопределим методы OnQueryChanged и OnItemSelected. Метод OnQueryChanged срабатывает при вводе пользователем текста в поисковое поле и принимает два аргумента: oldValue и newValue, которые содержат предыдущий и новый поисковый запрос соответственно.
Метод SelectedItem выполняется в момент выбора пользователем результата поиска и принимает в качестве параметров объект, в данном случае Animal.
Для примера создадим модель Animal
Models/Animal.cs
public class Animal < public string Name < get; set; >public string ImageUrl < get; set; >>
Класс PetData который будет содержать коллекцию наших любимых кошечек и собачек
Data/PetData.cs
public static class PetData < public static IListPets < get; private set; >static PetData() < Pets = new List(); Pets.Add(new Animal < Name = "Afghan Hound", ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/6/69/Afghane.jpg" >); Pets.Add(new Animal < Name = "Alpine Dachsbracke", ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/2/23/Alpejski_gończy_krótkonożny_g99.jpg/320px-Alpejski_gończy_krótkonożny_g99.jpg" >); Pets.Add(new Animal < Name = "American Bulldog", ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/5/5e/American_Bulldog_600.jpg" >); Pets.Add(new Animal < Name = "Abyssinian", ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/9/9b/Gustav_chocolate.jpg/168px-Gustav_chocolate.jpg" >); Pets.Add(new Animal < Name = "Arabian Mau", ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/d/d3/Bex_Arabian_Mau.jpg" >); Pets.Add(new Animal < Name = "Bengal", ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/b/ba/Paintedcats_Red_Star_standing.jpg/187px-Paintedcats_Red_Star_standing.jpg" >); Pets.Add(new Animal < Name = "Burmese", ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/0/04/Blissandlucky11.jpg" >); Pets.Add(new Animal < Name = "Cyprus", ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b9/CyprusShorthair.jpg/320px-CyprusShorthair.jpg" >); Pets.Add(new Animal < Name = "German Rex", ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/c/c7/German_rex_harry_%28cropped%29.jpg" >); > >
PetSearchHandler.cs
public class PetSearchHandler : SearchHandler < protected override void OnQueryChanged(string oldValue, string newValue) < base.OnQueryChanged(oldValue, newValue); if (string.IsNullOrWhiteSpace(newValue)) < ItemsSource = null; >else < ItemsSource = PetData.Pets .Where(pet =>pet.Name.ToLower().Contains(newValue.ToLower())) .ToList(); > > protected override async void OnItemSelected(object item) < base.OnItemSelected(item); var pet = item as Animal; if (pet is null) return; await App.Current.MainPage.DisplayAlert("Вы выбрали",pet.Name,"ok"); >>
Добавим страницу Pets в которой зададим наш PetSearchHandler
В итоге у нас должна получиться страница с поисковым полем в навигационном баре, при вводе поисковой фразы отображается простой список из названий питомцев.
При желании мы легко можем настроить содержимое ячейки списка, добавив туда картинку и несколько текстовых меток:
" Aspect="AspectFill" HeightRequest="40" WidthRequest="40" /> " FontAttributes="Bold" />