WPF技术咨询：如何通过控件触发器设置关闭按钮线条描边

嗨，这个需求用WPF的样式系统就能完美解决，完全不用写后台逻辑，纯XAML就能搞定！我给你准备了完整的实现代码，还会拆解关键部分帮你理解：

核心思路 #

我们把组成“X”的两条线条直接整合到按钮的ControlTemplate里，这样就能通过按钮的IsMouseOver触发器，同时控制按钮背景和线条颜色的切换，逻辑更统一也更简洁。

完整实现代码 #

<Grid>
    <!-- 自定义关闭按钮 -->
    <Button Width="30" Height="30" Cursor="Hand">
        <Button.Style>
            <Style TargetType="Button">
                <!-- 默认状态：背景透明，线条为指定黄色 -->
                <Setter Property="Background" Value="Transparent"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Button">
                            <Grid x:Name="ButtonGrid" Background="{TemplateBinding Background}">
                                <!-- 组成X的两条线条 -->
                                <Line X1="5" Y1="5" X2="25" Y2="25" Stroke="#14FF1A" StrokeThickness="2"/>
                                <Line X1="25" Y1="5" X2="5" Y2="25" Stroke="#14FF1A" StrokeThickness="2"/>
                            </Grid>
                            <!-- 鼠标悬停触发器 -->
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsMouseOver" Value="True">
                                    <Setter TargetName="ButtonGrid" Property="Background" Value="#14FF1A"/>
                                    <Setter TargetName="ButtonGrid" Property="Children[0].Stroke" Value="Black"/>
                                    <Setter TargetName="ButtonGrid" Property="Children[1].Stroke" Value="Black"/>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Button.Style>
    </Button>
</Grid>

关键部分解释 #

1. ControlTemplate重构：把原来独立的线条放到按钮模板内部，让线条成为按钮的一部分，这样样式触发器能直接控制它们的属性。
2. 默认状态配置：通过Setter给按钮设置默认透明背景，线条默认使用你指定的黄色#14FF1A。
3. 悬停触发逻辑：当IsMouseOver为True时，我们同时修改三个属性：
   • 按钮背景（即内部Grid的背景）切换为黄色#14FF1A
   • 两条线条的颜色统一改成黑色
4. 细节优化：给按钮加上Cursor="Hand"，鼠标移上去时显示手型，提升交互体验。

如果要做最小化按钮，只需要复制这个样式，把两条线条改成一条水平横线就行，逻辑完全一致～

内容的提问来源于stack exchange，提问作者Fumbleless