wpf - 使用 WPF 的动态按钮宽度

Question

我正在尝试创建一个控件，该控件在鼠标悬停按钮事件时执行多个动画。第一个功能是，按钮应该采用 padding=2 并占据整个列。我无法做到这一点；如果我试图在鼠标悬停时减小按钮的宽度，我可以这样做，但是当我试图增加宽度时，按钮正在扩展，但扩展的部分不可见。如何实现相同？

我在控制模板中使用以下代码。请提出更改建议：-

<!--Create a control template for button-->
<ControlTemplate x:Key="buttonAnimate" TargetType="Button">
    <Grid Name="myGrid">
        <Button Name="myButton" Background="{TemplateBinding Background }" Width="{TemplateBinding Width}">
        </Button>
    <Border Name="MyBorder" BorderBrush="Orange" BorderThickness="3" CornerRadius="2"></Border>
    </Grid>
    <ControlTemplate.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Background" Value="DarkRed" TargetName="MyBorder"/>
            <Setter Property="Width" Value="200" TargetName="myButton"/>
            <Setter Property="Cursor" Value="Hand" TargetName="myGrid"/>
            <Setter Property="Width" Value="300" TargetName="myButton"/>
            <Setter Property="Width" Value="300" TargetName="MyBorder"/>
            <Setter Property="Padding" Value="2" TargetName="myButton"/>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

提前致谢。

Answer 1

您的 Button 被 Grid 裁剪。尝试将 ClipsToBounds 属性设置为 false 或尝试以下操作：

public class MyButton : Button
{
    protected override Geometry GetLayoutClip(Size layoutSlotSize)
    {
        return ClipToBounds ? base.GetLayoutClip(layoutSlotSize) : null;
    }
}

希望能帮助到你。