Значки в приложениях Windows
Значки — это визуальный ярлык для действий, концепций или продуктов. Сжимая значение в символьное изображение, значки могут пересекать языковые барьеры и помочь сохранить ценный ресурс: пространство экрана. Хорошие значки согласуются со шрифтовым оформлением и языком проектирования в целом. Они не смешивают метафоры, и они сообщают только то, что нужно, как быстро и просто как можно быстрее.
Значки могут отображаться в приложениях и вне них. В приложении вы используете значки для представления действия, например копирование текста или переход на страницу параметров.
В этой статье описываются значки в пользовательском интерфейсе приложения. Дополнительные сведения о значках, представляющих приложение в Windows (значки приложения), см. в разделе "Значки приложения".
Знать, когда следует использовать значки
Значки позволяют сэкономить место, но когда их следует использовать?
Используйте значок для действий, таких как вырезать, копировать, вставлять и сохранять, а также для элементов в меню навигации. Используйте значок, если пользователю легко понять, что он означает, и это очевидно, даже если значок небольшого размера.
Не используйте значок, если его значение непонятно или его пояснение требует сложной формы.
Использование правого типа значка
Существует множество способов создания значка. Вы можете использовать шрифт символов, например шрифт Segoe Fluent Icons. Вы можете создать собственный векторный образ. Вы можете даже использовать растровое изображение, хотя это не рекомендуется. Ниже приведена сводка о способах добавления значка в приложение.
Чтобы добавить значок в приложение XAML, используйте значок IconElement или IconSource.
В этой таблице показаны различные виды значков, производных от IconElement и IconSource.
| IconElement | IconSource | Description |
|---|---|---|
| Анимированный Икон | АнимацияIconSource | Представляет значок, который отображает и управляет визуальным элементом, который может анимироваться в ответ на изменения взаимодействия пользователя и визуального состояния. |
| BitmapIcon | BitmapIconSource | Представляет значок, использующий растровое изображение в качестве его содержимого. |
| FontIcon | FontIconSource | Представляет значок, использующий глиф из указанного шрифта. |
| IconSourceElement | Н/П | Представляет значок, использующий IconSource в качестве его содержимого. |
| ImageIcon | ImageIconSource | Представляет значок, использующий изображение в качестве его содержимого. |
| PathIcon | PathIconSource | Представляет значок, использующий векторный путь в качестве его содержимого. |
| SymbolIcon | SymbolIconSource | Представляет значок, использующий глиф из ресурса в качестве его содержимого SymbolThemeFontFamily . |
IconElement и IconSource
IconElement — это FrameworkElement, поэтому его можно добавить в дерево объектов XAML так же, как и любой другой элемент пользовательского интерфейса приложения. Однако его нельзя добавить в ResourceDictionary и повторно использовать как общий ресурс.
IconSource похож на IconElement. Однако, поскольку он не является FrameworkElement, его нельзя использовать в качестве автономного элемента в пользовательском интерфейсе, но его можно использовать как ресурс. IconSourceElement — это специальный элемент значка, который упаковывает iconSource, поэтому его можно использовать в любом месте, где требуется IconElement . Пример этих функций показан в следующем разделе.
Примеры IconElement
Класс, производный от IconElement, можно использовать как автономный компонент пользовательского интерфейса.
В этом примере показано, как задать глиф значка в качестве содержимого кнопки. Задайте для кнопки FontFamily SymbolThemeFontFamily значение и его свойство содержимого значением Юникода глифа, который требуется использовать.
<Button FontFamily="{ThemeResource SymbolThemeFontFamily}"
Content=""/>
Вы также можете явно добавить один из объектов элемента значка, перечисленных ранее, например SymbolIcon. Это дает вам больше типов значков для выбора. Он также позволяет объединять значки и другие типы содержимого, например текст, если вы хотите.
<Button>
<StackPanel>
<SymbolIcon Symbol="Play"/>
<TextBlock Text="Play" HorizontalAlignment="Center"/>
</StackPanel>
</Button>
В этом примере показано, как определить FontIconSource в ResourceDictionary, а затем использовать IconSourceElement для повторного использования ресурса в разных местах приложения.
<!--App.xaml-->
<Application
...>
<Application.Resources>
<ResourceDictionary>
...
<!-- Other app resources here -->
<FontIconSource x:Key="CertIconSource" Glyph=""/>
</ResourceDictionary>
</Application.Resources>
</Application>
<StackPanel Orientation="Horizontal">
<IconSourceElement IconSource="{StaticResource CertIconSource}"/>
<TextBlock Text="Certificate is expired" Margin="4,0,0,0"/>
</StackPanel>
<Button>
<StackPanel>
<IconSourceElement IconSource="{StaticResource CertIconSource}"/>
<TextBlock Text="View certificate" HorizontalAlignment="Center"/>
</StackPanel>
</Button>
Приложение коллекции WinUI 3 включает интерактивные примеры большинства элементов управления, функций и функций WinUI 3. Получение приложения из Microsoft Store или получение исходного кода на GitHub
Свойства значка
Часто вы размещаете значки в пользовательском интерфейсе, назначая один свойству icon другого элемента XAML. Icon свойства, которые включаются Source в имя, принимают IconSource; в противном случае свойство принимает ЗначокElement.
В этом списке показаны некоторые распространенные элементы, имеющие icon свойство.
| Команды и действия | Область | Состояние/другое |
|---|---|---|
| AppBarButton.Icon AppBarToggleButton.Icon AutoSuggestBox.QueryIcon MenuFlyoutItem.Icon MenuFlyoutSubItem.IconItem.IconSource XamlUICommand.IconSource | NavigationViewItem.Icon SelectorBarItem.Icon TabViewItem.IconSource | AnimatedIcon.FallbackIconSource AnimatedIconSource.FallbackIconSource IconSource IconSource InfoBadge.IconSource InfoBar.IconSource TeachingTip.IconSource |
Совет
Эти элементы управления можно просмотреть в приложении коллекции WinUI 3, чтобы просмотреть примеры использования значков с ними.
Остальные примеры на этой странице показывают, как назначить значок icon свойству элемента управления.
FontIcon и SymbolIcon
Наиболее распространенным способом добавления значков в приложение является использование системных значков, предоставляемых шрифтами значков в Windows. В Windows 11 представлен новый шрифт значка системы Segoe Fluent Icon, который предоставляет более 1000 значков, предназначенных для языка fluent Design. Это может не быть интуитивно понятным, чтобы получить значок из шрифта, но технология отображения шрифтов Windows означает, что эти значки будут выглядеть четко и резко на любом дисплее, при любом разрешении и в любом размере.
Внимание
Семейство шрифтов по умолчанию
Вместо того чтобы указать fontFamily напрямую , FontIcon и SymbolIcon используют семейство шрифтов, определенное ресурсом SymbolThemeFontFamily темы XAML. По умолчанию этот ресурс использует семейство шрифтов Segoe Fluent Icon. Если приложение работает в Windows 10 версии 20H2 или более ранней версии, семейство шрифтов Segoe Fluent Icon недоступно, а SymbolThemeFontFamily ресурс возвращается к семейству шрифтов Segoe MDL2 Assets .
Symbol Enum (Перечисление Symbol)
Многие распространенные глифы из перечисления SymbolThemeFontFamily символов включены в перечисление символов . Если нужный глиф доступен как символ, вы можете использовать SymbolIcon в любом месте, где вы будете использовать FontIcon с семейством шрифтов по умолчанию.
Имена символов также используются для задания icon свойства в XAML с помощью синтаксиса атрибутов, как показано ниже.
<AppBarButton Icon="Send" Label="Send"/>
Совет
Имена символов можно использовать только для задания icon свойства с помощью сокращенного синтаксиса атрибута. Все остальные типы значков должны быть заданы с помощью синтаксиса более длинного элемента свойства, как показано в других примерах на этой странице.
Значки шрифта
В перечислении символов доступны только небольшое подмножество глифов значков Segoe Fluent Icon. Чтобы использовать любой из других доступных глифов, используйте FontIcon. В этом примере показано, как создать AppBarButton со значком SendFill .
<AppBarButton Label="Send">
<AppBarButton.Icon>
<FontIcon Glyph=""/>
</AppBarButton.Icon>
</AppBarButton>
Если не указать FontFamily или указать шрифтFamily, который недоступен в системе во время выполнения, FontIcon возвращается к семейству шрифтов по умолчанию, определенному ресурсом SymbolThemeFontFamily темы.
Вы также можете указать значок с помощью значения Глифа из любого доступного шрифта. В этом примере показано, как использовать Глиф из шрифта Emoji пользовательского интерфейса Segoe.
<AppBarToggleButton Label="FontIcon">
<AppBarToggleButton.Icon>
<FontIcon FontFamily="Segoe UI Emoji" Glyph="▶"/>
</AppBarToggleButton.Icon>
</AppBarToggleButton>
Дополнительные сведения и примеры см. в документации по классу FontIcon и SymbolIcon.
Совет
Используйте страницу значков в приложении коллекции WinUI 3 для просмотра, поиска и копирования кода для всех значков, доступных в Segoe Fluent Icon.
AnimatedIcon
Движение является важной частью языка Fluent Design. Анимированные значки обращают внимание на определенные точки входа, предоставляют отзывы от состояния к состоянию и добавляют восторг к взаимодействию.
С помощью анимированных значков можно реализовать упрощенные векторные значки с помощью анимации Lottie .
Дополнительные сведения и примеры см. в документации по анимированным значкам и документации по классам AnimatedIcon .
PathIcon
Вы можете использовать PathIcon для создания пользовательских значков, использующих векторные фигуры, поэтому они всегда выглядят резко. Однако создание фигуры с помощью геометрии XAML сложно, так как необходимо отдельно указать каждую точку и кривую.
В этом примере показаны два разных способа определения геометрии, используемой в PathIcon.
<AppBarButton Label="PathIcon">
<AppBarButton.Icon>
<PathIcon Data="F1 M 16,12 20,2L 20,16 1,16"/>
</AppBarButton.Icon>
</AppBarButton>
<AppBarButton Label="Circles">
<AppBarButton.Icon>
<PathIcon>
<PathIcon.Data>
<GeometryGroup>
<EllipseGeometry RadiusX="15" RadiusY="15" Center="90,90" />
<EllipseGeometry RadiusX="50" RadiusY="50" Center="90,90" />
<EllipseGeometry RadiusX="70" RadiusY="70" Center="90,90" />
<EllipseGeometry RadiusX="100" RadiusY="100" Center="90,90" />
<EllipseGeometry RadiusX="120" RadiusY="120" Center="90,90" />
</GeometryGroup>
</PathIcon.Data>
</PathIcon>
</AppBarButton.Icon>
</AppBarButton>
Дополнительные сведения об использовании классов Geometry для создания пользовательских фигур см. в документации по классам и командах перемещения и рисования для геометрий. Также см. документацию по геометрии WPF. Класс WinUI Geometry не имеет одинаковых функций, что и класс WPF, но создание фигур одинаково для обоих.
Дополнительные сведения и примеры см. в документации по классу PathIcon .
BitmapIcon и ImageIcon
Вы можете использовать BitmapIcon или ImageIcon для создания значка из файла изображения (например, PNG, GIF или JPEG), хотя мы не рекомендуем использовать его, если доступен другой вариант. Растровые изображения создаются в определенном размере, поэтому их необходимо масштабировать в зависимости от требуемого размера значка и разрешения экрана. При уменьшении масштаба изображения может появиться размытая. При масштабировании его можно отображать блоки и пиксели.
BitmapIcon
По умолчанию bitmapIcon удаляет все сведения о цвете изображения и отрисовывает все непрозрачные пиксели в цвете переднего плана . Чтобы создать монохромный значок, используйте сплошное изображение на прозрачном фоне в формате PNG. Другие форматы изображений по-видимому загружатся без ошибок, но приводят к сплошной блоку цвета переднего плана.
<AppBarButton Label="ImageIcon">
<AppBarButton.Icon>
<ImageIcon Source="ms-appx:///Assets/slices3.png"/>
</AppBarButton.Icon>
</AppBarButton>
Поведение по умолчанию можно переопределить, задав для свойства ShowAsMonochrome значение false. В этом случае BitmapIcon ведет себя так же, как ImageIcon для поддерживаемых типов файлов растровых карт (SVG-файлы не поддерживаются).
<BitmapIcon UriSource="ms-appx:///Assets/slices3.jpg"
ShowAsMonochrome="False"/>
Дополнительные сведения и примеры см. в документации по классу BitmapIcon .
Совет
Использование BitmapIcon аналогично использованию BitmapImage; Дополнительные сведения, применимые к BitmapIcon, см. в классе BitmapImage , например задание свойства UriSource в коде.
ImageIcon
ImageIcon показывает изображение, предоставленное одним из классов, производных от ImageSource. Чаще всего используется BitmapSource, но, как упоминалось ранее, мы не рекомендуем использовать растровые изображения для значков из-за потенциальных проблем с масштабированием.
Масштабируемые ресурсы векторной графики (SVG) идеально подходят для значков, так как они всегда смотрят резко на любой размер или разрешение. SvGImageSource можно использовать с ImageIcon, который поддерживает безопасный статический режим из спецификации SVG, но не поддерживает анимации или взаимодействия. Дополнительные сведения см. в разделе поддержки SVGImageSource и SVG.
ImageIcon игнорирует свойство Переднего плана , поэтому оно всегда отображает изображение в исходном цвете. Так как цвет переднего плана игнорируется, значок не реагирует на изменения визуального состояния при использовании в кнопке или другом аналогичном элементе управления.
<AppBarButton Label="ImageIcon">
<AppBarButton.Icon>
<ImageIcon Source="ms-appx:///Assets/slices3.svg"/>
</AppBarButton.Icon>
</AppBarButton>
Дополнительные сведения и примеры см. в документации по классу ImageIcon .
Совет
Использование ImageIcon аналогично элементу управления Image; Дополнительные сведения, применимые к ImageIcon, см. в классе ImageIcon . Одним из заметных различий является то, что с ImageIcon используется только первый кадр многокадрового изображения (например, анимированный GIF- файл). Сведения об использовании анимированных значков см. в разделе "АнимированныйIcon".
Связанные статьи
Windows developer