WPF中用户控件内的按钮无法正确触发

Question

我有一个图像按钮类用户控件，它在按钮内有两个文本块和一个图像，但是仅当我单击文本块或图像部分时，按钮才会触发单击。 只是为了进行快速调试，我已经将按钮的光标设置为Hand，奇怪的是，仅当鼠标位于texblocks / Image上方但不在按钮的任何部分上时，Hand光标才会显示。 这是我的代码

             Name="Tiles" Background="Green"
         d:DesignHeight="300" d:DesignWidth="300" Margin="10,10,10,10">
<UserControl.Resources>
    <BooleanToVisibilityConverter x:Key="booleanVisibleConverter" />
    <!-- This style is used for buttons, to remove the WPF default 'animated' mouse over effect -->
    <Style x:Key="ImgBtnStyle" TargetType="{x:Type Button}">
        <Setter Property="OverridesDefaultStyle" Value="True"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate x:Name="ImgBtnStyle" TargetType="{x:Type Button}">
                    <Border Name="border" 
                        BorderThickness="1"
                        Padding="0" 
                        BorderBrush="DarkGray" 
                        CornerRadius="1" 
                        Background="{TemplateBinding Background}">
                        <ContentPresenter  />
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="border" Property="BorderBrush" Value="White" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</UserControl.Resources>

<Button Cursor="Hand" Style="{StaticResource ImgBtnStyle}" Command="{Binding TestClick, ElementName=Tiles}" CommandParameter="{Binding ElementName=Tiles, Path=TestName}" >
    <Grid >
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*"/>
            <ColumnDefinition Width="2*"/>
            <ColumnDefinition Width="1*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="1*"/>
            <RowDefinition Height="2*"/>
            <RowDefinition Height="1*"/>
        </Grid.RowDefinitions>
        <TextBlock Text="{Binding ElementName=Tiles, Path=ResultValue}" Style="{StaticResource txtblck}" Grid.Column="1" Grid.Row="1"/>
        <TextBlock Text="{Binding ElementName=Tiles, Path=TestName}" Style="{StaticResource txtblck}" Grid.Column="0" Grid.Row="2" Grid.ColumnSpan="2" VerticalAlignment="Bottom" TextAlignment="Left" Padding="5,0,0,5"/>
        <Image Source="/resources/Icons/tickBlack.png" Grid.Column="2" HorizontalAlignment="Stretch"  VerticalAlignment="Stretch" 
               Visibility="{Binding Path= TestDone, ElementName=Tiles, Converter={StaticResource booleanVisibleConverter}}"/>
    </Grid>
</Button>

Answer 1

将“网格背景”设置为“透明”，如下所示：

<Button Cursor="Hand" Style="{StaticResource ImgBtnStyle}" Command="{Binding TestClick, ElementName=Tiles}" CommandParameter="{Binding ElementName=Tiles, Path=TestName}" >
        <Grid Background="Transparent">
            ...
 </Button>

我进行了上述更改，对我来说效果很好。