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>

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

相关推荐
一只小青团5 小时前
Python之面向对象和类
java·开发语言
qq_529835355 小时前
ThreadLocal内存泄漏 强引用vs弱引用
java·开发语言·jvm
落笔画忧愁e6 小时前
扣子Coze飞书多维表插件添加数据记录
java·服务器·飞书
LuciferHuang6 小时前
震惊!三万star开源项目竟有致命Bug?
前端·javascript·debug
GISer_Jing6 小时前
前端实习总结——案例与大纲
前端·javascript
姑苏洛言7 小时前
编写产品需求文档:黄历日历小程序
前端·javascript·后端
知识分享小能手8 小时前
Vue3 学习教程,从入门到精通,使用 VSCode 开发 Vue3 的详细指南(3)
前端·javascript·vue.js·学习·前端框架·vue·vue3
秋千码途8 小时前
小架构step系列08:logback.xml的配置
xml·java·logback
飞翔的佩奇8 小时前
Java项目:基于SSM框架实现的旅游协会管理系统【ssm+B/S架构+源码+数据库+毕业论文】
java·数据库·mysql·毕业设计·ssm·旅游·jsp
姑苏洛言8 小时前
搭建一款结合传统黄历功能的日历小程序
前端·javascript·后端