WPF MVVM模式下，实现动画Storyboard开始和停止

最新推荐文章于 2024-06-13 15:28:08 发布

户外猿

最新推荐文章于 2024-06-13 15:28:08 发布

阅读量799

点赞数 10

文章标签： wpf 笔记

本文链接：https://blog.csdn.net/liu19951025/article/details/136419291

版权

需求背景

工业上位机软件，需要用到动态管道，通过监控设备状态，实现动态管道的开始流动和结束流动。

页面如下

Xaml代码

 <Page.Resources>
     <Storyboard x:Key="Storyboard2">
         <DoubleAnimation
             AutoReverse="False"
             RepeatBehavior="Forever"
             Storyboard.TargetName="Piping"
             Storyboard.TargetProperty="(Shape.StrokeDashOffset)"
             From="20"
             To="0"
             Duration="0:0:1" />
     </Storyboard>
 </Page.Resources>

 <Border
     Margin="0,5"
     Background="White"
     Effect="{StaticResource MaterialDesignShadowDepth1}">
     <Grid HorizontalAlignment="Center" VerticalAlignment="Center">
         <StackPanel>
             <Grid>
                 <!--  背景层  -->
                 <Polyline
                     Opacity="0.5"
                     Points="615,145 615,190 105,190 105,370"
                     Stroke="Silver"
                     StrokeThickness="4" />

                 <!--  动画层  -->
                 <Polyline
                     x:Name="Piping"
                     Points="615,145 615,190 105,190 105,370"
                     Stroke="Orange"
                     StrokeDashArray="5 5"
                     StrokeThickness="2"
                     Visibility="{Binding IsRun, Converter={StaticResource BoolToVisibility_Visible}}">
                     <i:Interaction.Triggers>
                         <i:DataTrigger Binding="{Binding IsRun}" Value="true">
                             <i:ControlStoryboardAction ControlStoryboardOption="Play" Storyboard="{StaticResource Storyboard2}" />
                         </i:DataTrigger>
                         <i:DataTrigger Binding="{Binding IsRun}" Value="false">
                             <i:ControlStoryboardAction ControlStoryboardOption="Stop" Storyboard="{StaticResource Storyboard2}" />
                         </i:DataTrigger>
                     </i:Interaction.Triggers>
                 </Polyline>
             </Grid>

             <!--  增加一个按钮模拟后台变量为true或false  -->
             <Button
                 VerticalAlignment="Bottom"
                 Command="{Binding RunCommand}"
                 Content="开始/结束" />
         </StackPanel>
     </Grid>
 </Border>

注：里面的i使用的是Behaviors库。

ViewModel代码

        [ObservableProperty]
        bool isRun;

        [RelayCommand]
        void Run()
        {
            IsRun = !IsRun;
        }

        public void Test()
        {
            MyLog.Show("Test", "触发了");
        }

注：使用的是CommunityToolkit库