Question

Dear honorable people of stackoverflow, why is my textbox, which is my validated control, hidden behind the DockPanel Background in this template?

    <ControlTemplate x:Key="validationTemplate">
        <DockPanel Background="Black">
            <TextBlock Foreground="Red" FontSize="20">!</TextBlock>
            <AdornedElementPlaceholder/>
        </DockPanel>
    </ControlTemplate>

If the Background is set to “Transparent” the Textbox is visible but i´m not able to click inside (cursor won´t change).

How can i set a Background for my template without hiding my AdorendElementPlaceholder?

thanks gpx

Answer 1

The adorner layer does sit on top of the element, and can intercept mouse interactions. In your case, by applying a background to the DockPanel, you’re indicating to WPF that the object has area that is “HitTestVisible” and will intercept mouse clicks.

Another confusing note is that “Transparent” is still HitTestVisible. If you don’t want it to intercept mouse clicks, then you should set the background to “{x:Null}” or leave it blank.

Two options:

1. Set the Background=”{x:Null}”. This is basically no background and prevent mouse hit tests.
2. Specify IsHitTestVisible=”False” on the DockPanel. This will allow mouse interactions to bypass that layer and go to the next available layer.

EDIT:

Here’s an example that works for me in KaXaml. Just type something like “word” in the textboxes to generate a validation error. By setting the background color to a semi-transparent color, I’m able to see the textbox. Setting IsHitTestVisible=”False” allows me to click into the textbox with my mouse.

<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Page.Resources>
    <ControlTemplate x:Key="validationTemplate">
        <DockPanel Background="#5000" IsHitTestVisible="False">
            <TextBlock Foreground="Red" FontSize="20">!</TextBlock>
            <AdornedElementPlaceholder/>
        </DockPanel>
    </ControlTemplate>
    <Style TargetType="TextBox" x:Key="validationStyle">
      <Style.Triggers>
        <Trigger Property="Validation.HasError" Value="True">
          <Setter Property="Background" Value="Green" />
        </Trigger>
      </Style.Triggers>
    </Style>
  </Page.Resources>
  <StackPanel Name="grd" Width="100" Height="100">  
    <TextBox 
        VerticalAlignment="Top"
        Validation.ErrorTemplate="{StaticResource validationTemplate}"
        Text="{Binding ElementName=grd, Path=Width, Mode=TwoWay, ValidatesOnExceptions=True}" />
    <TextBox 
        VerticalAlignment="Top"
        Text="{Binding ElementName=grd, Path=Height, Mode=TwoWay, ValidatesOnExceptions=True}"
        Style="{StaticResource validationStyle}"
        >
    </TextBox>
  </StackPanel>
</Page>