使用资源覆盖按钮的默认样式时，不会触发单击事件

Question

我正在尝试在 WPF 中创建一个井字游戏，并使用 3X3 网格中的按钮来实现相同的目的。我想覆盖默认按钮样式，例如，将鼠标悬停在按钮上时，背景颜色不应更改。但是在创建静态资源之后，按钮单击事件不再被触发。这是我的代码：

按钮（该按钮不触发点击事件）：

<Button Name="Button1X1" Style="{StaticResource TicTacToeButtonStyle}" Grid.Row="0" Grid.Column="0" Content="" BorderThickness="0, 0, 2.5, 2.5" Click="Button_Click"/>

按钮（该按钮触发点击事件）：

<Button Name="Button1X2" Background="Transparent" Grid.Row="0" Grid.Column="1" Content=""  Click="Button_Click"/>

资源：

<Window.Resources>
    <Style x:Key="TicTacToeButtonStyle" TargetType="Button">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Background" Value="Transparent"></Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

另外，Button1X1 中设置的边框粗细属性也不会反映。

Answer 1

Button 控件的视觉元素由其模板创建。您将模板替换为不创建任何内容的模板，因此无需单击任何内容。

如果您希望按钮始终透明，则不需要触发器在鼠标悬停时将其设置为透明。下面的样式将创建一个可点击的按钮，默认情况下它没有可见的用户界面——但它仍然存在，所以你仍然可以点击它。

<Style x:Key="TicTacToeButtonStyle" TargetType="Button">
    <Setter Property="BorderBrush" Value="Black" />
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="BorderThickness" Value="0" />

    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border
                    BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}"
                    Background="{TemplateBinding Background}"
                    >
                    <ContentPresenter
                        VerticalAlignment="Center"
                        HorizontalAlignment="Center"
                        />
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

这是井字游戏板的一个简单示例。我使用 UniformGrid 而不是常规 Grid 来简化 XAML。您可能想要更改网格的高度和宽度。注意我只是改变了上面的样式，所以它有一个不透明的 BorderBrush。

我没有添加点击处理程序。您已经知道如何添加这些。

一个更复杂的方法是使用带有 ItemTemplate 的 ItemsControl，但这将让你现在就开始。

<UniformGrid
    Width="300"
    Height="300"
    Rows="3"
    Columns="3"
    >
    <!-- BorderThickness is comma-separated values for Left,Top,Right,Bottom -->
    <Button Style="{StaticResource TicTacToeButtonStyle}" Name="Button1X1" BorderThickness="0,0,1,1" />
    <Button Style="{StaticResource TicTacToeButtonStyle}" Name="Button1X2" BorderThickness="1,0,1,1" />
    <Button Style="{StaticResource TicTacToeButtonStyle}" Name="Button1X3" BorderThickness="1,0,0,1" />

    <Button Style="{StaticResource TicTacToeButtonStyle}" Name="Button2X1" BorderThickness="0,1,1,1" />
    <Button Style="{StaticResource TicTacToeButtonStyle}" Name="Button2X2" BorderThickness="1,1,1,1" />
    <Button Style="{StaticResource TicTacToeButtonStyle}" Name="Button2X3" BorderThickness="1,1,0,1" />

    <Button Style="{StaticResource TicTacToeButtonStyle}" Name="Button3X1" BorderThickness="0,1,1,0" />
    <Button Style="{StaticResource TicTacToeButtonStyle}" Name="Button3X2" BorderThickness="1,1,1,0" />
    <Button Style="{StaticResource TicTacToeButtonStyle}" Name="Button3X3" BorderThickness="1,1,0,0" />
</UniformGrid>