Как изменить иконки uwp приложений

Обновлено: 06.01.2025

прежде чем идти дальше, я упомяну, что я пробовал решения в следующее:

Как установить значок для моего приложения в visual studio 2008?

установить значок приложения из ресурсов в VS 05

Я пытаюсь установить значок для моего приложения.

AFAIK, мне нужно потенциально 3 изображения?

1 изображение является фактическим изображением в проводнике при нажатии на кнопку .exe (миниатюра для exe)
1 Изображение (крошечное) в верхнем левом углу (16 x 16? Не совсем уверен)
1 изображение в док-станции меню "Пуск", слева от приложения (может быть, 32x32? опять не уверен)

Так что все в порядке.

теперь я выбрал значок. Как использовать его в одной из вышеперечисленных ситуаций?

Я попытался добавить его в ресурсы, ничего не происходит. Следуя этому первому решению SO,

" сначала перейдите к представлению ресурсов (от меню: Вид --> другое окно --> вид ресурса). Затем в представлении ресурсов перейдите по ресурсам, если таковые имеются. Если ресурс типа Icon, добавленный Visual Studio, уже существует, откройте и отредактируйте его. В противном случае щелкните правой кнопкой мыши и выберите Добавить ресурс, а затем добавить новый значок."

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

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

1) Как установить значок приложения для приложения WPF?

@742 ответ работает довольно хорошо, но, как указано в комментариях при запуске из отладчика VS, общий значок все еще отображается.

Если вы хотите иметь свой значок, даже когда вы нажимаете F5, вы можете добавить в главном окне:

где вы указываете путь к значку (значок может быть *.jpg , *.ico .)

(обратите внимание, что вам все равно нужно будет установить значок приложения, или он все равно будет по умолчанию в Проводнике).

поместите значок в папку icon_path> в каталоге проекта
имитировать путь к папке icon_path> в решении
Добавить новый элемент (значок) в папка решения, которую вы создали
добавьте следующий код в код окна WPF позади:

Icon = new BitmapImage (новый Uri ("icon_path>", UriKind.Родственник));

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

Версия 2: segmdl2.zip ( 78.68 КБ )

С квадратными аватарками на плитке "Люди": segmdl2.zip ( 77.88 КБ )

Оригинал с квадратными аватарками на плитке "Люди": segmdl2.zip ( 82.61 КБ )
(Скрины тут)

Если вы установили пак значков, то отпишитесь - как работает. Хоть всё было протесировано и подправлено 100500 раз, косяки могут быть.
Тема-источник способа

Причина редактирования: Квадратные аватарки завезли

Дак это же к шрифтам относится, разве нет?:D

dovlan, будут наверное, а как вы не беспокоить рабочим сделали?

RandomWP, а кто сказал, что он рабочий? Он там просто есть, но при нажатии будет запускать Яндекс.

Кстати, по поводу подмены шрифтов и значков. Я не могу создавать папки и копировать файлы в ФС телефона. Как это можно, наконец-то, вылечить?

* dovlan, будут наверное, а как вы не беспокоить рабочим сделали?
* RandomWP, а кто сказал, что он рабочий? Он там просто есть, но при нажатии будет запускать Яндекс.

У меня прошивка, немец(через вп интерналс ставил) перевел тело на инглиш, запустил кортану, выбрал язык английский, перевел снова тело на русский и в кортане язык по умолчанию не менял, тихие работают и напоминалка тоже

Сделал все по инструкции но после перезагрузки появились крестики вместо значков откатил обратно,но я менял шрифт через прогу font style наверно из за этого и получилось так, позже попробую на родном шрифте. :) alexummc, попробуйте перекачать, вернув всё сначала на дефолт, а потом из шапки кидайте.
Сначала кажется, что то же самое, но в моём паке намного больше иконок (Например: есть иконочки папок, создать папку, иконочка файла) В общем, на люмии 550 не получилось - доступ к тому значению в реестре заблокирован даже с интероп анлоком

Иконочки встали как и было в инструкции. Полет нормальный вроде.Единственное значок экономии заряда не отображается в статус баре на раб столе.

