Adición de comandos a la extensión

Anterior: Creación de una extensión. Comenzaremos con el proyecto creado en ese artículo.

Ahora que ha creado la extensión, es el momento de agregar comandos a ella.

Agregar comandos

Podemos empezar navegando al /Pages/<ExtensionName>Page.cs archivo. Este archivo es listPage que se mostrará cuando el usuario seleccione la extensión. Ahí debería ver:

public <ExtensionName>Page()
{
    Icon = IconHelpers.FromRelativePath("Assets\\StoreLogo.png");
    Title = "My sample extension";
    Name = "Open";
}
public override IListItem[] GetItems()
{
    return [
        new ListItem(new NoOpCommand()) { Title = "TODO: Implement your extension here" }
    ];
}

Aquí puede ver que hemos establecido el icono de la página, el título y el nombre que se muestra en el nivel superior cuando tiene seleccionado el comando. El GetItems método es donde devolverá la lista de comandos que desea mostrar en esta página. En este momento, solo devuelve un único comando que no hace nada. En su lugar, vamos a intentar que ese comando abra esta página en el explorador web predeterminado del usuario.

1. Actualice GetItems a lo siguiente:

public override IListItem[] GetItems()
{
    var command = new OpenUrlCommand("https://learn.microsoft.com/windows/powertoys/command-palette/adding-commands");
    return [
        new ListItem(command)
        {
            Title = "Open the Command Palette documentation",
        }
    ];
}

Para actualizar la extensión en la paleta de comandos, debe:

1. Implementación de la extensión
2. En la paleta de comandos, escriba el comando "volver a cargar" para actualizar las extensiones de la paleta.

1. Desplácese hacia abajo hasta la extensión y presione Enter
2. Presione enter en Open the Command Palette documentation
3. Debería ver que el comando abre la documentación de la paleta de comandos.

OpenUrlCommand es un asistente para abrir una dirección URL en el explorador web predeterminado del usuario.

Extensión de depuración

Mientras está desarrollando su extensión, lo más probable es que quiera depurarla.

1. Agregue un mensaje de depuración a la GetItems función .

    public override IListItem[] GetItems()
    {
        var command = new OpenUrlCommand("https://learn.microsoft.com/windows/powertoys/command-palette/adding-commands");
    
+       Debug.Write("Debug message from GetItems");
    
        return [
            new ListItem(command)
            {
                Title = "Open the Command Palette documentation",
            }
        ];
    }

1. Implementación de la extensión
2. Confirme que está en la configuración de depuración

1. Ejecute la aplicación en modo depuración presionando el botón verde "Iniciar" ▶️ o F5
2. Asegúrese de que la ventana Salida está establecida para mostrar Debug la salida (Ctrl + Alt + O)

1. En la paleta de comandos, ejecute reload
2. Vaya a la extensión y seleccione Open the Command Palette documentation.
3. En la ventana Salida de Visual Studio, debería ver Debug message from GetItems

Comando InvokableCommand

Vamos a seguir creando un nuevo comando, que muestra un cuadro de mensajes. Para ello, es necesario crear una nueva clase que implemente InvokableCommand.

1. En Visual Studio, agregue un nuevo archivo de clase al Pages directorio.
   • Método abreviado de teclado: presione Ctrl + Mayús + A
   • O bien, en el Explorador de soluciones, vaya a Proyecto > Agregar nuevo elemento...
2. En el cuadro de diálogo Agregar nuevo elemento:
   1. Seleccione Clase en la lista.
   2. Asigne un nombre al archivo de clase: ShowMessageCommand.cs
   3. Haga clic en Agregar.
3. Reemplace el código de clase predeterminado por:

using System.Runtime.InteropServices;

namespace <ExtensionName>;

internal sealed partial class ShowMessageCommand : InvokableCommand
{
    public override string Name => "Show message";
    public override IconInfo Icon => new("\uE8A7");

    public override CommandResult Invoke()
    {
        // 0x00001000 is MB_SYSTEMMODAL, which will display the message box on top of other windows.
        _ = MessageBox(0, "I came from the Command Palette", "What's up?", 0x00001000);
        return CommandResult.KeepOpen();
    }


