Anclar iconos secundarios a Inicio

  • Artículo

Este tema le guía por los pasos para crear un icono secundario para la aplicación de Windows y anclarlo al menú Inicio.

Screenshot of secondary tiles

Para obtener más información sobre los iconos secundarios, vea la Introducción a los iconos secundarios.

Agregar espacio de nombres

El espacio de nombres Windows.UI.StartScreen incluye la clase SecondaryTile.

using Windows.UI.StartScreen;

Inicializar el icono secundario

Los iconos secundarios se componen de algunos componentes clave...

  • TileId: identificador único que le permite identificar el icono entre los demás iconos secundarios.
  • DisplayName: el nombre que desea mostrar en el icono.
  • Argumentos: los argumentos que desea que se devuelvan a la aplicación cuando el usuario haga clic en el icono.
  • Square150x150Logo: el logotipo necesario, que se muestra en el icono de tamaño mediano (y cambia de tamaño a icono de tamaño pequeño si no se proporciona ningún logotipo pequeño).

Debe proporcionar valores inicializados para todas las propiedades anteriores o de lo contrario, obtendrá una excepción.

Hay una variedad de constructores que puede utilizar, pero el uso del constructor que toma en el tileId, displayName, arguments, square150x150Logo, y desiredSize ayuda a asegurarse de que establece todas las propiedades requeridas.

// Construct a unique tile ID, which you will need to use later for updating the tile
string tileId = "City" + zipCode;

// Use a display name you like
string displayName = cityName;

// Provide all the required info in arguments so that when user
// clicks your tile, you can navigate them to the correct content
string arguments = "action=viewCity&zipCode=" + zipCode;

// Initialize the tile with required arguments
SecondaryTile tile = new SecondaryTile(
    tileId,
    displayName,
    arguments,
    new Uri("ms-appx:///Assets/CityTiles/Square150x150Logo.png"),
    TileSize.Default);

Opcional: Agregar compatibilidad con tamaños de icono más grandes

Si va a mostrar notificaciones de iconos enriquecidas en el icono secundario, es probable que quiera permitir que el usuario cambie el tamaño de su icono para que sea ancho o grande, de modo que puedan ver aún más contenido.

Para habilitar tamaños de iconos anchos y grandes, debe proporcionar Wide310x150Logo y Square310x310Logo. Además, si es posible, debe proporcionar Square71x71Logo para el tamaño de icono pequeño (de lo contrario, reduciremos el tamaño de Square150x150Logo necesario para el icono pequeño).

También puede proporcionar un único Square44x44Logo, que se muestra opcionalmente en la esquina inferior derecha cuando una notificación está presente. Si no proporciona uno, se usará Square44x44Logo desde el icono principal en su lugar.

// Enable wide and large tile sizes
tile.VisualElements.Wide310x150Logo = new Uri("ms-appx:///Assets/CityTiles/Wide310x150Logo.png");
tile.VisualElements.Square310x310Logo = new Uri("ms-appx:///Assets/CityTiles/Square310x310Logo.png");

// Add a small size logo for better looking small tile
tile.VisualElements.Square71x71Logo = new Uri("ms-appx:///Assets/CityTiles/Square71x71Logo.png");

// Add a unique corner logo for the secondary tile
tile.VisualElements.Square44x44Logo = new Uri("ms-appx:///Assets/CityTiles/Square44x44Logo.png");

Opcional: Habilitar la visualización del nombre

De forma predeterminada, el nombre para mostrar NO se mostrará. Para mostrar el nombre en pantalla en mediano, ancho, grande, agregue el siguiente código.

// Show the display name on all sizes
tile.VisualElements.ShowNameOnSquare150x150Logo = true;
tile.VisualElements.ShowNameOnWide310x150Logo = true;
tile.VisualElements.ShowNameOnSquare310x310Logo = true;

Opcional: iconos secundarios 3D

Puede mejorar el icono secundario de Windows Mixed Reality agregando recursos 3D. Los usuarios pueden colocar iconos 3D directamente en su ambiente de Windows Mixed Reality en lugar del menú Inicio cuando se usa la aplicación en un entorno de realidad mixta. Por ejemplo, puede crear fotosferas de 360° que se vinculen directamente a una aplicación de visualización de fotos de 360°, o permitir que los usuarios coloquen un modelo 3D de una silla de un catálogo de muebles que, al seleccionarlo, abra una página de detalles sobre las opciones de precio y color de ese objeto. Para empezar, consulte la documentación para desarrolladores de Mixed Reality.

Anclar el icono secundario

Por último, solicite anclar el icono. Tenga en cuenta que se debe llamar a esto desde un subproceso de interfaz de usuario. En escritorio, aparecerá un cuadro de diálogo en el que se le pedirá al usuario que confirme si desea anclar el icono.

Importante

Si es una aplicación de escritorio que usa Puente de dispositivo de escritorio, primero debe realizar un paso adicional, tal como se describe en Anclar desde aplicaciones de escritorio

// Pin the tile
bool isPinned = await tile.RequestCreateAsync();

// TODO: Update UI to reflect whether user can now either unpin or pin

Comprobar si existe un icono secundario

Si el usuario visita una página de su aplicación que ya ha anclado a Inicio, deberá mostrar un botón "Desanclar".

Por lo tanto, al elegir qué botón mostrar, primero debe comprobar si el icono secundario está anclado actualmente.

// Check if the secondary tile is pinned
bool isPinned = SecondaryTile.Exists(tileId);

// TODO: Update UI to reflect whether user can either unpin or pin

Desanclar un icono secundario

Si el icono está anclado actualmente y el usuario hace clic en el botón de desanclar, querrá desanclar (eliminar) el icono.

// Initialize a secondary tile with the same tile ID you want removed
SecondaryTile toBeDeleted = new SecondaryTile(tileId);

// And then unpin the tile
await toBeDeleted.RequestDeleteAsync();

Actualización de un icono secundario

Si necesita actualizar los logotipos, el nombre para mostrar o cualquier otra cosa en el icono secundario, puede utilizar RequestUpdateAsync.

// Initialize a secondary tile with the same tile ID you want to update
SecondaryTile tile = new SecondaryTile(tileId);

// Assign ALL properties, including ones you aren't changing

// And then update it
await tile.UpdateAsync();

Enumeración de todos los iconos secundarios anclados

Si necesita detectar todos los iconos que el usuario ha anclado, en lugar de usar SecondaryTile.Exists, también puede usar SecondaryTile.FindAllAsync().

// Get all secondary tiles
var tiles = await SecondaryTile.FindAllAsync();

Envío de una notificación de icono

Para obtener información sobre cómo mostrar contenido enriquecido en el icono a través de notificaciones de icono, vea Envío de una notificación de icono local.