Хмммм, очень интересно. Круги на плитке людей походу зависят от иконпака. o.O С XDA поставил какой-то, круги на людях стали меньше. :wacko: Надо порыться, может квадраты верну ;)

Каждое приложение имеет значок или логотип, который представляет его, и этот значок появляется в нескольких местах в оболочке Windows.

Список приложений в меню "Пуск"
Панель задач и диспетчер задач
Плитки приложений
Экран-заставка приложения
В Microsoft Store

В этой статье рассматриваются основы создания значков приложений, использование Visual Studio для управления ими и управление вручную по необходимости.

(Эта статья посвящена значкам, которые представляют само приложение; общие рекомендации по значкам см. в статье Значки.)

Типы значков, расположения и масштабные коэффициенты

По умолчанию Visual Studio сохраняет ваши активы значков в подкаталог активов. Вот список различных типов значков с указанием, где они появляются и как называются.

Имя значка	Отображается в	Имя файла актива
Маленькая плитка	Меню "Пуск"	SmallTile.jpg
Средняя плитка	Меню "Пуск", список Microsoft Store*	Square150x150Logo.jpg
Широкая плитка	Меню "Пуск"	Wide310x150Logo.PNG
Большая плитка	Меню "Пуск", список Microsoft Store*	LargeTile.jpg
Значок приложения	Список приложений в меню "Пуск", панель задач, диспетчер задач	Square44x44Logo.jpg
Экран-заставка	Экран-заставка приложения	SplashScreen.jpg
Эмблема	Плитки приложений	BadgeLogo.jpg
Логотип упаковки / логотип Store	Установщик приложений, Центр партнеров, параметр "Сообщить о приложении" в Store, параметр "Написать отзыв" в Store	StoreLogo.jpg

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

Коэффициент масштабирования определяет размер элементов пользовательского интерфейса, таких как текст. Масштабирование факторов в диапазоне от 100 до 400 %. Большие значения создают большие элементы пользовательского интерфейса, облегчая их просмотр на экранах с высоким разрешением.

Windows автоматически задает коэффициент масштабирования для каждого дисплея на основе его показателя DPI (точек на дюйм) и расстояния от экрана устройства. (Пользователи могут переопределить значение по умолчанию, перейдя на страницу Параметры > Экран > Масштаб и разметка.)

Поскольку ресурсы значков приложений являются растровыми изображениями, а они плохо масштабируются, мы рекомендуем указывать версию каждого значка для каждого масштабного коэффициента: 100 %, 125 %, 150 %, 200 % и 400 %. Значки занимают немало места! К счастью, Visual Studio предоставляет инструмент, который позволяет легко создавать и обновлять эти значки.

Список изображений Microsoft Store

"Как я могу указать изображения для списка моих приложений в Microsoft Store?"

По умолчанию мы используем некоторые изображения из ваших пакетов в Store, как описано в таблице, которая находится в верхней части этой страницы (вместе с другими изображениями, которые вы предоставляете в процессе отправки). Тем не менее вы также можете настроить, чтобы при показе страницы приложения клиентам, использующим Windows 10 (включая Xbox), Store не мог использовать изображения логотипов из ваших пакетов приложения, а показывал только загружаемые изображения. Так вы сможете эффективнее настроить внешний вид вашего приложения в Microsoft Store. (Обратите внимание, что если ваш продукт поддерживает более ранние версии ОС, эти клиенты могут по-прежнему видеть изображения из ваших пакетов, даже если вы используете этот параметр.) Это можно сделать в разделе Логотипы Store на шаге процесса отправки Список Store.

После установки этого флажка появится новый раздел под названием Отображение изображений Store. Здесь вы можете загрузить 3 размера изображений, которые Store будет использовать вместо изображений логотипов из пакетов вашего приложения: 71 x 71, 150 x 150 и 300 x 300 пикселей. Требуется только размер 300 x 300, хотя мы рекомендуем предоставить все 3 размера.

Управление значками приложений с помощью Конструктора манифестов в Visual Studio

Visual Studio предоставляет очень полезное средство для управления значками приложений, которое называется Конструктор манифестов.

