MVVM 进度条事件触发器答案

【问题标题】：MVVM Progress Bar EventTriggerMVVM 进度条事件触发器
【发布时间】：2017-12-07 03:10:43
【问题描述】：

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

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

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

【问题讨论】：

标签： c# wpf mvvm wpf-animation

【解决方案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>

结果：

【讨论】：

【解决方案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>

【讨论】：