Question

感谢您的关注。我的目标是在WPF中创建一个类似于this page上的“立即开始”按钮的按钮模板，除了单击时没有金色边框。我寻求的效果是只要按住该按钮，就一直将“ 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>

动画按钮WPF

1 个答案: