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. 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 it for the 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:
<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>
Currently I am using the above code but I can't get my requirement. How can I solve my problem?
My requirement is to draw anything on my image using inkcanvas and a toolbar.

