如何在单击时用圆圈填充按钮背景答案

【问题标题】：How do I fill the button background with a circle on click如何在单击时用圆圈填充按钮背景
【发布时间】：2019-12-28 11:14:06
【问题描述】：

我希望能够单击我的按钮，并且在单击触发器上我希望背景填充一个圆圈，就像一个唯物主义按钮一样。我知道有一个库可以解决这个问题，但我更愿意开发自己的库，因为我想学习。

这是您单击时的外观，而不是您将鼠标移出时的外观。

我尝试过使用按钮的样式，尝试使用情节提要制作一些动画，但我似乎无法弄清楚。

<Style TargetType="{x:Type Button}">
        <Setter Property="Background" Value="Blue"/>
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Background" Value="Transparent"/>
            </Trigger>
            <EventTrigger RoutedEvent="Click">
                <EventTrigger.Actions>
                    <BeginStoryboard>
                        <Storyboard BeginTime="00:00:00" 
                                    RepeatBehavior="Forever" 
                                    AutoReverse="True"
                                    Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)">
                            <ColorAnimation From="Black" To="Red" Duration="0:0:0.1"/>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger.Actions>
            </EventTrigger>
        </Style.Triggers>
    </Style>

当我单击按钮时，我希望背景从圆形开始填充（按钮不应该是圆形），填充按钮的其余部分，我现在看到的只是一种褪色的颜色整个事情都不是我所期待的。

【问题讨论】：

删除/评论“IsMouseOver”触发器。它将运行动画。
看起来不像点击动画。相当花哨的鼠标输入/输出之一。要达到这样的效果，您必须修改按钮控制模板并添加 Ellipse 并显示动画（Width/Height？不确定）。当鼠标离开时，按钮应该使这个椭圆可见。
这是点击/点击关闭功能吗？如果是这样，您最好使用 ToggleButton（带有适当的模板）而不是 Button。

标签： c# wpf xaml storyboard

【解决方案1】：

这里是这种效果的一个例子。

为了简单起见，我只使用了Rectangle，而不是Button。但是您肯定可以将此技术应用于任何控件。

这里使用了MouseEnter 和MouseLeave 事件，但您可以将它们替换为点击事件或任何您需要的事件。

  <Rectangle Width="150" Height="150" Stroke="Black" StrokeThickness="1">
    <Rectangle.Style>
      <Style TargetType="Rectangle">
        <Style.Triggers>
          <EventTrigger RoutedEvent="MouseEnter">
            <BeginStoryboard>
              <Storyboard Duration="0:0:1">
                <!-- we just scale the brush in this animation -->
                <DoubleAnimation From="0" To="2" Storyboard.TargetProperty="(Rectangle.Fill).(DrawingBrush.Transform).(ScaleTransform.ScaleX)"/>
                <DoubleAnimation From="0" To="2" Storyboard.TargetProperty="(Rectangle.Fill).(DrawingBrush.Transform).(ScaleTransform.ScaleY)"/>
              </Storyboard>
            </BeginStoryboard>
          </EventTrigger>
          <EventTrigger RoutedEvent="MouseLeave">
            <BeginStoryboard>
              <Storyboard Duration="0:0:1">
                <DoubleAnimation From="2" To="0" Storyboard.TargetProperty="(Rectangle.Fill).(DrawingBrush.Transform).(ScaleTransform.ScaleX)"/>
                <DoubleAnimation From="2" To="0" Storyboard.TargetProperty="(Rectangle.Fill).(DrawingBrush.Transform).(ScaleTransform.ScaleY)"/>
              </Storyboard>
            </BeginStoryboard>
          </EventTrigger>
        </Style.Triggers>
      </Style>
    </Rectangle.Style>
    <Rectangle.Fill>
      <!-- the rectangle's fill is a brush which can be scaled -->
      <DrawingBrush>
        <DrawingBrush.Transform>
          <!-- the initial scale values are 0, so we don't see the fill -->
          <ScaleTransform ScaleX="0" ScaleY="0" CenterX="75" CenterY="75"/>
        </DrawingBrush.Transform>
        <DrawingBrush.Drawing>
          <GeometryDrawing Brush="MediumBlue">
            <GeometryDrawing.Geometry>
              <EllipseGeometry RadiusX="150" RadiusY="150" Center="75,75" />
            </GeometryDrawing.Geometry>
          </GeometryDrawing>
        </DrawingBrush.Drawing>
      </DrawingBrush>
    </Rectangle.Fill>
  </Rectangle>

【讨论】：