MVVM进度条EventTrigger

Question

这是我在加载页面时为进​​度条设置动画的示例代码。

我的问题是，如何在按钮点击时启动进度条？

<ProgressBar Height="50" Minimum="0" Maximum="100" Value="0" 
            RenderTransformOrigin="0.5,0.5" 
            Margin="-113,0" Background="Transparent" 
            BorderThickness="0" Foreground="DarkCyan">
     <ProgressBar.RenderTransform>
          <TransformGroup>
              <ScaleTransform/>
              <SkewTransform/>
              <RotateTransform Angle="-90"/>
              <TranslateTransform/>
          </TransformGroup>
     </ProgressBar.RenderTransform>
     <ProgressBar.Triggers>
          <EventTrigger RoutedEvent="FrameworkElement.Loaded">
               <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetProperty="Value" 
                                        From="0" To="{Binding Bar1}" 
                                        Duration="{Binding Duration1}"/>
                     </Storyboard>
                </BeginStoryboard>
          </EventTrigger>
     </ProgressBar.Triggers>
</ProgressBar>

Answer 1

步骤：

为<ProgressBar />命名，然后移除Triggers。

<ProgressBar x:Name="MyProgressBar" Height="50" Minimum="0" Maximum="100" Value="0" 
            RenderTransformOrigin="0.5,0.5" 
            Margin="-113,0" Background="Transparent" 
            BorderThickness="0" Foreground="DarkCyan">
     <ProgressBar.RenderTransform>
          <TransformGroup>
              <ScaleTransform/>
              <SkewTransform/>
              <RotateTransform Angle="-90"/>
              <TranslateTransform/>
          </TransformGroup>
     </ProgressBar.RenderTransform>
</ProgressBar>

添加<Button />，Triggers，TargetName等于<ProgressBar />名称。

    <Button Content="Press to trigger">
        <Button.Triggers>
            <EventTrigger RoutedEvent="Button.Click">
                <EventTrigger.Actions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetProperty="Value" Storyboard.TargetName="MyProgressBar"
                            From="0" To="100" 
                            Duration="0:0:1"/>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger.Actions>
            </EventTrigger>
        </Button.Triggers>
    </Button>

结果：

Answer 2

执行此操作的方法之一是DataTrigger：

<Button x:Name="BtnToClick" Height="30" Width="100" Content="Click" />

<ProgressBar Height="50" Minimum="0" Maximum="100" Value="0" 
        RenderTransformOrigin="0.5,0.5" 
        Margin="0,0" Background="Transparent" 
        BorderThickness="0" Foreground="DarkCyan">
<ProgressBar.RenderTransform>
  <TransformGroup>
    <ScaleTransform/>
    <SkewTransform/>
    <RotateTransform Angle="-90"/>
    <TranslateTransform/>
   </TransformGroup>
  </ProgressBar.RenderTransform>
  <ProgressBar.Style>
    <Style TargetType="ProgressBar">
       <Style.Triggers>
          <DataTrigger Binding="{Binding IsPressed ,ElementName=BtnToClick}" Value="True">
           <DataTrigger.EnterActions>
              <BeginStoryboard>
                 <Storyboard>
                   <DoubleAnimation Storyboard.TargetProperty="Value" 
                                    From="0" To="100" 
                                    Duration="0:0:0:1"/>
                  </Storyboard>
                </BeginStoryboard>
            </DataTrigger.EnterActions>
           </DataTrigger>
       </Style.Triggers>
      </Style>
    </ProgressBar.Style>
 </ProgressBar>