Hi everyone. Thanks for taking time to read this!

I am trying to develop a program that's mainly based on an InkCanvas. My
InkCanvas is attached to a Border object, which in turn is attached to my
main window. Now, I want to add a button to my InkCanvas (as a child of the
inkcanvas), and add event handlers for the button such as Click, StylusMove,
etc. However, my problem with that is the button seems to hide behind the
inkcanvas, and its event handlers are not fired at all. For example, the
click event handler: when I click on the button, it merely interprets that as
an ink stroke on the inkcanvas, instead of a click for the button. Is there a
way for me to pass the event handler down through the inkcanvas to the button?

Thanks for all your help!

That's an interesting question. Since I am relatively new to WPF (but not to
Tablet PC programming) I'll try to offer some insight but I don't have a
simple answer for you.

So first of all, do you need the selection and dragging capability of the
InkCanvas on the button? Or is the button always going to be fixed in one
place? If the button is not intended to be "selectable" then you can simply
re-nest your elements like so:

<Border ...>
<Grid>
<InkCanvas ... />
<Canvas (or grid or any other layout panel) ...>
<Button ... />
</Canvas>
</Grid>
</Border>

That way, in theory, the InkCanvas and regular Canvas would both be in the
same place visually but the InkCanvas would be behind the Canvas. Now don't
take my word for that because there may be technical issues where the
InkCanvas always is the top layer, I don't know. But in a "pure WPF" world,
that should work.

The other thing you could do is try handling the preview stylus events and
cancel them when they are within the bounds of a button. Again, I don't know
if that will prevent the ink stroke from being eaten but it may work.

Unfortunately I can't try them at the moment as I am in the process of
upgrading VS 2008 but let me know how it goes.

--
Josh Einstein (Tablet PC MVP)
Einstein Technologies
Tablet Enhancements for Outlook - Try it free: www.tabletoutlook.com

"hmcsketch" <hmcsketch@discussions.microsoft.com> wrote in message
news:3A5AA9BF-DE1A-43CF-8AAE-DE6A36983CB0@microsoft.com...
> Hi everyone. Thanks for taking time to read this!
>
> I am trying to develop a program that's mainly based on an InkCanvas. My
> InkCanvas is attached to a Border object, which in turn is attached to my
> main window. Now, I want to add a button to my InkCanvas (as a child of
> the
> inkcanvas), and add event handlers for the button such as Click,
> StylusMove,
> etc. However, my problem with that is the button seems to hide behind the
> inkcanvas, and its event handlers are not fired at all. For example, the
> click event handler: when I click on the button, it merely interprets that
> as
> an ink stroke on the inkcanvas, instead of a click for the button. Is
> there a
> way for me to pass the event handler down through the inkcanvas to the
> button?
>
> Thanks for all your help!

Hi!

Thanks for the speedy reply.

While I don't need the buttons to be selectable, I do want to allow ink to
be drawn over the buttons. So if the inkcanvas is hidden behind the button, I
probably won't be able to do that.

I'm very curious about your suggestion of using the preview event handlers.
I read a bit about it, but I'm still slightly confused as to how to use them
towards what I want to do. Right now, the event handler that I am most
interested in getting working for the buttons is actually the stylusmove
event. So, right now, I implemented a previewstylusmove event handler for the
inkcanvas that repeatedly checks to see if the stylus is within the range of
the buttons. Once it finds that it is though, how should I invoke the event
handler of the button? Do I need to use RoutedEvents of any sort? It'll be
great if you can elaborate a bit on the use of the preview event handlers
that you are thinking of.

Thanks so much! =)

Handling a preview event just gives you the ability to cancel the event
before it gets to a default handler. I don't know if cancelling a stylus
event will have any effect on InkCanvas, but it's supposed to - that's the
design of the preview events.

But if you want ink to be able to be drawn over top of the button, yet also
allow the button to be clicked, then you've got to figure out how you're
going to handle that implicit mode switch. For example, if I write a
lowercase i on the button, how do you know whether or not I was clicking the
button or trying to write the lowercase i?

I just tried to make a trigger on IsMouseOver on the button (which lay
beneath a transparent InkCanvas in the z-order) to put the button above the
ink canvas in the z-order. However, the IsMouseOver property is not changing
as I expected. I didn't see a suitable event or dependency property that
could be used to respond to the cursor coming within the bounds of a button
that was behind even a transparent control.

