WPF中如何为Uniform设置产生的内边距空白添加鼠标事件

ImageBrush属于画刷资源，本身不是可独立交互的可视元素。当设置Stretch="Uniform"做等比缩放时，周边产生的留白只是画刷的透明填充效果，没有独立的命中测试判定区域，直接给承载ImageBrush的容器绑定鼠标事件，无法区分点击位置是在图片上还是留白区域，没法单独给留白区绑定响应逻辑。

放弃用ImageBrush做背景的实现方式，改用Grid分层布局实现：底层放撑满容器的透明可视元素专门承接留白区的鼠标事件，上层放设置了Stretch="Uniform"的Image控件显示图片。两层元素命中测试独立，图片区域的事件会被上层Image拦截，留白区域的事件会落到下层透明元素上，刚好实现需求。

改造后的XAML代码 #

<Grid>
    <!-- 底层留白响应层：透明背景撑满全容器，只接收图片未覆盖区域的鼠标事件 -->
    <Border x:Name="BlankArea" 
            Background="Transparent" 
            MouseDown="BlankArea_MouseDown"/>
    <!-- 上层图片显示层：等比缩放渲染图片，拦截自身渲染区域的鼠标事件 -->
    <Image x:Name="DisplayImage"
           Source="{Binding CurrentTextBook}"
           Stretch="Uniform"/>
</Grid>

后台代码 #

public MainWindow()
{
    InitializeComponent();
    DataContext = this;
    CurrentTextBook = new BitmapImage(new Uri(@"C:\...\11.png"));
}

public ImageSource CurrentTextBook { get; set; }

private void BlankArea_MouseDown(object sender, MouseButtonEventArgs e)
{
    // 此处编写留白区域的鼠标响应逻辑
    Point clickPos = e.GetPosition(DisplayImage);
    Rect imageRenderRect = GetImageActualRenderRect();
    
    // 可按需判断点击属于哪个方向的留白，比如实现左右翻页逻辑
    if (clickPos.X < imageRenderRect.Left)
    {
        // 点击左侧留白逻辑
    }
    else if (clickPos.X > imageRenderRect.Right)
    {
        // 点击右侧留白逻辑
    }
    else if (clickPos.Y < imageRenderRect.Top)
    {
        // 点击顶部留白逻辑
    }
    else if (clickPos.Y > imageRenderRect.Bottom)
    {
        // 点击底部留白逻辑
    }
    
    e.Handled = true;
}

// 计算图片在容器内实际渲染的矩形边界
private Rect GetImageActualRenderRect()
{
    if (DisplayImage.Source is not BitmapSource source) return Rect.Empty;
    
    Size sourceSize = new Size(source.PixelWidth, source.PixelHeight);
    Size containerSize = DisplayImage.RenderSize;
    double scale = Math.Min(containerSize.Width / sourceSize.Width, containerSize.Height / sourceSize.Height);
    
    double actualWidth = sourceSize.Width * scale;
    double actualHeight = sourceSize.Height * scale;
    double offsetX = (containerSize.Width - actualWidth) / 2;
    double offsetY = (containerSize.Height - actualHeight) / 2;
    
    return new Rect(offsetX, offsetY, actualWidth, actualHeight);
}

注意事项 #

• 底层的Border必须显式设置Background="Transparent"，WPF中默认Background=null的元素不参与命中测试，无法接收鼠标事件
• 如果需要给图片本身也加鼠标响应，直接给上层Image控件绑定对应事件即可，事件不会透传到下层留白层
• 如果需要适配容器尺寸变化，不需要额外做重置逻辑，GetImageActualRenderRect方法会实时根据当前渲染尺寸计算边界

效果示意图

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