Чтобы запустить Конструктор манифестов, необходимо следующее.

В Visual Studio откройте проект универсальной платформы Windows.

В обозревателе решений дважды щелкните Package.appxmanifest.

Конструктор манифестов отображается в Visual Studio.

Щелкните вкладку Визуальные активы.

Создание всех активов одновременно

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

Все, что вам нужно сделать, — это предоставить одно изображение, и Visual Studio создаст маленькую, среднюю, большую, широкую, очень большую плитку, значок приложения, заставку и логотипы пакетов для каждого масштабного коэффициента.

Чтобы создать все ресурсы одновременно, выполните следующее.

(Дополнительно.) В разделе Параметры отображения настройте следующие параметры:

a. Короткое имя Укажите короткое имя для вашего приложения.

b. Показать имя. Укажите, хотите ли вы отображать короткое имя на средних, широких или больших плитках.

d. Фон экрана-заставки. Укажите шестнадцатеричное значение или имя цвета для фона экрана-заставки.

Щелкните Создать.

Visual Studio создает файлы изображений и добавляет их в проект. Если вы хотите изменить свои ресурсы, просто повторите процесс.

Масштабируемые ресурсы значков соответствуют следующему соглашению об именах файлов.

Имя файла-масштабирование-коэффициент масштабирования.jpg

Square150x150Logo-scale-100.jpg, Square150x150Logo-scale-200.jpg, Square150x150Logo-scale-400.jpg

Обратите внимание на то, что Visual Studio не создает логотип по умолчанию. Это потому, что ваш логотип значка уникален и он не должен соответствовать значкам других приложений. См. сведения об уведомлениях на индикаторах событий для приложений для Windows.

Подробнее о ресурсах значков приложения

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

Ресурс значка приложения отображается во многих местах: на панели задач Windows, в виде задач, ALT+TAB и в правом нижнем углу плиток в меню "Пуск". Поскольку ресурс значка приложения появляется во многих местах, у него есть некоторые дополнительные параметры определения размера и размещения, которых нет у других ресурсов: ресурсы "целевого размера" и ресурсы "без основы".

Ресурсы значков приложения целевого размера

В дополнение к стандартным размерам масштабного коэффициента ("Square44x44Logo.scale-400.jpg"), мы также рекомендуем создавать ресурсы "целевого размера". Мы называем их ресурсами целевого размера, потому что они нацелены на конкретные размеры, например 16 пикселей, а не на конкретные масштабные коэффициенты, например 400. Ресурсы целевого размера предназначены для областей, которые не используют позицию масштабирования системы:

список переходов на начальном экране (компьютеры);
нижний угол плитки начального экрана (компьютеры);
сочетания клавиш (компьютеры);
панель управления (компьютеры).

Ниже приведен список ресурсов целевого размера.

Размер ресурса	Пример имени файла
16x16*	Square44x44Logo.targetsize-16.jpg
24x24*	Square44x44Logo.targetsize-24.jpg
32x32*	Square44x44Logo.targetsize-32.jpg
48x48*	Square44x44Logo.targetsize-48.jpg
256x256*	Square44x44Logo.targetsize-256.jpg
20x20	Square44x44Logo.targetsize-20.jpg
30x30	Square44x44Logo.targetsize-30.jpg
36x36	Square44x44Logo.targetsize-36.jpg
40x40	Square44x44Logo.targetsize-40.jpg
60x60	Square44x44Logo.targetsize-60.jpg
64x64	Square44x44Logo.targetsize-64.jpg
72x72	Square44x44Logo.targetsize-72.jpg
80x80	Square44x44Logo.targetsize-80.jpg
96x96	Square44x44Logo.targetsize-96.jpg

* Как минимум мы рекомендуем предоставить эти размеры.

Для таких ресурсов не нужно добавлять заполнение, так как Windows добавит его при необходимости. Для этих ресурсов предусмотрен минимальный занимаемый объем памяти (16 пикселей).

Ниже приведен пример таких ресурсов в том виде, в котором они отображаются в значках на панели задач Windows.

