How to implement Inkcanvas with ink toolbar on image in WPF

Viewed 74

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">

enter image description here

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" />

enter image description here

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.

0 Answers
Related