Image not displaying in ContentDialog when using InkCanvas for drawing in UWP

Question

I'm facing an issue while trying to open an image in a UWP ContentDialog and allowing users to draw on it using InkCanvas. The problem is that the image does not appear on the dialog, and I'm struggling to identify the root cause. Even when I set a fixed source for the image, it still doesn't show

this is my xaml

<ContentDialog
    x:Class="eseua.Views.ImageEditorDialog"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:helpers="using:eseua.Helpers"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Title="{helpers:ResourceString Name=ExportHistoryNoteDialog_Header}"
    Width="600"
    Margin="5"
    HorizontalAlignment="Center"
    VerticalAlignment="Center"
    HorizontalContentAlignment="Center"
    VerticalContentAlignment="Center"
    CornerRadius="{StaticResource OverlayCornerRadius}"
    PrimaryButtonStyle="{StaticResource DefaultButtonStyle}"
    PrimaryButtonText="{helpers:ResourceString Name=ExportHistoryNoteDialog_PrimaryButtonText}"
    SecondaryButtonStyle="{StaticResource ThemeAwareContentDialogSecondaryButtonStyle}"
    SecondaryButtonText="{helpers:ResourceString Name=Edit_Note_Discard_Changes_Discard}"
    mc:Ignorable="d">
    <StackPanel
        HorizontalAlignment="Center"
        VerticalAlignment="Center"
        Orientation="Vertical">

        <Grid
            x:Name="img_grid"
            Width="600"
            Height="500">
            <Image
                x:Name="img"
                Width="600"
                Height="400"
                HorizontalAlignment="Left"
                VerticalAlignment="Top"
                ManipulationMode="All"
                Source="{x:Bind ViewModel.FilePath, Mode=OneWay}"
                Stretch="Fill" />
            <InkCanvas x:Name="img_inkcanvas" Margin="0,20,0,0" />
            <InkToolbar
                x:Name="img_inktoolbar"
                Margin="0,20,0,0"
                VerticalAlignment="Top"
                TargetInkCanvas="{x:Bind img_inkcanvas}" />
            <Button
                x:Name="IMG_C"
                HorizontalAlignment="Left"
                VerticalAlignment="Top"
                Content="Close" />
            <Button
                x:Name="Img_draw"
                HorizontalAlignment="Right"
                VerticalAlignment="Top"
                Content="Draw" />
        </Grid>

    </StackPanel>
</ContentDialog>

And this is my code behind

        internal ImageEditorDialogViewModel ViewModel => DataContext as ImageEditorDialogViewModel;
        private BitmapImage _imageSource;
        public ImageEditorDialog()
        {
            this.InitializeComponent();
            var themeBinding = new Binding { Source = ThemeAwareHelper.Instance, Path = new PropertyPath("Theme") };
            SetBinding(RequestedThemeProperty, themeBinding);
            img_inkcanvas.InkPresenter.InputDeviceTypes =
                    Windows.UI.Core.CoreInputDeviceTypes.Mouse |
                    Windows.UI.Core.CoreInputDeviceTypes.Pen;
}

and this is the output:

I've tried setting a fixed Source for the Image control in XAML.

I'm not sure if the source should be in what format so I tried to add Image path Like this C:\Users\Mariam Khaled\Downloads\1701342504893.jpeg and C:/Users/Mariam Khaled/Downloads/1701342504893.jpeg

and also I tried programmatically setting the image source using BitmapImage in the code-behind.

ImageSource image_source= new BitmapImage(new Uri(FilePath));

Answer 1

According the document File access permissions

By default, your app can only access files and folders in the user's Downloads folder that your app created.

UWP runs in a sandbox and cannot directly access external resources. It is recommended to add the pictures you need to the project, and set ViewModel.FilePath with URI(for example"Assets/StoreLogo.png"), instead of absolute path.

Setting Image.Source