如何在Xamarin.Forms中添加控件实现集合元素向另一集合传递

从你提供的图片效果来看，这个是分段式进度/步骤指示器，下面分几种情况说明实现和获取途径：

一、原生平台实现（无额外依赖） #

• Android：系统没有现成的对应组件，可自行用LinearLayout包裹多个View构建分段结构，通过代码控制每个分段的背景色来体现进度；也可以基于ProgressBar自定义样式，重写分段绘制逻辑。
• iOS：用UICollectionView搭建分段布局，通过数据源控制选中分段的数量，自定义单元格的激活/未激活样式；或者对UIProgressView进行子类化，重写绘制方法实现分段效果。
• Web前端：用HTML+CSS快速搭建基础结构，配合JS控制进度。示例代码如下：

<!-- HTML结构 -->
<div class="segment-bar">
  <div class="segment is-active"></div>
  <div class="segment is-active"></div>
  <div class="segment"></div>
  <div class="segment"></div>
</div>

/* 样式定义 */
.segment-bar {
  display: flex;
  gap: 6px;
  width: 200px;
}
.segment {
  flex: 1;
  height: 10px;
  border-radius: 5px;
  background: #ddd;
}
.segment.is-active {
  background: #409eff;
}

// 进度控制逻辑
function setProgress(progress) {
  const segments = document.querySelectorAll('.segment');
  const activeCount = Math.floor(segments.length * progress);
  segments.forEach((seg, index) => {
    seg.classList.toggle('is-active', index < activeCount);
  });
}
// 调用示例：设置50%进度
setProgress(0.5);

二、第三方组件库（快速落地） #

如果不想自行开发，可直接使用成熟的第三方库，不同平台的获取方式：

• Android：在项目build.gradle中添加对应库的依赖，比如搜索“Android segmented progress bar”找到合适的库（如com.github.skydoves:progressview:1.0.1），同步后在布局文件中引用组件并配置参数。
• iOS：通过CocoaPods搜索“Segmented Progress Bar”，找到如SegmentedProgressBar这类库，在Podfile中添加依赖并执行pod install，之后在代码中初始化配置段数和进度。
• Web前端：根据使用的框架选择对应组件，比如React用react-step-progress-bar、Vue用vue-step-progress，通过npm/yarn安装后直接调用组件。

三、自定义控件（高度定制） #

如果现有组件无法满足需求，可自行封装控件：
核心逻辑为：确定分段总数，根据当前进度计算需要激活的分段数量，给对应分段切换样式（颜色、透明度等）。不管是原生平台还是前端，都可基于这个逻辑实现，灵活性更高。

内容的提问来源于stack exchange，提问作者Pablo Alejandro Incinga