Ресурсы без основы

По умолчанию Windows использует целевой ресурс поверх цветной задней панели по умолчанию. Если вы хотите, вы можете предоставить целевой ресурс без основы. "Без основы" означает, что ресурс будет отображаться на прозрачном фоне. Имейте в виду, что эти ресурсы будут отображаться на различных цветах фона.

Ниже приведены также области, которые используют ресурсы значков приложений без основы.

Панель задач и эскиз панели задач (компьютеры)
Список переходов на панели задач
Представление задач
ALT+TAB

Ресурсы без основы и тем

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

Целевой объект и изменения размера без основы

Вот рекомендации по размерам для специальных ресурсов в масштабе 100 %:

Подробнее о ресурсах экрана-заставки

Подробнее об эмблемах ресурсов

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

Настройка заполнения ресурсов

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

Оптимизация под конкретные темы, языки и другие условия

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

С выходом Windows 10 компания Microsoft вернула понятие окна в его первозданном виде для приложений из Windows Store. Теперь, используя привычные кнопки в правом верхнем углу, можно менять размер, сворачивать/разворачивать и закрывать окно, независимо от типа приложения. Самое интересное, что Microsoft не отказалась от своего изначального направления – ориентации на контент. Эта философия не универсальна, но она хорошо подходит для целого пласта приложений. Согласитесь, если вы делаете игру или читалку, то стандартный заголовок с цветами заданными автоматически может слегка подпортить дизайн приложения. Поэтому новые широкие возможности настройки заголовка в приложениях универсальной платформы Windows (UWP) стали безусловным плюсом.

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

Сделать это крайне просто:

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

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

Приятное дополнение такого подхода в том, что приложение сразу запустится в полноэкранном режиме, включая экран-заставку, а также запомнит данное правило для последующих запусков.

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

2. Тонкая настройка. На самом деле, возможность полностью заменить стандартный заголовок на свой без необходимости заботится о стандартном поведении вроде перетаскивания окна за заголовок появилась впервые. По сути это значит, что теперь можно разместить на месте заголовка все, что придет в голову. Данный способ позволяет заменить только ту часть заголовка, которая содержит иконку и наименование приложения. Часть с кнопками управления окном заменить на собственную не получится.

Если погрузиться в этот функционал, слово «замена» не совсем подходит. Скорее мы просим платформу скрыть стандартный заголовок и говорим какой элемент в XAML будет выполнять его функции.

Делается всего двумя строчками кода:

И вот здесь начинается самое интересное. Указанный элемент может не только сильно отличаться от привычного заголовка, но и располагаться в любом месте окна. Вторая строчка кода не поместит его в нужное место и не даст правильных размеров, она всего лишь уведомит платформу о том, что по мнению разработчика является заголовком. Единственное, что получится в итоге – это возможность перетаскивать окно нажатием на данный элемент, без необходимости дополнительных действий в коде.

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

Как это выглядит в XAML:

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

Во-первых, если сообщить платформе о том, что нужно использовать собственный заголовок, она отдаст ранее не доступную часть окна под макет, а значит все содержимое сдвинется вверх. Учитывая это, нужно позаботиться о том, чтобы в верхней части макета был только элемент заменяющий стандартный заголовок, а также убедиться, что ничто не перекрывается кнопками управления окном. В XAML выше корневой Grid отдает под заголовок одну строку высотой в 32 единицы. Здесь кроется еще один подвох – высота кнопок управления окном зависит от настроек Windows и равна 32 только при стандартных настройках, поэтому уважающий своего пользователя разработчик позаботится об отслеживании изменения настроек и отреагирует на это. В статье MSDN, посвященной методу Window.SetTitleBar можно узнать подробнее о том, как это сделать.

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

Вам может показаться, что обойти предыдущее ограничение можно просто убрав строчку кода:

