How to Implement Inkcanvas with ink toolbar on image in WPF

[shaileshparmar1997]

Hi!
I try to implement this functionality in my WPF application. Functionality is working fine but my problem is when I try to implement on the image then this time my image is not shown and when I try to show the image then ink canvas does not work.

When I try implement by this

    <Controls:InkToolbar TargetInkCanvas="{x:Reference myInkCanvas}" Grid.Row="0" OpacityMask="Transparent"/>
    <Controls:InkCanvas x:Name="myInkCanvas" Grid.Row="1" OpacityMask="Transparent">

Then my output is fine

But when I try to fix for shown image then I can't draw anything

    <Controls:InkToolbar TargetInkCanvas="{x:Reference myInkCanvas}" Grid.Row="0" OpacityMask="Transparent"/>
    <Controls:InkCanvas x:Name="myInkCanvas" Grid.Row="1" OpacityMask="Transparent"
                       Width="{Binding ActualWidth,ElementName=Currentimg}" Height="{Binding ActualHeight,ElementName=Currentimg}"
                       Panel.ZIndex="100" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" />

in Currentimg is my image id

Can you suggest me how can I slow my problem?

my requirement is draw anything on my image using inkcanvas and toolbar
Thanks!

[ghost]

Hello shaileshparmar1997, thank you for your interest in Win32!

I have automatically added a "needs triage" label to help get things started. Our team will look into the question and answer ASAP. Other community members may also answer the question and provide feedback 🙌

[shaileshparmar1997]

Please help me regarding this issue

[michael-hawker]

@shaileshparmar1997 where is you image in your XAML? I assume that the image is over the ink canvas or something. I'm not sure how airspace works between WPF and XAML Islands components though either, @marb2000 @ocalvo @azchohfi?

It may be easier to setup a custom user control in the UWP side for a XAML Islands component and place the image behind the canvas all in the same layer of the application (UWP vs. WPF)?

[shaileshparmar1997]

i did't get your explanation?

[shaileshparmar1997]

    <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 Grid.Row="1" x:Name="Currentimg" HorizontalAlignment="Center" VerticalAlignment="Stretch" Source="{Binding CurrentImage}"/>
            </Image>
            <Grid Grid.Row="1" Background="Transparent">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <Controls:InkToolbar TargetInkCanvas="{x:Reference myInkCanvas}" Grid.Row="0" OpacityMask="Transparent"/>
                <Controls:InkCanvas x:Name="myInkCanvas" Grid.Row="1" OpacityMask="Transparent" Width="{Binding ActualWidth,ElementName=Currentimg}" 
                   Panel.ZIndex="100" VerticalAlignment="Stretch"  HorizontalAlignment="Stretch" Height="{Binding ActualHeight,ElementName=Currentimg}"/>

                <!--</Controls:InkCanvas>
                <Controls:InkToolbar TargetInkCanvas="{x:Reference myInkCanvas}" Grid.Row="0"/>
                <Controls:InkCanvas x:Name="myInkCanvas" Grid.Row="1" Height="100"  Panel.ZIndex="100" OpacityMask="Transparent" Opacity="0"/>

                <Controls:InkToolbar TargetInkCanvas="{x:Reference myInkCanvas}" Grid.Row="0" />
                <Controls:InkCanvas x:Name="myInkCanvas" Grid.Row="1" Height="{Binding ActualHeight,ElementName=Currentimg}" Width="{Binding ActualWidth,ElementName=Currentimg}"  HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Panel.ZIndex="100"/>
                <Controls:InkToolbar  DockPanel.Dock="Top" x:Name="inkToolbar" Grid.Row="0" TargetInkCanvas="{x:Reference Name=myInkCanvas}">
                    <Controls:InkToolbarCustomToolButton x:Name="toolButtonLasso" />
                </Controls:InkToolbar>
                <Controls:InkCanvas x:Name="myInkCanvas" Grid.Row="1" Height="{Binding ActualHeight,ElementName=Currentimg}" Width="{Binding ActualWidth,ElementName=Currentimg}"  HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Panel.ZIndex="100"/>-->
            </Grid>
        </Grid>
    </Grid>

Please check my code , i have use WPF application