Templated button control ✌️with no Background✌️ does not detect pointer events.

[mcNets]

I don't know how to title this question because it includes two "issues-ish".

First and foremost, IS'T NOT A Uno ISSUE because it happens on Windows too, but if anyone knows why it behaves this way I'd like to know it.

Scenario:

I am working on a Templated control, it's a Button which content is a SymbolIcon and a TextBlock below it.

This is the template:

  <Style x:Key="MyButtonStyle" TargetType="Button">
    <Setter Property="Background" Value="SlateBlue" />
    <Setter Property="BorderBrush" Value="Gray" />
    <Setter Property="BorderThickness" Value="1" />
    <Setter Property="Width" Value="100" />
    <Setter Property="Height" Value="100" />
  </Style>

  <Style TargetType="local:MyButton">
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="local:MyButton">
          <Button Background="{TemplateBinding Background}"
                  BorderBrush="{TemplateBinding BorderBrush}"
                  BorderThickness="{TemplateBinding BorderThickness}"
                  Style="{StaticResource MyButtonStyle}"
                  CornerRadius="5">
            <Button.Content>
              <StackPanel Orientation="Vertical"
                          VerticalAlignment="Center"
                          HorizontalAlignment="Center">
                <SymbolIcon Symbol="{TemplateBinding ButtonSymbol}"
                            Margin="0,0,0,10" />
                <TextBlock Text="{TemplateBinding ButtonText}" />
              </StackPanel>
            </Button.Content>
          </Button>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

MainPage:

  <StackPanel Orientation="Horizontal"
              HorizontalAlignment="Center"
              VerticalAlignment="Center">
    
    <local:MyButton ButtonSymbol="Accept"
                    ButtonText="Accept" />
    
    <local:MyButton ButtonSymbol="Accept"
                    ButtonText="Accept"
                    BorderBrush="Gray"
                    BorderThickness="1"
                    Background="Transparent"/>
    
  </StackPanel>

• First thing I notice is that properties included in MyButtonStyle with TemplateBinding are never applied. Therefore Background, BorderThickness and BorderWidth have no value, only Width and Height are included.

• Now the most curious thing, the Button without Background, not having been applied by the Style, does not respond to pointer events unless you click on some of the UIElements of its content. If you set a Background, even if it is Transparent, it behaves like any other button.

The questions should be:

1- Why style properties are not applied?

2- Why is it not responding to pointer events?

I added a minimum example if anyone want to try it.

Thanks.

TestControlStyle.zip

[MartinZikmund]

1. When you set properties to be TemplateBinding, they get their value from the templated parent - which in this case is MyButton control - which means they won't be coming from MyButtonStyle - the TemplateBinding basically takes precedence over the Style. This would work:

<Style TargetType="local:MyButton">
  <Setter Property="Background" Value="SlateBlue" />
  <Setter Property="BorderBrush" Value="Gray" />
  <Setter Property="BorderThickness" Value="1" />
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="local:MyButton">
        <Button Background="{TemplateBinding Background}"
              BorderBrush="{TemplateBinding BorderBrush}"
              BorderThickness="{TemplateBinding BorderThickness}"
              CornerRadius="5">
          <Button.Content>
            <StackPanel Orientation="Vertical"
                      VerticalAlignment="Center"
                      HorizontalAlignment="Center">
              <SymbolIcon Symbol="{TemplateBinding ButtonSymbol}"
                        Margin="0,0,0,10" />
              <TextBlock Text="{TemplateBinding ButtonText}" />
            </StackPanel>
          </Button.Content>
        </Button>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

The setters are now the source for the TemplateBinding and are properly applied. Similarly if you did:

<Style x:Key="MyButtonStyle" TargetType="Button">
  <Setter Property="Background" Value="SlateBlue" />
  <Setter Property="BorderBrush" Value="Gray" />
  <Setter Property="BorderThickness" Value="1" />
  <Setter Property="Width" Value="100" />
  <Setter Property="Height" Value="100" />
</Style>

<Style TargetType="local:MyButton">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="local:MyButton">
        <Button Style="{StaticResource MyButtonStyle}"
                CornerRadius="5">
          <Button.Content>
            <StackPanel Orientation="Vertical"
                        VerticalAlignment="Center"
                        HorizontalAlignment="Center">
              <SymbolIcon Symbol="{TemplateBinding ButtonSymbol}"
                          Margin="0,0,0,10" />
              <TextBlock Text="{TemplateBinding ButtonText}" />
            </StackPanel>
          </Button.Content>
        </Button>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

Now the source of those properties is the Style and they are applied correctly again.

2. If you have a plain Button, you can see the same hit testing behavior there:

<Button Content="Hello" Background="{x:Null}" />

Basically the difference between Transparent and null Background is that in case of Transparent the hit testing in WinUI/Uno Platform will hit that area, whereas in null case it goes through - bubbling up to the parent of the Button and further up (stopping probably at the root)

[mcNets]

Thanks @MartinZikmund.

Do you know why it becomes Null?

Because by default it should get button default background, is it due the style not being applied?

[MartinZikmund]

In your original repro, the first button gets null, because the MyButton style's inner Button has a TemplateBinding for Background - which means it tries to get the value from the templated parent, but the MyButton does not set it anywhere. It could be set as a setter here:

<Style TargetType="local:MyButton">
    <!-- Here 🔽 -->
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="local:MyButton">
             ...
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

Or it could be set directly when it is used:

<local:MyButton ButtonSymbol="Accept" ButtonText="Accept" Background="Transparent" />