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>

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

相关推荐
梵得儿SHI8 小时前
(第十篇)Spring AI 核心技术攻坚全梳理:企业级能力矩阵 + 四大技术栈攻坚 + 性能优化 Checklist + 实战项目预告
java·人工智能·spring·rag·企业级ai应用·springai技术体系·多模态和安全防护
一路向北⁢8 小时前
Spring Boot 3 整合 SSE (Server-Sent Events) 企业级最佳实践(三)
java·spring boot·后端·sse
云边有个稻草人8 小时前
打工人摸鱼新姿势!轻量斗地主服务器,内网穿透让同事远程联机不翻车
运维·服务器·cpolar
阿钱真强道8 小时前
12 JetLinks MQTT直连设备事件上报实战(继电器场景)
linux·服务器·网络·数据库·网络协议
NCDS程序员8 小时前
v-model: /v-model/ :(v-bind)三者核心区别
前端·javascript·vue.js
wbs_scy9 小时前
Linux 进阶指令实操指南:文件查看、时间管理、搜索压缩全场景覆盖(附高频案例)
linux·运维·服务器
摇滚侠9 小时前
macbook shell 客户端推荐 Electerm macbook 版本下载链接
java·开发语言
Lethehong9 小时前
实测可用|一文搞定OpenClaw部署,免费kimi-k2.5+飞书远程,新手也能秒上手
linux·运维·服务器·玩转openclaw·云端创意实践
程序员布吉岛9 小时前
Java 后端定时任务怎么选:@Scheduled、Quartz 还是 XXL-Job?(对比 + 避坑 + 选型)
java·开发语言
知无不研9 小时前
lambda表达式的原理和由来
java·开发语言·c++·lambda表达式