动画按钮 WPF

Question

谢谢参观。我的目标是在 WPF 中创建一个类似于此页面上的“立即开始”按钮的按钮模板，除了单击时没有金色边框。我寻求的效果是一个“3D”外观按钮被推入页面，只要按住按下，最好也有颜色变化。为此，我想：在控件模板中指定一个矩形在它前面指定第二个矩形，相对于第一个矩形稍微向上移动。单击控件时，将前景矩形向下移动以覆盖背景矩形。为此，我不知道如何为元素的一部分设置动画。编辑：将问题集中在一个问题上编辑：示例按钮：<Style TargetType="Button"       x:Key='3D'>  <Setter Property="OverridesDefaultStyle"          Value="True" />  <Setter Property="Template">    <Setter.Value>      <ControlTemplate TargetType="Button">          <Grid>          <Border CornerRadius='5'                  BorderBrush="Black"                  BorderThickness="0,0,0,2">            <Rectangle Fill="Gray"/>          </Border>          <Border CornerRadius='5'                  BorderBrush="Black"                  BorderThickness="0,0,0,2"                  Margin='0,0,0,10'>            <Grid>                <Rectangle Fill="LightGray" />                <ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}"                                  Content="{TemplateBinding Content}"                                  HorizontalAlignment="Center"                                                                VerticalAlignment="Center" />            </Grid>          </Border>        </Grid>        </ControlTemplate>    </Setter.Value>  </Setter><Style.Triggers>    <MultiDataTrigger>      <MultiDataTrigger.Conditions>        <Condition Binding='{Binding RelativeSource={RelativeSource Self}, Path=IsPressed}'        <!-- Some other conditions -->      </MultiDataTrigger.Conditions>      <MultiDataTrigger.EnterActions>        <BeginStoryboard>          <Storyboard>              <!--Animation that moves the top rectangle down -->          </Storyboard>        </BeginStoryboard>      </MultiDataTrigger.EnterActions>    </MultiDataTrigger>  </Style.Triggers></Style>

Answer 1

一种解决方案是为边框的边距设置动画。此外，我必须将触发器从 Style.Triggers 移动到 ControlTemplate.Triggers 以访问作为目标的边框。

<Style TargetType="Button"

       x:Key='Circular'>

  <!--Set to true to not get any properties from the themes.-->

  <Setter Property="OverridesDefaultStyle"

          Value="True" />

  <Setter Property="Template">

    <Setter.Value>

      <ControlTemplate TargetType="Button">

        <Grid>

          <Border x:Name='_bottom'

                  CornerRadius='5'

                  BorderBrush="Black"

                  BorderThickness="0,0,0,2">

            <Rectangle Fill="Gray" />

          </Border>

          <Border x:Name='_top'

                  CornerRadius='5'

                  BorderBrush="Black"

                  BorderThickness="0,0,0,2"

                  Margin='0,0,0,10'>

            <Grid>

              <Rectangle Fill="LightGray" />

              <ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}"

                                Content="{TemplateBinding Content}"

                                HorizontalAlignment="Center"

                                VerticalAlignment="Center" />

            </Grid>

          </Border>

        </Grid>

        <ControlTemplate.Triggers>

          <MultiDataTrigger>

            <MultiDataTrigger.Conditions>

              <Condition Binding='{Binding RelativeSource={RelativeSource Self}, Path=IsPressed}'

                         Value='True' />

            </MultiDataTrigger.Conditions>

            <MultiDataTrigger.EnterActions>

              <BeginStoryboard>

                <Storyboard>

                  <ThicknessAnimation Storyboard.TargetProperty="Margin"

                                      Storyboard.TargetName="_top"

                                      Duration="0:0:0.1"

                                      From="0,0,0,10"

                                      To="0,10,0,0" />

                  <ThicknessAnimation Storyboard.TargetProperty="Margin"

                                      Storyboard.TargetName="_bottom"

                                      Duration="0:0:0.1"

                                      From="0,0,0,0"

                                      To="0,10,0,0" />

                </Storyboard>

              </BeginStoryboard>

            </MultiDataTrigger.EnterActions>

            <MultiDataTrigger.ExitActions>

              <BeginStoryboard>

                <Storyboard>

                  <ThicknessAnimation Storyboard.TargetProperty="Margin"

                                      Storyboard.TargetName="_top"

                                      Duration="0:0:0.1"

                                      From="0,10,0,0"

                                      To="0,0,0,10" />

                  <ThicknessAnimation Storyboard.TargetProperty="Margin"

                                      Storyboard.TargetName="_bottom"

                                      Duration="0:0:0.1"

                                      From="0,10,0,0"

                                      To="0,0,0,0" />

                </Storyboard>

              </BeginStoryboard>

            </MultiDataTrigger.ExitActions>

          </MultiDataTrigger>

        </ControlTemplate.Triggers>

      </ControlTemplate>

    </Setter.Value>

  </Setter>

</Style>