    [DllImport("user32.dll", CharSet = CharSet.Unicode)]
    public static extern int MessageBox(IntPtr hWnd, string text, string caption, uint type);
}

Ahora podemos agregar este comando a la lista de comandos del <ExtensionName>Page.cs archivo:

1. En el <ExtensionName>.cs, actualice el GetItems.

public override IListItem[] GetItems()
{
    var command = new OpenUrlCommand("https://learn.microsoft.com/windows/powertoys/command-palette/creating-an-extension");
    var showMessageCommand = new ShowMessageCommand();
    return [
        new ListItem(command)
        {
            Title = "Open the Command Palette documentation",
        },
        new ListItem(showMessageCommand),
    ];
}

1. Implementación de la extensión
2. En la paleta de comandos, Reload

¡Y presto: un comando para mostrar un cuadro de mensaje!

Tipos de páginas

Hasta ahora, solo hemos trabajado con comandos que "hacen algo". Sin embargo, también puede agregar comandos que muestren páginas adicionales dentro de la paleta de comandos. Hay dos tipos de comandos en la paleta:

• InvokableCommand - Estos son comandos que hacen algo
• IPage - Estos son comandos que muestran algo

Dado que IPage las implementaciones son ICommand, puede usarlas en cualquier lugar donde pueda usar comandos. Esto significa que puede agregarlos a la lista de nivel superior de comandos o a una lista de comandos de una página, el menú contextual de un elemento, etc.

Hay dos tipos diferentes de páginas que puede mostrar:

• ListPage : se trata de una página que muestra una lista de comandos. Esto es lo que hemos estado trabajando hasta ahora.

• ContentPage : se trata de una página que muestra contenido enriquecido para el usuario. Esto le permite especificar contenido abstracto y dejar que la paleta de comandos se preocupe por representar el contenido en una experiencia nativa. Hay dos tipos diferentes de contenido admitidos hasta ahora:
  • Contenido de Markdown : este es el contenido escrito en Markdown y se representa en la paleta de comandos. Consulte MarkdownContent para obtener más información.

• Contenido del formulario: este es el contenido que muestra un formulario al usuario y, a continuación, devuelve los resultados de ese formulario a la extensión. Estas están impulsadas por Tarjetas Adaptativas. Esto es útil para obtener entrada del usuario o para mostrar diseños de información más complejos. Consulte FormContent para obtener más información.

Adición de más comandos

Empiece agregando una nueva página que muestre una lista de comandos. Cree una nueva clase que implemente ListPage.

1. En la Pages carpeta , cree una nueva clase denominada MySecondPage
2. Actualice el código a:

using Microsoft.CommandPalette.Extensions.Toolkit;
using System.Linq;

namespace <ExtensionName>;

internal sealed partial class MySecondPage : ListPage
{
    public MySecondPage()
    {
        Icon = new("\uF147"); // Dial2
        Title = "My second page";
        Name = "Open";
    }

    public override IListItem[] GetItems()
    {
        // Return 100 CopyText commands
        return Enumerable
            .Range(0, 100)
            .Select(i => new ListItem(new CopyTextCommand($"{i}")) 
            {
                Title = $"Copy text {i}" 
            }).ToArray();
    }
}

1.Actualice el <ExtensionName>Page.cs para incluir esta nueva página:

    public override IListItem[] GetItems()
    {
        OpenUrlCommand command = new("https://learn.microsoft.com/windows/powertoys/command-palette/creating-an-extension");
        return [
            new ListItem(command)
            {
                Title = "Open the Command Palette documentation",
            },
            new ListItem(new ShowMessageCommand()),
+           new ListItem(new MySecondPage()) { Title = "My second page", Subtitle = "A second page of commands" },
        ];
    }

1. Implementación de la extensión
2. En la paleta de comandos, Reload

Ahora debería ver una nueva página de su extensión que muestra 100 comandos para copiar un número en el Portapapeles.

Siguiente: Actualizar una lista de comandos

Contenido relacionado

• PowerToys Utilidad de la paleta de comandos
• Visión general de la extensibilidad
• Ejemplos de extensión