Boost Productivity Using PowerToys Day 1 - Shortcut Guide

This is the day 1 I am using the PowerToys following the post. Day 2: Screen Ruler ⏭️

📝Description

The Shortcut Guide is simply showing you what shortcuts are there starting with the Windows key ⊞. That’s it. Simple and straight forward.

Tip

Wow! I never know I can use voice typing(⊞ + H) in Windows . That’s so cool! This feature could significantly enhance productivity!

⌨️Shortcut

Right, this is tongue-twisting, the shortcut of Shortcut Guide is Shift + ⊞ + /

🖱️Code

Since it’s open source, I can take a look on this feature.

Remark

Sorry for the so many “looks like” in this page because this is my first time reading the code of PowerToys.

Definition

It looks like every module of PowerToys must implement an interface defined at dllmain.cpp

class ShortcutGuideModule : public PowertoyModuleIface
{
public:
    ShortcutGuideModule()
    {
        app_name = GET_RESOURCE_STRING(IDS_SHORTCUT_GUIDE);
        app_key = L"Shortcut Guide";
        //...more
    }
}

Launch

The Shortcut Guide is a standalone executable that you can open manually, such as PowerToys.ShortcutGuide.exe.

1️⃣ use Shift + ⊞ + / :

bool StartProcess(std::wstring args = L"")
{
    //...
    sei.lpFile = L"PowerToys.ShortcutGuide.exe";  //👈
    sei.nShow = SW_SHOWNORMAL;
    
}

2️⃣ click the following button:

The executable can also be initiated by clicking the button on the setting page:

private void Start_ShortcutGuide_Click(object sender, Microsoft.UI.Xaml.RoutedEventArgs e)
{
    var executablePath = Path.Combine(System.AppDomain.CurrentDomain.BaseDirectory, "..", @"PowerToys.ShortcutGuide.exe");  //👈
    //...
}

Remark

The Shortcut Guide can be disabled by Group Policy

Drawing Window

The overlay window is drawn by DirectX. The opacity can also be adjusted.

void OverlayWindow::ShowWindow()
{
    winkey_popup = std::make_unique<D2DOverlayWindow>();
    winkey_popup->apply_overlay_opacity(overlayOpacity.value / 100.0f);
    //...
}

Rendering the SVG

This is the fun part. The layout of the Shortcut Guide is not defined in code but reads a pre-defined SVG file:

void D2DOverlayWindow::init()
{
    colors.update();
    landscape.load(L"Assets\\ShortcutGuide\\overlay.svg", d2d_dc.get())
        .find_thumbnail(L"monitorRect")
        .find_window_group(L"WindowControlsGroup")
        .recolor(0x2582FB, colors.start_color_menu);
    //...
}

This approach is very smart. The developers have placed the frequently changed parts into assets that can be hot reloaded. This means the SVG file can be updated by UX designers and localization teams without changing any code.

What you below is an asset from the repo Assets/ShortcutGuide/overlay.svg: