Iconos en aplicaciones de Windows
Los iconos proporcionan una notación abreviada visual para una acción, un concepto o un producto. Al comprimir el significado en una imagen simbólica, los iconos pueden cruzar las barreras del lenguaje y ayudar a conservar un recurso valioso: espacio de pantalla. Los iconos adecuados armonizan con la tipografía y con el resto del lenguaje de diseño. No mezclan metáforas y comunican solo lo que se necesita, tan rápido como sea posible.
Los iconos pueden aparecer dentro de las aplicaciones y fuera de ellas. Dentro de la aplicación, usa iconos para representar una acción, como copiar texto o ir a la página de configuración.
En este artículo se describen los iconos dentro de la interfaz de usuario de la aplicación. Para obtener información sobre los iconos que representan la aplicación en Windows (iconos de aplicación), consulta Iconos de aplicación.
Saber cuándo usar iconos
Los iconos pueden ahorrar espacio, pero ¿cuándo deberías usarlos?
Use un icono para acciones, como cortar, copiar, pegar y guardar, o para los elementos de un menú de navegación. Usa un icono que sea fácil de entender para el usuario y que sea lo suficientemente sencillo para que, en tamaños pequeños, sea claro.
No uses un icono si su significado no está claro, o si requiere una forma compleja para hacerlo claro.
Usar el tipo correcto de icono
Existen muchas formas de crear un icono. Puede usar una fuente de símbolos como la fuente Segoe Fluent Icons. Puede crear su propia imagen basada en vectores. Incluso puedes usar una imagen de mapa de bits, aunque no lo recomendamos. Este es un resumen de las formas en que puede agregar un icono a la aplicación.
Para agregar un icono en la aplicación XAML, usas IconElement o IconSource.
En esta tabla se muestran los diferentes tipos de iconos derivados de IconElement y IconSource.
| IconElement | IconSource | Descripción |
|---|---|---|
| AnimatedIcon | AnimatedIconSource | Representa un icono que muestra y controla un objeto visual que puede animarse en respuesta a los cambios de estado visual e interacción del usuario. |
| BitmapIcon | BitmapIconSource | Representa un icono que usa un mapa de bits como contenido. |
| FontIcon | FontIconSource | Representa un icono que usa un glifo de la fuente especificada. |
| IconSourceElement | N/D | Representa un icono que usa iconSource como contenido. |
| ImageIcon | ImageIconSource | Representa un icono que usa una imagen como contenido. |
| PathIcon | PathIconSource | Representa un icono que usa una ruta de acceso vectorial como contenido. |
| SymbolIcon | SymbolIconSource | Representa un icono que usa un glifo del SymbolThemeFontFamily recurso como contenido. |
IconElement frente a IconSource
IconElement es frameworkElement, por lo que se puede agregar al árbol de objetos XAML igual que cualquier otro elemento de la interfaz de usuario de la aplicación. Sin embargo, no se puede agregar a resourceDictionary ni reutilizarse como un recurso compartido.
IconSource es similar a IconElement; sin embargo, porque no es frameworkElement, no se puede usar como un elemento independiente en la interfaz de usuario, pero se puede compartir como un recurso. IconSourceElement es un elemento de icono especial que encapsula un IconSource para que pueda usarlo en cualquier lugar en el que necesite un IconElement. En la sección siguiente se muestra un ejemplo de estas características.
Ejemplos de IconElement
Puede usar una clase derivada de IconElement como un componente de interfaz de usuario independiente.
En este ejemplo se muestra cómo establecer un glifo de icono como el contenido de un botón. Establezca fontFamily SymbolThemeFontFamily del botón en y su propiedad de contenido en el valor Unicode del glifo que desea usar.
<Button FontFamily="{ThemeResource SymbolThemeFontFamily}"
Content=""/>
También puede agregar explícitamente uno de los objetos de elemento de icono enumerados anteriormente, como SymbolIcon. Esto proporciona más tipos de iconos entre los que elegir. También le permite combinar iconos y otros tipos de contenido, como texto, si lo desea.
<Button>
<StackPanel>
<SymbolIcon Symbol="Play"/>
<TextBlock Text="Play" HorizontalAlignment="Center"/>
</StackPanel>
</Button>
En este ejemplo se muestra cómo definir fontIconSource en resourceDictionary y, a continuación, usar un IconSourceElement para reutilizar el recurso en diferentes lugares de la aplicación.
<!--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>
La aplicación WinUI 3 Gallery incluye ejemplos interactivos de la mayoría de los controles, características y funcionalidades de WinUI 3. Obtenga la aplicación de Microsoft Store u obtenga el código fuente en GitHub.
Propiedades del icono
A menudo colocas iconos en la interfaz de usuario asignando uno a una icon propiedad de otro elemento XAML. Icon las propiedades que incluyen Source en el nombre toman un IconSource; de lo contrario, la propiedad toma un IconElement.
En esta lista se muestran algunos elementos comunes que tienen una icon propiedad .
Sugerencia
Puedes ver estos controles en la aplicación Galería de WinUI 3 para ver ejemplos de cómo se usan los iconos con ellos.
Los ejemplos restantes de esta página muestran cómo asignar un icono a la icon propiedad de un control.
FontIcon y SymbolIcon
La forma más común de agregar iconos a la aplicación es usar los iconos del sistema proporcionados por las fuentes de iconos en Windows. Windows 11 presenta una nueva fuente de icono del sistema, Segoe Fluent Icons, que proporciona más de 1000 iconos diseñados para el lenguaje Fluent Design. Es posible que no sea intuitivo obtener un icono de una fuente, pero la tecnología de visualización de fuentes de Windows significa que estos iconos se verán nítidos y nítidos en cualquier pantalla, en cualquier resolución y en cualquier tamaño.
Importante
Familia de fuentes predeterminada
En lugar de especificar una fontFamily directamente, FontIcon y SymbolIcon usan la familia de fuentes definida por el recurso de SymbolThemeFontFamily tema XAML. De forma predeterminada, este recurso usa la familia de fuentes Segoe Fluent Icon. Si la aplicación se ejecuta en Windows 10, versión 20H2 o anterior, la familia de fuentes Segoe Fluent Icon no está disponible y el SymbolThemeFontFamily recurso vuelve a la familia de fuentes Segoe MDL2 Assets en su lugar.
Enumeración Symbol
Muchos glifos comunes de se SymbolThemeFontFamily incluyen en la enumeración Symbol . Si el glifo que necesita está disponible como símbolo, puede usar un SymbolIcon en cualquier lugar en el que usaría fontIcon con la familia de fuentes predeterminada.
También usas nombres de símbolos para establecer una icon propiedad en XAML mediante la sintaxis de atributo, como esta
<AppBarButton Icon="Send" Label="Send"/>
Sugerencia
Solo puede usar nombres de símbolo para establecer una icon propiedad mediante la sintaxis de atributo abreviado. Todos los demás tipos de icono deben establecerse con la sintaxis de elemento de propiedad más larga, como se muestra en otros ejemplos de esta página.
Iconos de fuente
Solo hay disponible un pequeño subconjunto de glifos segoe Fluent Icon en la enumeración Symbol . Para usar cualquiera de los demás glifos disponibles, use fontIcon. En este ejemplo se muestra cómo crear un AppBarButton con el SendFill icono.
<AppBarButton Label="Send">
<AppBarButton.Icon>
<FontIcon Glyph=""/>
</AppBarButton.Icon>
</AppBarButton>
Si no especifica una FontFamily o especifica una FontFamily que no está disponible en el sistema en tiempo de ejecución, FontIcon vuelve a la familia de fuentes predeterminada definida por el recurso de SymbolThemeFontFamily tema.
También puede especificar un icono mediante un valor de glifo desde cualquier fuente disponible. En este ejemplo se muestra cómo usar un glifo de la fuente Emoji de segoe UI.
<AppBarToggleButton Label="FontIcon">
<AppBarToggleButton.Icon>
<FontIcon FontFamily="Segoe UI Emoji" Glyph="▶"/>
</AppBarToggleButton.Icon>
</AppBarToggleButton>
Para obtener más información y ejemplos, consulte la documentación de la clase FontIcon y SymbolIcon .
Sugerencia
Usa la página Iconography de la aplicación WinUI 3 Gallery para ver, buscar y copiar código para todos los iconos disponibles en Segoe Fluent Icons.
AnimatedIcon
El movimiento es una parte importante del lenguaje Fluent Design. Los iconos animados señalan la atención a puntos de entrada específicos, proporcionan comentarios de estado a estado y agregan placer a una interacción.
Puedes usar iconos animados para implementar iconos ligeros basados en vectores con movimiento mediante animaciones de Lottie .
Para obtener más información y ejemplos, vea Iconos animados y la documentación de la clase AnimatedIcon .
PathIcon
Puede usar un PathIcon para crear iconos personalizados que usen formas basadas en vectores, por lo que siempre tienen un aspecto nítido. Sin embargo, la creación de una forma mediante una geometría XAML es complicada porque tienes que especificar individualmente cada punto y curva.
En este ejemplo se muestran dos maneras diferentes de definir la geometría usada en un 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>
Para obtener más información sobre el uso de clases geometry para crear formas personalizadas, consulte la documentación de la clase y los comandos Mover y dibujar para geometrías. Consulte también la documentación de Geometría de WPF. La clase Geometry de WinUI no tiene todas las mismas características que la clase WPF, pero la creación de formas es la misma para ambas.
Para obtener más información y ejemplos, consulte la documentación de la clase PathIcon .
BitmapIcon e ImageIcon
Puede usar bitmapIcon o ImageIcon para crear un icono a partir de un archivo de imagen (como PNG, GIF o JPEG), aunque no se recomienda si hay otra opción disponible. Las imágenes de mapa de bits se crean con un tamaño específico, por lo que tienen que ajustarse en función del tamaño que quieres que tenga el icono y de la resolución de la pantalla. Cuando la imagen se reduce verticalmente (se reduce), puede aparecer borrosa. Cuando se escala verticalmente, puede aparecer bloqueado y pixelado.
BitmapIcon
De forma predeterminada, un BitmapIcon quita toda la información de color de la imagen y representa todos los píxeles no transparentes en el color de primer plano . Para crear un icono monocromo, use una imagen sólida en un fondo transparente en formato PNG. Otros formatos de imagen se cargarán aparentemente sin errores, pero darán lugar a un bloque sólido del color de primer plano.
<AppBarButton Label="ImageIcon">
<AppBarButton.Icon>
<ImageIcon Source="ms-appx:///Assets/slices3.png"/>
</AppBarButton.Icon>
</AppBarButton>
Puede invalidar el comportamiento predeterminado estableciendo la propiedad ShowAsMonochrome en false. En este caso, BitmapIcon se comporta igual que imageIcon para los tipos de archivo de mapa de bits admitidos (no se admiten archivos SVG).
<BitmapIcon UriSource="ms-appx:///Assets/slices3.jpg"
ShowAsMonochrome="False"/>
Para obtener más información y ejemplos, consulte la documentación de la clase BitmapIcon .
Sugerencia
El uso de BitmapIcon es similar al uso de BitmapImage; vea la clase BitmapImage para obtener más información aplicable a BitmapIcon, como establecer la propiedad UriSource en el código.
ImageIcon
ImageIcon muestra la imagen proporcionada por una de las clases derivadas de ImageSource. La más común es BitmapSource, pero como se mencionó anteriormente, no se recomiendan imágenes de mapa de bits para iconos debido a posibles problemas de escalado.
Los recursos de gráficos vectoriales escalables (SVG) son ideales para los iconos, ya que siempre se ven nítidos en cualquier tamaño o resolución. Puede usar SVGImageSource con imageIcon, que admite el modo estático seguro de la especificación SVG, pero no admite animaciones ni interacciones. Para obtener más información, consulte Compatibilidad con SVGImageSource y SVG.
ImageIcon omite la propiedad Foreground , por lo que siempre muestra la imagen en su color original. Dado que se omite el color de primer plano, el icono no responde a los cambios de estado visual cuando se usa en un botón u otro control similar.
<AppBarButton Label="ImageIcon">
<AppBarButton.Icon>
<ImageIcon Source="ms-appx:///Assets/slices3.svg"/>
</AppBarButton.Icon>
</AppBarButton>
Para obtener más información y ejemplos, consulte la documentación de la clase ImageIcon .
Sugerencia
El uso de ImageIcon es similar al control Image; consulte la clase Image para obtener más información aplicable a ImageIcon. Una diferencia notable es que con ImageIcon, solo se usa el primer fotograma de una imagen de varios fotogramas (como un GIF animado). Para usar iconos animados, consulta AnimatedIcon.
