动画按钮 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"&nbsp; &nbsp; &nbsp; &nbsp;x:Key='Circular'>&nbsp; <!--Set to true to not get any properties from the themes.-->&nbsp; <Setter Property="OverridesDefaultStyle"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Value="True" />&nbsp; <Setter Property="Template">&nbsp; &nbsp; <Setter.Value>&nbsp; &nbsp; &nbsp; <ControlTemplate TargetType="Button">&nbsp; &nbsp; &nbsp; &nbsp; <Grid>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Border x:Name='_bottom'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; CornerRadius='5'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; BorderBrush="Black"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; BorderThickness="0,0,0,2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Rectangle Fill="Gray" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Border>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Border x:Name='_top'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; CornerRadius='5'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; BorderBrush="Black"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; BorderThickness="0,0,0,2"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Margin='0,0,0,10'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Grid>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Rectangle Fill="LightGray" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Content="{TemplateBinding Content}"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; HorizontalAlignment="Center"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; VerticalAlignment="Center" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Grid>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Border>&nbsp; &nbsp; &nbsp; &nbsp; </Grid>&nbsp; &nbsp; &nbsp; &nbsp; <ControlTemplate.Triggers>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <MultiDataTrigger>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <MultiDataTrigger.Conditions>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Condition Binding='{Binding RelativeSource={RelativeSource Self}, Path=IsPressed}'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Value='True' />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </MultiDataTrigger.Conditions>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <MultiDataTrigger.EnterActions>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <BeginStoryboard>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Storyboard>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ThicknessAnimation Storyboard.TargetProperty="Margin"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Storyboard.TargetName="_top"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Duration="0:0:0.1"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; From="0,0,0,10"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; To="0,10,0,0" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ThicknessAnimation Storyboard.TargetProperty="Margin"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Storyboard.TargetName="_bottom"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Duration="0:0:0.1"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; From="0,0,0,0"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; To="0,10,0,0" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Storyboard>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </BeginStoryboard>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </MultiDataTrigger.EnterActions>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <MultiDataTrigger.ExitActions>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <BeginStoryboard>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Storyboard>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ThicknessAnimation Storyboard.TargetProperty="Margin"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Storyboard.TargetName="_top"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Duration="0:0:0.1"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; From="0,10,0,0"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; To="0,0,0,10" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ThicknessAnimation Storyboard.TargetProperty="Margin"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Storyboard.TargetName="_bottom"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Duration="0:0:0.1"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; From="0,10,0,0"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; To="0,0,0,0" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Storyboard>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </BeginStoryboard>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </MultiDataTrigger.ExitActions>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </MultiDataTrigger>&nbsp; &nbsp; &nbsp; &nbsp; </ControlTemplate.Triggers>&nbsp; &nbsp; &nbsp; </ControlTemplate>&nbsp; &nbsp; </Setter.Value>&nbsp; </Setter></Style>