WPF 实现 移动带/旋转带 效果

先来看看效果:

接下来说明下实现步骤:

1.定义个背景

 <Grid  Background="#ffffff">
     <Border Background="#7f8b99" />

</Grid>

2.定义平行四边形

定义一个 宽40 高21的 四边形。然后定义四个点的起始位置 Points

Points的定义要跟你设计的宽高相关 

   <Polygon
       Width="40"
       Height="21"
       Margin="30,0,0,0"
       Fill="#fbffff"
       Points="40,0 15,0 0,21 25,21" />

3.把多个平行四边形添加到容器中 StackPanel 

我这边加了10个,容器是放在Grid里边

  <StackPanel
      x:Name="sp_slide"
      Grid.Row="2"
      Margin="-800,0,0,0"
      HorizontalAlignment="Center"
      VerticalAlignment="Center"
      Orientation="Horizontal">
      <Polygon
          Width="40"
          Height="21"
          Margin="0,0,0,0"
          Fill="#fbffff"
          Points="40,0 15,0 0,21 25,21" />
      <Polygon
          Width="40"
          Height="21"
          Margin="30,0,0,0"
          Fill="#fbffff"
          Points="40,0 15,0 0,21 25,21" />
      <Polygon
          Width="40"
          Height="21"
          Margin="30,0,0,0"
          Fill="#fbffff"
          Points="40,0 15,0 0,21 25,21" />
      <Polygon
          Width="40"
          Height="21"
          Margin="30,0,0,0"
          Fill="#fbffff"
          Points="40,0 15,0 0,21 25,21" />
      <Polygon
          Width="40"
          Height="21"
          Margin="30,0,0,0"
          Fill="#fbffff"
          Points="40,0 15,0 0,21 25,21" />
      <Polygon
          Width="40"
          Height="21"
          Margin="30,0,0,0"
          Fill="#fbffff"
          Points="40,0 15,0 0,21 25,21" />
      <Polygon
          Width="40"
          Height="21"
          Margin="30,0,0,0"
          Fill="#fbffff"
          Points="40,0 15,0 0,21 25,21" />
      <Polygon
          Width="40"
          Height="21"
          Margin="30,0,0,0"
          Fill="#fbffff"
          Points="40,0 15,0 0,21 25,21" />
      <Polygon
          Width="40"
          Height="21"
          Margin="30,0,0,0"
          Fill="#fbffff"
          Points="40,0 15,0 0,21 25,21" />
      <Polygon
          Width="40"
          Height="21"
          Margin="30,0,0,0"
          Fill="#fbffff"
          Points="40,0 15,0 0,21 25,21" />
      <Polygon
          Width="40"
          Height="21"
          Margin="30,0,0,0"
          Fill="#fbffff"
          Points="40,0 15,0 0,21 25,21" />
      <Polygon
          Width="40"
          Height="21"
          Margin="30,0,0,0"
          Fill="#fbffff"
          Points="40,0 15,0 0,21 25,21" />
      <Polygon
          Width="40"
          Height="21"
          Margin="30,0,0,0"
          Fill="#fbffff"
          Points="40,0 15,0 0,21 25,21" />
      <Polygon
          Width="40"
          Height="21"
          Margin="30,0,0,0"
          Fill="#fbffff"
          Points="40,0 15,0 0,21 25,21" />
      <Polygon
          Width="40"
          Height="21"
          Margin="30,0,0,0"
          Fill="#fbffff"
          Points="40,0 15,0 0,21 25,21" />
      <Polygon
          Width="40"
          Height="21"
          Margin="30,0,0,0"
          Fill="#fbffff"
          Points="40,0 15,0 0,21 25,21" />
      <Polygon
          Width="40"
          Height="21"
          Margin="30,0,0,0"
          Fill="#fbffff"
          Points="40,0 15,0 0,21 25,21" />
      <Polygon
          Width="40"
          Height="21"
          Margin="30,0,0,0"
          Fill="#fbffff"
          Points="40,0 15,0 0,21 25,21" />
      <Polygon
          Width="40"
          Height="21"
          Margin="30,0,0,0"
          Fill="#fbffff"
          Points="40,0 15,0 0,21 25,21" />
      <Polygon
          Width="40"
          Height="21"
          Margin="30,0,0,0"
          Fill="#fbffff"
          Points="40,0 15,0 0,21 25,21" />
      <Polygon
          Width="40"
          Height="21"
          Margin="30,0,0,0"
          Fill="#fbffff"
          Points="40,0 15,0 0,21 25,21" />
  </StackPanel>

4.再来添加触发器,Grid下边

触发器修改的是容器的Margin

<Grid.Triggers>
    <EventTrigger RoutedEvent="Grid.Loaded">
        <BeginStoryboard>
            <Storyboard RepeatBehavior="Forever">
                <ThicknessAnimation
                    AutoReverse="False"
                    BeginTime="0:0:0.00000"
                    Storyboard.TargetName="sp_slide"
                    Storyboard.TargetProperty="Margin"
                    To="-10,0,0,0"
                    Duration="0:0:8" />
            </Storyboard>
        </BeginStoryboard>
    </EventTrigger>
</Grid.Triggers>

以上就是实现旋转带的方式了

相关推荐

  1. css动画旋转效果实现

    2024-07-09 19:58:04       51 阅读
  2. C#WPF使用MaterialDesign 显示遮罩的对话框

    2024-07-09 19:58:04       48 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-09 19:58:04       50 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-09 19:58:04       54 阅读
  3. 在Django里面运行非项目文件

    2024-07-09 19:58:04       43 阅读
  4. Python语言-面向对象

    2024-07-09 19:58:04       54 阅读

热门阅读

  1. Linux驱动更新,以及ubuntu18.04升级22.04过程记录

    2024-07-09 19:58:04       35 阅读
  2. 代码随想录Day72(图论Part08)

    2024-07-09 19:58:04       30 阅读
  3. Oracle数据库中导出多个表

    2024-07-09 19:58:04       28 阅读
  4. PyTorch中matmul函数的矩阵相乘原则和注意事项

    2024-07-09 19:58:04       31 阅读
  5. 使用 Conda 管理 Python 环境的详细指南

    2024-07-09 19:58:04       23 阅读
  6. 从零开始!Jupyter Notebook的安装教程

    2024-07-09 19:58:04       23 阅读