Значки в приложениях Windows

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

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

В этой статье описываются значки в пользовательском интерфейсе приложения. Дополнительные сведения о значках, представляющих приложение в Windows (значки приложения), см. в разделе "Значки приложения".

Знать, когда следует использовать значки

Значки позволяют сэкономить место, но когда их следует использовать?

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

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

Использование правого типа значка

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

Чтобы добавить значок в приложение XAML, используйте значок IconElement или IconSource.

В этой таблице показаны различные виды значков, производных от IconElement и IconSource.

IconElement и IconSource

IconElement — это FrameworkElement, поэтому его можно добавить в дерево объектов XAML так же, как и любой другой элемент пользовательского интерфейса приложения. Однако его нельзя добавить в ResourceDictionary и повторно использовать как общий ресурс.

IconSource похож на IconElement. Однако, поскольку он не является FrameworkElement, его нельзя использовать в качестве автономного элемента в пользовательском интерфейсе, но его можно хранить в качестве ресурса. IconSourceElement — это специальный элемент значка, который упаковывает iconSource, поэтому его можно использовать в любом месте, где требуется IconElement . Пример этих функций показан в следующем разделе.

Примеры IconElement

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

В этом примере показано, как задать глиф значка в качестве содержимого кнопки. Задайте для кнопки шрифт FontFamily равным SymbolThemeFontFamily, а свойство её содержимого — значением Юникода того глифа, который вы хотите использовать.

<Button FontFamily="{ThemeResource SymbolThemeFontFamily}"
        Content="&#xE768;"/>

Вы также можете явно добавить один из объектов элемента значка, перечисленных ранее, например 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="&#xEB95;"/>

        </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; в противном случае свойство требует IconElement.

В этом списке показаны некоторые распространенные элементы, имеющие icon свойство.

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

FontIcon и SymbolIcon

Наиболее распространенным способом добавления значков в приложение является использование системных значков, предоставляемых шрифтами значков в Windows. В Windows 11 представлен новый шрифт системных значков Segoe Fluent Icons, который включает более 1000 значков, разработанных для языка Fluent Design. Это может не быть интуитивно понятным, чтобы получить значок из шрифта, но технология отображения шрифтов Windows означает, что эти значки будут выглядеть четко и резко на любом дисплее, при любом разрешении и в любом размере.

Перечисление символов

Многие распространенные глифы из SymbolThemeFontFamily включены в перечисление Symbol. Если нужный глиф доступен как символ, вы можете использовать SymbolIcon в любом месте, где вы будете использовать FontIcon с семейством шрифтов по умолчанию.

Имена символов также используются для задания icon свойства в XAML с помощью синтаксиса атрибутов, как показано ниже.

<AppBarButton Icon="Send" Label="Send"/>

Значки шрифта

Доступны только небольшое подмножество глифов значков Segoe Fluent Icon в перечислении Symbol. Чтобы использовать любой из других доступных глифов, используйте FontIcon. В этом примере показано, как создать AppBarButton со значком SendFill .

<AppBarButton Label="Send">
    <AppBarButton.Icon>
        <FontIcon Glyph="&#xE725;"/>
    </AppBarButton.Icon>
</AppBarButton>

Если не указано семейство шрифтов или указано семейство шрифтов, которое недоступно в системе во время выполнения, FontIcon использует семейство шрифтов по умолчанию, определенное ресурсом темы SymbolThemeFontFamily.

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

<AppBarToggleButton Label="FontIcon">
    <AppBarToggleButton.Icon>
        <FontIcon FontFamily="Segoe UI Emoji" Glyph="&#x25B6;"/>
    </AppBarToggleButton.Icon>
</AppBarToggleButton>

Дополнительные сведения и примеры см. в документации по классу FontIcon и SymbolIcon.

АнимированнаяИконка

Движение является важной частью языка 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 .

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 .

Связанные статьи

• Иконография в Windows
• Значки приложения
• Анимированная Иконка
• Панель команд