WinUI3 C++桌面应用：如何给Canvas添加半透明灰色覆盖层

1. 设置叠加Canvas的半透明灰色背景 #

直接通过代码创建带Alpha通道的SolidColorBrush，赋值给叠加Canvas的Background属性：

#include <winrt/Windows.UI.Xaml.Media.h>
#include <winrt/Windows.UI.h>

// 创建半透明灰色画刷：0xCC是Alpha（约80%不透明度），0x808080是中性灰
auto overlayBrush = winrt::Windows::UI::Xaml::Media::SolidColorBrush{
    winrt::Windows::UI::ColorHelper::FromArgb(0xCC, 0x80, 0x80, 0x80)
};
overlayCanvas.Background(overlayBrush);

如果是在XAML中定义叠加Canvas，也可以直接设置Background属性：

<Canvas x:Name="overlayCanvas" Background="#CC808080">
    <ProgressRing HorizontalAlignment="Center" VerticalAlignment="Center" IsActive="True"/>
</Canvas>

2. 禁用底层控件的交互能力 #

将原有Canvas的IsHitTestVisible属性设为false，这样其内部所有控件都会停止响应鼠标、触摸等交互事件：

// 显示遮罩时禁用底层交互
originalCanvas.IsHitTestVisible(false);

// 加载完成后恢复交互并隐藏遮罩
originalCanvas.IsHitTestVisible(true);
overlayCanvas.Visibility(winrt::Windows::UI::Xaml::Visibility::Collapsed);

3. 确保遮罩Canvas完全覆盖底层内容 #

要保证叠加Canvas的尺寸和原有Canvas一致，避免出现遮罩不全的情况：

• 代码方式：同步尺寸并监听变化，动态更新

// 初始同步尺寸
overlayCanvas.Width(originalCanvas.ActualWidth());
overlayCanvas.Height(originalCanvas.ActualHeight());

// 监听尺寸变化事件，自动同步
originalCanvas.ActualWidthChanged([&](auto const&, auto const&) {
    overlayCanvas.Width(originalCanvas.ActualWidth());
});
originalCanvas.ActualHeightChanged([&](auto const&, auto const&) {
    overlayCanvas.Height(originalCanvas.ActualHeight());
});

• XAML绑定方式：直接绑定遮罩Canvas的宽高到原有Canvas的实际宽高

<Canvas x:Name="overlayCanvas" 
        Width="{Binding ElementName=originalCanvas, Path=ActualWidth}"
        Height="{Binding ElementName=originalCanvas, Path=ActualHeight}"
        Background="#CC808080">
    <ProgressRing HorizontalAlignment="Center" VerticalAlignment="Center" IsActive="True"/>
</Canvas>

内容的提问来源于stack exchange，提问作者Harshith