Но, платформа просто скроет стандартный заголовок, а необходимый элемент в качестве заголовка не установит. Тогда можно просто определить участки, за которые окно можно перетаскивать и добавить нужные действия в коде? Но, нет, все не так просто. На самом деле, если не вызвать метод SetTitleBar, то все что находится в макете окна попадет на место бывшего заголовка, потеряет возможность отлавливать ввод и будет вести себя как заголовок. Для чего же тогда нужна эта строчка кода? Она нужна для того, чтобы точно определить места, ведущие себя как заголовок. Если необходимо поместить туда кнопку, то она должна быть за пределами элемента CustomTitleBar.

Перепишем наш XAML следующим образом:

А в коде окна будет написано следующее:

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

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

Экспериментируя с данным кодом, можно добиться многих интересных результатов, но не стоит забывать о стандартизации и удобстве. Например, вы можете поместить CustomTitleBar внизу окна и тогда появится возможность перетаскивать окно не за верхнюю, а за нижнюю часть, но пользователь вряд ли скажет за это «спасибо». Хорошо обдумайте необходимость решения, прежде чем его применять. Кстати очень хорошим примером реализации собственного заголовка можно назвать браузер Microsoft Edge, в котором частью заголовка являются вкладки.

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

Для сокращения кода можно получить ссылку на текущий TitleBar и далее работать с ней:

Рассмотрим все свойства, отвечающие за цвета элементов заголовка:

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

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

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

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

1) Используйте инструменты дизайна, такие как Blend для Visual Studio или конструктор XAML Microsoft Visual Studio.
2) Добавьте элементы управления в код XAML в редакторе XAML Visual Studio.
3) Добавьте элементы управления в код. Примечание. Когда приложение запущено, вы увидите элементы управления, добавленные в код, но не увидите их в конструкторе XAML Visual Studio.

Задайте свойства элемента управления

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

Добавить события в элемент управления

Приведенный выше код установит высоту нажатой кнопки на 400 и ширину на 320; в дополнение к этому методу вы также можете действовать следующим образом, где btnSetStyle - это имя текущей кнопки:

Кроме того, мы также не можем определить событие Click в XAML. Такого же эффекта можно добиться, выполнив следующие операции. Оно свяжет два события друг с другом.

Установить ресурсы стиля для элемента управления

Даже если вы не добавили ресурсы, вы не знаете, что это за стиль. Неважно, все должны были играть в 2048. В игре много квадратов, поэтому будут ли стили этих квадратов определяться один за другим? Конечно, нет, вы можете напрямую использовать ресурсы стиля, чтобы найти все кнопки.

Ниже приводится базовый стиль.

Но здесь также есть проблема: если у нас есть 10 элементов управления Button, но мы хотим, чтобы только 8 из них использовали эти определения, а остальные 2 хотели использовать другой элемент управления, что нам делать?

На самом деле есть два способа определить стили как ресурсы.

Один из них - напрямую использовать свойство TargetType Style для определения всех целевых элементов управления.

В дополнение к атрибуту TargetType другой может также использовать атрибут x: key, а затем использовать статическое ключевое слово StaticResource для установки определенного атрибута Style.

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

Всем известно, что классы могут быть унаследованы, и стили также могут быть унаследованы.

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

Button

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

Кнопка имеет очень интересное свойство.

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

ToggleSwitch

Этот элемент управления очень похож на кнопку, это как переключатель.

MessageDialog

Этот элемент управления и Button вполне подходят вместе.Мы добавляем Button по желанию, а затем записываем событие Click следующим образом.

Обратите внимание, что для обозначения асинхронности к функции следует добавить async.

Если вам нужно предварительно просмотреть эффект, вы можете обратиться к разделу «Использование плавающих элементов управления для предварительного просмотра эффекта» далее в руководстве.

ComboBox

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

ListBox

Элемент управления ListBox очень похож на ComboBox в том, что он позволяет пользователям выбирать параметры, которые уже встроены в список. Использование следующее:

DatePicker、TimePicker

Элементы управления для установки времени на платформе Windows весьма различны, а именно DatePicker и TimePicker.

Ниже приведены снимки экрана и время для написания этого руководства.

Более подробное введение в этот элемент управления также находится в разделе «Дополнительные сведения об управлении временем» далее в руководстве.

FlipView

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

