Xamarin Forms如何通过数据绑定在图片指定位置放置可点击标签

实现方案 #

你遇到的Y坐标累加问题是CollectionView本身的特性导致的：它作为列表类控件，会为每个条目分配独立的布局容器，按顺序排列，每个条目的内部布局只能在自身容器范围内生效，自然无法实现全容器范围的自由坐标定位。

你需要的功能完全可以实现，放弃CollectionView，改用BindableLayout+AbsoluteLayout的组合即可，这是最匹配该场景的实现方式。BindableLayout可以为普通布局容器附加集合绑定能力，不会额外插入列表布局逻辑，所有Label会直接放在同一个AbsoluteLayout的布局空间内，支持重叠、自定义坐标，点击事件也会默认触发最上层的控件，完全符合你的需求。

示例XAML代码

<Grid x:Name="grid" x:DataType="local:ItemsViewModel">
    <!-- 背景图 -->
    <Image Source="bg.png" Aspect="AspectFit" x:Name="bg" 
           HorizontalOptions="Fill" VerticalOptions="Fill"/>
    <!-- 承载Label的绝对布局，通过BindableLayout绑定数据源 -->
    <AbsoluteLayout x:Name="labelContainer">
        <BindableLayout.ItemsSource>
            <Binding Path="Items"/>
        </BindableLayout.ItemsSource>
        <BindableLayout.ItemTemplate>
            <DataTemplate x:DataType="model:Item">
                <Label Text="{Binding Text}" 
                       BackgroundColor="Transparent" 
                       FontSize="16"
                       AbsoluteLayout.LayoutBounds="{Binding PositionRect}"
                       AbsoluteLayout.LayoutFlags="None">
                    <Label.GestureRecognizers>
                        <TapGestureRecognizer 
                            NumberOfTapsRequired="1"
                            Command="{Binding Source={RelativeSource AncestorType={x:Type local:ItemsViewModel}}, Path=ItemTapped}"     
                            CommandParameter="{Binding .}"/>
                    </Label.GestureRecognizers>
                </Label>
            </DataTemplate>
        </BindableLayout.ItemTemplate>
    </AbsoluteLayout>
</Grid>

配套代码调整

你可以在Item类中新增PositionRect属性，直接返回坐标和尺寸的Rect结构体：

public Rect PositionRect => new Rect(X, Y, 60, 30); // 后面两个参数是Label的宽高，可根据需求调整

如果需要适配不同屏幕的背景图缩放，你可以根据背景图的实际显示尺寸和原始尺寸计算缩放比例，把绑定的X、Y值乘以缩放比例即可实现坐标对齐。

如果需要保留下拉刷新功能，直接把整个Grid包裹在RefreshView中即可。

内容的提问来源于stack exchange，提问作者mjmeans