How to Implement Inkcanvas with ink toolbar on image in WPF
shaileshparmar1997 opened this issue · comments
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!
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 🙌
Please help me regarding this issue
@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)?
i did't get your explanation?
<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