Кроме того, мы также можем добавить фоновый код.Второй код ниже похож на первый, но использует List.

В дополнение к этим двум методам вполне нормально использовать CollectionViewSource для привязки данных.

Выше приведен раздел файла ресурсов, а затем добавьте привязку статического ресурса к ItemsSource FlipView ListView, и все в порядке.

Если вы сами попробуете FlipView, то обнаружите, что его ресурсы изображения прокручиваются влево и вправо. Что, если вы хотите прокрутить вверх и вниз? Просто используйте следующий шаблон ItemsPanelTemplate.

ScrollBar

Если есть необходимость увеличить изображение и прокрутить для просмотра изображения, вы можете использовать ScrollBar. Это главным образом потому, что пространство, которое можно оставить для изображения, слишком мало, чтобы показать все изображения.

Viewbox

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

GridView

Я считаю, что все уже видели элемент управления GridView, и многие современные приложения будут его использовать. Он похож на ComboBox.

HyperlinkButton

HyperlinkButton можно использовать как кнопку или как гиперссылку.

ProgressBar

Я считаю, что всем нравится индикатор выполнения, верно? Я лично считаю, что индикатор выполнения Win8 стал интереснее по сравнению с Win7 и Vista.

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

ProgressRing

Будет ли интереснее использовать круглый индикатор выполнения?

Slider

Например, в этих местах используется громкость и яркость экрана на win8. Давайте посмотрим на его свойство ThumbToolTipValueConverter. Чтобы привязать значение к Slider, нам нужен класс, которому нужен интерфейс, обеспечивающий преобразование значений для привязки данных. Визуальный элемент, то есть Slider в качестве цели привязки, имеет 2 направления: источник данных -> данные -> цель привязки и цель привязки -> данные -> источник данных.

Нам нужно написать класс, который можно написать прямо в MainPage.xaml.cs, но лучше создать новый класс отдельно, и, учитывая, что это общее приложение, более целесообразно создать новый класс в разделе Shared .

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

Последний - легендарный кузов.

Мы также можем добавить кнопку и текстовый блок и щелкнуть, чтобы отобразить значение ползунка в текстовом блоке.

Мы уже видели MessageDialog, когда изучали элементы управления, а также есть всплывающий элемент управления для Button. Как это конкретно используется? Давайте посмотрим дальше.

Давайте продолжим предыдущий пример, а затем вот код.

Когда мы нажимаем кнопку отмены, всплывающее меню кнопки btnWhat, конечно же, исчезает.Ну, это занимает всего 1 строку кода. К тому же логика наступления на гром здесь расширяться не будет.

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

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

То же самое доступно и на WP, вот модифицированный код XAML. Как видите, я уменьшил размер изображения, для параметра Placement также установлено значение Top, а также изменены свойства StactPanel.

Вроде эффект неплохой.

В предыдущем разделе мы представили множество элементов управления, включая DatePicker и TimePicker, так что насчет более продвинутого использования?

Если вы хотите создать приложение о фитнесе, будильнике и т. Д., Вы неизбежно будете использовать контроль времени.

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

Снова появляются интересные вещи.Если вы хотите создать капсулу времени, время по умолчанию - 10 лет спустя, было бы хорошо, если бы начальное событие DatePicker произошло 10 лет спустя. Итак, что нам нужно сделать, так это записать событие в Loaded of DatePicker. (Хотя я не думаю, что приложение прослужит 10 лет)

Если вы не хотите использовать Loaded of DatePicker, вы также можете напрямую написать его в фоновом коде.

Я также провел небольшой тест. Я добавил 11 лет к событию Loaded и 10 лет к событию OnNavigatedTo. Результат - увеличение на 11 лет. Кажется, что мой собственный Loaded даже лучше.

Далее идет TimePicker. Вернемся к теме фитнеса. Если предположить, что он подходит для упражнений с 6 до 18, то наш Microsoft Band сделал следующее требование (шутка).

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

