UWP中使用InkCanvas绘图时ContentDialog内图片不显示问题

核心原因 #

UWP对本地文件访问有严格的权限限制，直接使用绝对路径加载用户目录下的图片会因为权限不足导致加载失败，这是你遇到问题的主要原因。

具体解决方法 #

1. 通过FileOpenPicker获取图片（推荐） #

使用FileOpenPicker选择图片后，UWP会自动获取该文件的访问权限，再通过流的方式加载图片：

private async void ShowDrawingDialog()
{
    var picker = new FileOpenPicker();
    picker.SuggestedStartLocation = PickerLocationId.PicturesLibrary;
    picker.FileTypeFilter.Add(".jpeg");
    picker.FileTypeFilter.Add(".png");
    
    StorageFile selectedFile = await picker.PickSingleFileAsync();
    if (selectedFile != null)
    {
        // 加载图片到Image控件
        using (IRandomAccessStream stream = await selectedFile.OpenAsync(FileAccessMode.Read))
        {
            BitmapImage bitmap = new BitmapImage();
            await bitmap.SetSourceAsync(stream);
            TargetImage.Source = bitmap;
        }
        
        // 显示ContentDialog
        await DrawingDialog.ShowAsync();
    }
}

2. 将图片作为应用资源加载（固定测试图） #

如果是固定的测试图片，把图片添加到项目中（比如Assets文件夹），设置生成操作为Content，然后用ms-appx:///协议路径加载：

• XAML直接设置：

  <Image x:Name="TargetImage" Source="ms-appx:///Assets/TestImage.jpeg" Stretch="Uniform" Width="400" Height="300"/>
  

• 后台代码设置：

  TargetImage.Source = new BitmapImage(new Uri("ms-appx:///Assets/TestImage.jpeg"));
  

3. 检查布局与显示问题 #

• 确保Image控件设置了合理的Width/Height或Stretch属性，避免因尺寸为0导致不可见
• 调整InkCanvas与Image的布局顺序，避免InkCanvas完全覆盖Image（可以给Image设置更高的Canvas.ZIndex，或者用Grid层叠时确保Image在下层）

  <ContentDialog x:Name="DrawingDialog">
      <Grid>
          <Image x:Name="TargetImage" Width="400" Height="300" Stretch="Uniform"/>
          <InkCanvas x:Name="DrawingCanvas"/>
      </Grid>
  </ContentDialog>
  

4. 特殊场景：使用 broadFileSystemAccess 权限 #

如果需要直接访问用户目录下的文件（不通过Picker），可以声明broadFileSystemAccess权限：

1. 在Package.appxmanifest中添加权限声明：

   <Capabilities>
       <Capability Name="broadFileSystemAccess" />
   </Capabilities>
   

2. 前往系统设置 → 应用 → 你的应用 → 权限 → 开启文件系统权限
3. 加载图片代码：

   var file = await StorageFile.GetFileFromPathAsync(@"C:\Users\Mariam Khaled\Downloads\1701342504893.jpeg");
   using (var stream = await file.OpenAsync(FileAccessMode.Read))
   {
       var bitmap = new BitmapImage();
       await bitmap.SetSourceAsync(stream);
       TargetImage.Source = bitmap;
   }
   

额外检查点 #

• 确认图片文件没有损坏，能正常打开
• 检查路径拼写是否正确，注意UWP中路径区分大小写
• 确保ContentDialog在显示前，图片已经完成加载（异步操作要等待完成）

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