拡張機能へのコマンドの追加

へ: 拡張機能の作成。 この記事で作成したプロジェクトから始めます。

拡張機能を作成したので、次にコマンドを追加します。

コマンドの追加

まず、 /Pages/<ExtensionName>Page.cs ファイルに移動します。 このファイルは、ユーザーが拡張機能を選択したときに表示される ListPage です。 そこに次の情報が表示されます。

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" }
    ];
}

ここでは、コマンドを選択したときに最上位レベルに表示されるページ、タイトル、および名前のアイコンが設定されていることがわかります。 GetItemsメソッドは、このページに表示するコマンドの一覧を返す場所です。 現時点では、何も行わない単一のコマンドを返しています。 代わりに、そのコマンドをユーザーの既定の Web ブラウザーで この ページを開いてみましょう。

  1. GetItems を次のように更新します。
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",
        }
    ];
}

コマンド パレットで拡張機能を更新するには、次の手順を実行する必要があります。

  1. 拡張機能をデプロイする
  2. コマンド パレットに「reload」コマンドを入力して、パレット内の拡張機能を更新します

再読み込みのスクリーンショット

いくつかの再読み込みオプションがあります。コマンド パレット拡張機能の再読み込みを選択してください

  1. 拡張機能のところまでスクロールして、Enterを押してください。
  2. enterを押すOpen the Command Palette documentation
  3. コマンドがコマンドパレットのドキュメントを開くことを確認できるはずです。

OpenUrlCommand は、ユーザーの既定の Web ブラウザーで URL を開くヘルパーです。

デバッグ拡張機能

拡張機能をビルドするときは、ほとんどの場合、それをデバッグする必要があります。

  1. GetItems関数にデバッグ メッセージを追加します。
    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. 拡張機能をデプロイする
  2. デバッグ構成であることを確認する
デバッグ構成を確認する手順
  1. Visual Studioの上部にあるツール バーを見る
  2. DebugまたはRelease (緑色の [スタート] ボタン▶️の横) を示すドロップダウンが表示されます。
  3. Releaseと表示されている場合は、ドロップダウンをクリックしてDebugを選択します。

Visual Studioのツールバーのスクリーンショットで、「デバッグ」を表示しています。

  1. アプリをデバッグモードで実行するには、緑色の[スタート]ボタン▶️を押すか、F5
  2. [出力] ウィンドウが Debug 出力を表示するように設定されていることを確認します (Ctrl + Alt + O)

Visual Studioの出力パネルのスクリーンショット

  1. コマンド パレットでreloadを実行します。
  2. 拡張機能に移動し、 Open the Command Palette documentationを選択します。
  3. Visual Studioの出力ウィンドウにDebug message from GetItemsが表示されているはずです。

InvokableCommand コマンド

MessageBox を示す新しいコマンドの作成を続けましょう。 そのためには、 InvokableCommandを実装する新しいクラスを作成する必要があります。

  1. Visual Studioで、新しいクラス ファイルを Pages ディレクトリに追加します
    • キーボード ショートカット: Ctrl + Shift + A キーを押します
    • または、ソリューション エクスプローラーで、Project > 新しい項目の追加に移動します。..
  2. [新しい項目の追加] ダイアログで、次の手順を実行します。
    1. 一覧から [クラス] を選択します。
    2. クラス ファイルに名前を付けます。 ShowMessageCommand.cs
    3. [追加] をクリックします。
  3. 既定のクラス コードを次のように置き換えます。
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);
}

これで、 <ExtensionName>Page.cs ファイル内のコマンドの一覧に次のコマンドを追加できます。

  1. <ExtensionName>.csで、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. 拡張機能をデプロイする
  2. コマンド パレットで操作します。Reload

そして、presto - メッセージボックスを表示するコマンド!

ヒント

この時点で、プロジェクトの git リポジトリ/{他のソース管理メソッド} を初期化することが必要になる可能性があります。 これにより、変更を追跡したり、拡張機能を他のユーザーと共有したりしやすくなります。

GitHubを使用することをお勧めします。拡張機能を他のユーザーと簡単に共同作業したり、フィードバックを得たり、世界と共有したりできます。

ページの種類

ここまでは、"何かを行う" コマンドでのみ作業してきました。 ただし、コマンド パレット内に追加のページを表示するコマンドを追加することもできます。 パレットには、次の 2 種類の "コマンド" があります。

  • InvokableCommand- これらは何かを行うコマンドです
  • IPage- これらは何かを表示するコマンドです

IPage実装は ICommand であるため、コマンドを使用できる任意の場所で使用できます。 つまり、それらをコマンドの最上位レベルの一覧、またはページ上のコマンドの一覧、項目のコンテキスト メニューなどに追加できます。

表示できるページには、次の 2 種類があります。

  • ListPage - コマンドの一覧を表示するページです。 これは、これまで取り組んできたものです。

ListPage のスクリーンショット

  • ContentPage - ユーザーにリッチ コンテンツを表示するページです。 これにより、抽象的な内容を指定でき、コンテンツのレンダリングをネイティブ エクスペリエンスでコマンド パレットに任せることができます。 これまでにサポートされているコンテンツには、次の 2 種類があります。

ContentPage を使用した拡張機能のスクリーンショット

  • フォーム コンテンツ - フォームをユーザーに表示し、そのフォームの結果を拡張機能に返すコンテンツです。 これらは、アダプティブ カードこれは、ユーザー入力を取得したり、より複雑な情報のレイアウトを表示したりするのに役立ちます。 詳細については、 FormContent を参照してください。

フォーム コンテンツのスクリーンショット

その他のコマンドを追加する

まず、コマンドの一覧を表示する新しいページを追加します。 ListPage を実装する新しいクラスを作成します。

  1. Pages フォルダーに、次の名前の新しいクラスを作成します。MySecondPage
  2. コードを次のコードに更新します。
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.この新しいページを含むように <ExtensionName>Page.cs を更新します。

    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. 拡張機能をデプロイする
  2. コマンド パレットで操作します。Reload

これで、クリップボードに数値をコピーする 100 個のコマンドを示す新しいページが拡張機能に表示されます。

次へ: コマンドの一覧を更新する