How to control placement ordering when using arrangeoverride to extend WPF controls

Question

I am extending the WPF textbox in order to place a custom image on it. I want to capture mouse clicks on this image. So far i have been able to use arrangeOverride to place the image in where i need it but since it happens to be placed "inside" the text box, whenever i try clicking it the text box captures the click and the event that is attached to the image does not fire. Is it possible to indicate that the image should be placed on top of the text box when using arrange override? I know i can get around this issue if i extended a Control and placed a text box inside it, but for my application i need to actually extend a text box in order to be able to use it in another more complex control that is currently using a text box.

Thanks!

Answer 1

As you are not using the standard composition model it means you need to override the mouse handling before it reaches the text box code and add your own custom logic to decide on the events to generate.

Answer 2

ArrangeOverride may not be the ideal solution for this. A better approach would probably be to use control templating: create a ControlTemplate containing a Grid with a single cell, and place the Image and the text box content host in that single cell. You can place the Image on top implicitly by the order you place the controls, or explicitly by setting the Panel.ZIndex attached property.

The one trick here is knowing how to represent the text box content host. This has to be a ScrollViewer with the name PART_ContentHost. So your template will look something like:

<ControlTemplate TargetType="{x:Type Ambog36sTextBox}">
  <Grid>
    <ScrollViewer x:Name="PART_ContentHost" />  <!-- WPF will fill in a text edit area here -->
    <Image Panel.ZIndex="1" Source="..." />
  </Grid>
</ControlTemplate>

Then assign this template to your custom text box class via the default style in the usual way.