MVVM 进度条事件触发器

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

其中一种方法是使用 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>

Answer 2

步骤：

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

MVVM 进度条事件触发器

MVVM Progress Bar EventTrigger

c#

wpf

mvvm

wpf-animation

步骤：

结果：