So it looks like you'll have to do it the old fashioned way by hooking up an
event handler to the stylus move event like you're doing, then when the
bounds of the button contain the stylus point, make the canvas containing
the buttons have a z-index greater than the ink canvas. That way you can
interact with the button.

So to recap:

<Grid ... >
<Canvas x:Name="ControlCanvas" Panel.ZIndex="0"><Button ... /></Canvas>
<InkCanvas Background="{x:Null}" Panel.ZIndex="1" ... />
</Grid>

Then wire up an event handler to the StylusMove (or preferably the
MouseMove) event of the window or control that contains the whole thing.
Then when the point is within the bounds of the Button (after translating it
to the appropriate coordinates of course) set the ZIndex property of
ControlCanvas to "2", then when the stylus leaves the bounds of the button,
set it back to "0".

Remember, don't attach the event handler to the button because it will not
get the event because it is behind the InkCanvas, even though the
transparency of the InkCanvas makes the button visible.

--
Josh Einstein (Tablet PC MVP)
Einstein Technologies
Tablet Enhancements for Outlook - Try it free: www.tabletoutlook.com

"hmcsketch" <hmcsketch@discussions.microsoft.com> wrote in message
news:A28DF6C3-26D4-46A9-B11C-B402E9D51B22@microsoft.com...
> Hi!
>
> Thanks for the speedy reply.
>
> While I don't need the buttons to be selectable, I do want to allow ink to
> be drawn over the buttons. So if the inkcanvas is hidden behind the
> button, I
> probably won't be able to do that.
>
> I'm very curious about your suggestion of using the preview event
> handlers.
> I read a bit about it, but I'm still slightly confused as to how to use
> them
> towards what I want to do. Right now, the event handler that I am most
> interested in getting working for the buttons is actually the stylusmove
> event. So, right now, I implemented a previewstylusmove event handler for
> the
> inkcanvas that repeatedly checks to see if the stylus is within the range
> of
> the buttons. Once it finds that it is though, how should I invoke the
> event
> handler of the button? Do I need to use RoutedEvents of any sort? It'll be
> great if you can elaborate a bit on the use of the preview event handlers
> that you are thinking of.
>
> Thanks so much! =)

Hi!

I'm terribly sorry for the much delayed response. Thank you once again for
helping.

First of all, instead of adding the button onto the same control that the
inkCanvas is attached to, I actually want to add the button onto inkCanvas
(as a child element of inkCanvas). Thus, I don't have the option to change
the ZOrder. Nevertheless, the way I have it now, I wired the event handler to
the StylusMove event for the inkCanvas, and whenever it's within the bounds
of the Button, I just call another method that does what I want it to do.
Right now, it's working pretty smoothly, but I hope as I add more button to
the inkCanvas, this repeated checking will now slow down the performance of
my program.

Thanks for all your help!

Right, but my suggestion for making it not a child element was because you
indicated that you don't need the selection capability of the ink canvas.
That's really all you gain from that. But either way, the workarounds I
suggested didn't work anyway so as long as you got it working.

--
Josh Einstein (Tablet PC MVP)
Einstein Technologies
Tablet Enhancements for Outlook - Try it free: www.tabletoutlook.com


"hmcsketch" <hmcsketch@discussions.microsoft.com> wrote in message
news:22F5C3BA-EC3F-489F-838B-F99AE9F01D1A@microsoft.com...
> Hi!
>
> I'm terribly sorry for the much delayed response. Thank you once again for
> helping.
>
> First of all, instead of adding the button onto the same control that the
> inkCanvas is attached to, I actually want to add the button onto inkCanvas
> (as a child element of inkCanvas). Thus, I don't have the option to change
> the ZOrder. Nevertheless, the way I have it now, I wired the event handler
> to
> the StylusMove event for the inkCanvas, and whenever it's within the
> bounds
> of the Button, I just call another method that does what I want it to do.
> Right now, it's working pretty smoothly, but I hope as I add more button
> to
> the inkCanvas, this repeated checking will now slow down the performance
> of
> my program.
>
> Thanks for all your help!