다음을 통해 공유


확장에 명령 추가

이전: 확장 만들기 해당 문서에서 만든 프로젝트로 시작하겠습니다.

이제 확장을 만들었으므로 이제 명령을 추가해야 합니다.

명령 추가

파일에 /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 메서드는 이 페이지에 표시하려는 명령 목록을 반환하는 위치입니다. 지금은 아무 작업도 수행하지 않는 단일 명령만 반환합니다. 대신 해당 명령이 사용자의 기본 웹 브라우저에서 페이지를 열도록 해 보겠습니다.

  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. 명령 팔레트에서 "다시 로드" 명령을 입력하여 팔레트의 확장을 새로 고칩니다.

다시 로드 스크린샷

비고

다시 로드 옵션이 여러 개 있습니다. 명령 팔레트 확장 프로그램 다시 로드를 선택하십시오.

  1. 자신의 확장으로 스크롤한 다음 Enter 누르세요.
  2. 에서 Open the Command Palette documentationenter을 눌러주세요.
  3. 명령 팔레트 설명서가 열립니다.

OpenUrlCommand는 사용자의 기본 웹 브라우저에서 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를 누릅니다.
    • 또는 솔루션 탐색기에서 프로젝트 > 추가 새 항목으로 이동합니다...
  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를 사용하는 것이 좋습니다. 확장에 대해 다른 사용자와 손쉽게 공동 작업하고, 피드백을 받고, 전 세계와 공유할 수 있습니다.

페이지 유형

지금까지는 "작업을 수행하는" 명령만 사용했습니다. 그러나 명령 팔레트 내에 추가 페이지를 표시하는 명령을 추가할 수도 있습니다. 색상표에는 두 가지 유형의 "명령"이 있습니다.

  • InvokableCommand- 작업을 수행하는 명령입니다.
  • IPage- 무언가를 표시하는 명령입니다.

IPage 구현은 ICommand이므로 명령을 사용할 수 있는 모든 위치에서 사용할 수 있습니다. 즉, 최상위 명령 목록 또는 페이지의 명령 목록, 항목의 상황에 맞는 메뉴 등에 추가할 수 있습니다.

표시할 수 있는 두 가지 종류의 페이지가 있습니다.

  • ListPage - 명령 목록을 표시하는 페이지입니다. 이것이 우리가 지금까지 작업해 온 것입니다.

ListPage의 스크린샷

  • ContentPage - 사용자에게 서식 있는 콘텐츠를 표시하는 페이지입니다. 이렇게 하면 추상 콘텐츠를 지정하고 명령 팔레트에서 네이티브 환경에서 콘텐츠를 렌더링하는 것에 대해 걱정할 수 있습니다. 지금까지 지원되는 콘텐츠에는 두 가지 유형이 있습니다.

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개의 명령을 보여 주는 새 페이지가 확장에 표시됩니다.

다음 단계: 명령 목록 업데이트