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>

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

相关推荐
NiceCloud喜云8 分钟前
Anthropic 一周三连发:Cowork 多端、Fable 5 按需付费、J-space 论文的技术解读
java·服务器·网络·人工智能·ai
月光刺眼16 分钟前
用LangChain 打造第一个 Agent:LLM 大脑与 Tool 手脚的完整闭环
javascript·人工智能·全栈
SamDeepThinking16 分钟前
组合还是继承?我在项目里主要看这两个判断
java·后端·面试
西西学代码22 分钟前
Flutter---底部导航栏(2)
开发语言·javascript·flutter
momo25 分钟前
JAVA基础知识
java·开发语言
qeen8738 分钟前
【Linux】指令补充与shell的简单介绍
linux·运维·服务器
就叫_这个吧1 小时前
Activiti7工作流入门+案例应用
java·activiti7·工作流
Z_W_H_1 小时前
minikube start --driver=docker --memory=4000mb出现PROVIDER_DOCKER_NEWGRP
java·docker·minikube
折哥的程序人生 · 物流技术专研1 小时前
第3篇:手写促销策略引擎(满减、打折、立减)
java·设计模式·策略模式·开闭原则·编程实战·扩充系列·促销引擎
一拳一个娘娘腔2 小时前
【后渗透-Linux篇】Linux 提权与逃逸:从 www-data到 root的蜕变
linux·运维·服务器