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

Question

我希望能够单击我的按钮，并且在单击触发器时我希望背景填满一个圆圈，就像唯物主义按钮一样。我知道有一个图书馆，但我更愿意开发自己的图书馆，因为我想学习。

这是单击时的样子，而不是将鼠标移出时的样子。

我试过调整按钮的样式，尝试使用故事板制作一些动画，但我似乎无法弄清楚。

<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>

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

Answer 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>

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

How do I fill the button background with a circle on click

c#

wpf

xaml

storyboard