WPF中如何在图片上实现带InkToolbar的InkCanvas手写标注功能

问题原因与修复方案 #

现有代码存在4个核心错误，按优先级修复即可实现图片上标注的需求：

• 语法错误：Image控件存在多余的</Image>闭合标签，引发布局解析异常，会导致图片显示异常
• 属性冲突：InkCanvas同时绑定了Width/Height和设置了拉伸属性，两者逻辑冲突，导致InkCanvas实际响应区域错位
• 输入遮罩错误：OpacityMask="Transparent"会让InkCanvas的输入区域被完全遮罩，无法响应笔、触摸、鼠标输入
• 命中测试失效：InkCanvas未显式设置透明背景，WPF中无背景的控件默认不响应命中测试，无法触发绘制

修复后完整代码 #

<Grid>
    <Grid.Resources>
        <conv:TempConverter x:Key="tempConverter"/>
        <conv:ImageMarkPositionConverter x:Key="positionConverter"/>
        <conv:ImageMarkVisibilityConverter x:Key="markVisibilityConverter"/>
        <conv:ImageMarkerTooltipConverter x:Key="tooltipConverter"/>
        <conv:EnumToStringConverter x:Key="enumToStringConverter"/>
    </Grid.Resources>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition/>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>
    <Grid Grid.Column="1">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <!-- 移除多余的闭合标签，保持Image布局不变 -->
        <Image Grid.Row="1" x:Name="Currentimg" HorizontalAlignment="Center" VerticalAlignment="Stretch" Source="{Binding CurrentImage}"/>
        <Grid Grid.Row="1" Background="Transparent">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <!-- 移除InkToolbar的OpacityMask属性 -->
            <Controls:InkToolbar TargetInkCanvas="{x:Reference myInkCanvas}" Grid.Row="0"/>
            <!-- 移除OpacityMask、宽高绑定，显式设置透明背景保证命中测试生效 -->
            <Controls:InkCanvas x:Name="myInkCanvas" Grid.Row="1" 
                               Panel.ZIndex="100" 
                               VerticalAlignment="Stretch" 
                               HorizontalAlignment="Stretch"
                               Background="Transparent"/>
        </Grid>
    </Grid>
</Grid>

额外验证点 #

如果修复后仍无法绘制，检查以下配置：

• 确认InkToolbar的笔刷颜色不是透明色，默认笔刷为黑色，不会出现画了看不到的情况
• 如果图片有缩放逻辑，后续要同步笔迹缩放的话，可以把Image和InkCanvas同时放在ViewBox控件内，实现笔迹和图片的同步缩放偏移

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