Значки для приложений для Windows

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

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

Значки могут отображаться в приложениях и вне них:

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

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

Значки за пределами приложения

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

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

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

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

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

Используйте значок, если он уже существует для концепции, которую вы хотите представить. (Чтобы узнать, существует ли значок, просмотрите список значков Segoe.)

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

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

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

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

Предопределенный значок

Корпорация Майкрософт предоставляет более 1000 значков в виде шрифта Segoe MDL2 Assets. Это может не быть интуитивно понятным, чтобы получить значок из шрифта, но технология отображения шрифтов Windows означает, что эти значки будут выглядеть четко и резко на любом дисплее, при любом разрешении и в любом размере. Инструкции см. в разделе "Значки ресурсов Segoe MDL2".

Шрифт

Вам не нужно использовать шрифт Segoe MDL2 Assets. Вы можете использовать любой шрифт, установленный пользователем в своей системе, например Wingdings или Webdings.

SVG-файл

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

Объект Geometry

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

Изображение растрового изображения

Вы можете использовать растровое изображение (например, PNG, GIF или JPEG), хотя не рекомендуется.

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

Создание значка сделать что-то

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

Вы также можете анимировать значок, чтобы привлечь внимание к компоненту пользовательского интерфейса, например следующей кнопке в руководстве, или отразить действие, связанное с значком, в интересном и интересном виде. Дополнительные сведения см. в разделе "АнимированныйIcon".

Создание кнопки значка

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

Вот один из способов добавить значок в кнопку:

Шаг 1
Задайте семейству Segoe MDL2 Assets шрифтов кнопки и его свойству содержимого значение Юникода глифа, которое вы хотите использовать:

<Button FontFamily="Segoe MDL2 Assets" Content="&#xE102;" />

Шаг 2
Используйте один из объектов элемента значка: BitmapIcon, FontIcon, PathIcon, ImageIcon или SymbolIcon. Этот метод позволяет выбрать другие типы значков. Он также позволяет объединять значки и другие типы содержимого, например текст, если требуется.

<Button>
    <StackPanel>
        <SymbolIcon Symbol="Play" />
        <TextBlock>Play the movie</TextBlock>
    </StackPanel>
</Button>

Создание ряда значков на панели команд

Если у вас есть ряд команд, которые объединяются, например вырезать или скопировать или вставить или набор команд рисования для программы редактирования фотографий, поместите их вместе на панель команд. На панели команд размещается одна или несколько кнопок панели приложения или кнопок-переключателей панели приложения, каждая из которых представляет действие. Каждая кнопка имеет свойство Icon, используемое для управления отображаемым значком. Существует множество способов указать значок.

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

<CommandBar>
    <AppBarToggleButton Icon="Shuffle" Label="Shuffle" Click="AppBarButton_Click" />
    <AppBarToggleButton Icon="RepeatAll" Label="Repeat" Click="AppBarButton_Click"/>
    <AppBarSeparator/>
    <AppBarButton Icon="Back" Label="Back" Click="AppBarButton_Click"/>
    <AppBarButton Icon="Stop" Label="Stop" Click="AppBarButton_Click"/>
    <AppBarButton Icon="Play" Label="Play" Click="AppBarButton_Click"/>
    <AppBarButton Icon="Forward" Label="Forward" Click="AppBarButton_Click"/>
</CommandBar>

Полный список имен значков см. в справочнике по перечислению символов.

Существуют другие способы предоставления значков для кнопки на панели команд:

• FontIcon: значок основан на глифе из указанного семейства шрифтов.
• BitmapIcon: значок основан на файле изображения растрового изображения с указанным универсальным кодом ресурса (URI).
• PathIcon: значок основан на данных Path .
• ImageIcon: значок основан на типе файла изображения, который поддерживает класс Image .

Дополнительные сведения о панели команд см. в статье "Панель команд".

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

• Значки приложений и логотипы
• Анимированный Икон