Как пациент с обсессивно-компульсивным расстройством, каждый раз, когда я устанавливаю будильник, я должен устанавливать его на лучшее время, например, делимое на 5 или простое число. Здесь вы можете использовать свойство MinuteIncrement для управления приращением минут, например, приращение равно 5. Еще с начальной школы я летал, чтобы установить время на электронных часах в 24-часовой системе, это тоже возможно, и ClockIdentifier установлен на 24HourClock.

Мы уже говорили об основном использовании в «Макете страницы и базовой навигации» ранее в руководстве, здесь мы продолжим добавлять дополнительные возможности использования панели приложения.

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

Приложение набора символов

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

Мы также можем использовать путь, чтобы нарисовать собственный график, график ниже - около 9 часов.

Как адаптироваться к разным разрешениям

По умолчанию ширина значка панели приложения составляет 100 пикселей. Итак, давайте сначала взглянем на два изображения. Поскольку Windows 10 может напрямую регулировать размер приложения Modern (а не Windows 8, которое может отображаться только в полноэкранном режиме), я напрямую растягиваю размер Modern, чтобы имитировать вероятность разрешения .

Для удобства отладки используется атрибут IsSticky. AppBarButton также имеет очень важный атрибут, который раньше не использовался, но это основной член, это IsCompact. Этот атрибут позволяет кнопке панели приложения отображать только значки, а не текст, который является меткой. Тогда наша работа будет сосредоточена на этом атрибуте.

Мы можем предположить, что существует функция, которая имеет параметр логической переменной.Если параметр имеет значение true, то свойство IsCompact всех этих AppBarButton также имеет значение true. В следующем коде мы сначала выбираем self-объект bottomAppBar как root.Таким образом, если в приложении есть панель приложения вверху, она не будет мешать друг другу. Затем постепенно вынимайте самообъекты в корне и панели.

Затем вам нужно определить, нужно ли включать IsCompact или нет. Что это определяет? Поскольку вышеупомянутое связано с разрешением экрана, то есть ширина, занимаемая приложением, приведет к перекрытию панели приложения, тогда ответ Никаких сомнений. Видя приведенный ниже код, я думаю, все понимают. Что касается ограничения ширины 1000, это связано с тем, что имеется 10 кнопок AppBarButton, а ширина их равна 100, как упоминалось ранее. (Без метки требуется всего 60 пикселей.)

Вот картинка, показывающая, что эта проблема решена.

Но для кого-то вроде меня 10 AppBarButton выполняются таким образом. А как насчет 20? Продемонстрируем, скопируем и вставим AppBarButton в предыдущий XAML. Если это экран 2K или 4K, он может работать с 20 экранами, но мой экран 1920X1080 не подходит.

Так есть ли способ решить эту проблему? Конечно, есть, просто разрежьте эти 20 иконок на 2 столбца. Сначала добавляем строку в сетку.

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

Конечно, таким образом вы можете разместить 40 AppBarButtons. Если вы уменьшите размер приложения, вы можете использовать атрибут IsCompact, чтобы разместить больше. Но никакого приложения так не делается.

Кроме того, если панель приложения устроена так.

Затем для Windows 10 во время процесса растяжения элементы управления в средней части будут медленно исчезать. На следующем рисунке я растянул его так, чтобы два элемента управления просто перекрывались посередине. Что касается того, хорошо или плохо разрабатывать AppBarButton таким образом, каждый решает сам, я думаю, это все равно нехорошо. Но что интересно, даже в этом случае их события Click по-прежнему действительны друг для друга, и они будут различать левую и правую части, а не перекрывать их.

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

Добавить меню на панель приложения

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

Атрибут Tag эквивалентен созданию тега. Следующий фрагмент кода заставляет работать всплывающее меню.

Pivot

Ниже приведен простой пример, вы можете добавить прямое содержимое в тег PivotItem. Его преимущество в том, что он может перемещаться влево и вправо, что быстрее, чем щелчок по строке заголовка. Я также думаю, что это также особенность эпохи WP8 / 8.1. В эпоху Win10 Microsoft повторно использовала гамбургер-меню и скользила постепенно стал краном Android.

Следующие два снимка экрана соответствуют мобильным телефонам и устройствам Интернета вещей соответственно.

Читайте также: