如何在XamarinForms中的資料系結指定的位置放置文本-有解無憂

我正在尋找的功能是可點擊的標簽，其中文本和位置都是資料系結的，并且位置相對于也正在顯示的影像。

我已經嘗試了AbsoluteLayout和RelativeLayout，但是標簽似乎無法擺脫CollectionView;的限制。即標簽根據標簽的大小不斷向下或跨頁面迭代。我不在乎標簽是否相互重疊。事實上，如果標簽的字體足夠大并且資料系結位置足夠接近，那么重疊標簽是確定無疑的，并且點擊事件在邏輯上可能發生在該像素位置頂部的任何標簽上。這對我來說很好。

例如，我有一個要顯示的大小為 640x480 像素的影像。我想放置在它們上面的標簽文本和位置需要是資料系結的。這是示例MockData。

        public MockDataStore()
        {
            items = new List<Item>()
            {
                new Item { Id = Guid.NewGuid().ToString(), Text = "A"  , Description="My A"  , X= 85, Y=130 },
                new Item { Id = Guid.NewGuid().ToString(), Text = "B"  , Description="My B"  , X=140, Y=150 },
                new Item { Id = Guid.NewGuid().ToString(), Text = "C"  , Description="My C"  , X=190, Y=165 },
                new Item { Id = Guid.NewGuid().ToString(), Text = "D"  , Description="My D"  , X=240, Y=175 },
                new Item { Id = Guid.NewGuid().ToString(), Text = "E"  , Description="My E"  , X=290, Y=180 },
                new Item { Id = Guid.NewGuid().ToString(), Text = "F"  , Description="My F"  , X=335, Y=185 }
            };
        }

這是我正在嘗試的 XAML。

    <Grid x:Name="grid" 
          x:DataType="local:ItemsViewModel">
        <!--<Image Source="bg.png" Aspect="AspectFit" HorizontalOptions="Start" VerticalOptions="Start" x:Name="bg"/>-->
        <RefreshView x:DataType="local:ItemsViewModel" 
                        Command="{Binding LoadItemsCommand}" 
                        IsRefreshing="{Binding IsBusy, Mode=TwoWay}">
        <CollectionView x:Name="ItemsListView"
                        ItemsSource="{Binding Items}"
                        SelectionMode="None">
            <CollectionView.ItemTemplate>
                    <DataTemplate>
                        <RelativeLayout Padding="10" x:DataType="model:Item">
                            <Label Text="{Binding Text}" 
                                    RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=X, Constant={Binding X}}"
                                    RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Y, Constant={Binding Y}}"
                                    BackgroundColor="Transparent" 
                                    FontSize="16" />
                            <RelativeLayout.GestureRecognizers>
                                <TapGestureRecognizer 
                                    NumberOfTapsRequired="1"
                                    Command="{Binding Source={RelativeSource AncestorType={x:Type local:ItemsViewModel}}, Path=ItemTapped}"     
                                    CommandParameter="{Binding .}">
                                </TapGestureRecognizer>
                            </RelativeLayout.GestureRecognizers>
                        </RelativeLayout>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>
        </RefreshView>
    </Grid>

發生的事情是標簽的相對位置被放置在頁面下方的遞增位置。CollectionView只要我還能得到，我就不會嫁給使用ItemTapped。

我也嘗試使用BindableLayout但沒有成功，盡管我不確定我是否理解如何正確使用該類，而且資料源都是文本和位置。

我想要完成的事情類似于 GPS 應用程式如何顯示地圖并疊加從資料加載并相對于地圖內的坐標的可點擊興趣點。

我想使用 Xamarin 的 XAML 完成什至可能嗎？

編輯：我發現RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0, Constant=0}" TranslationX="{Binding X}"會將標簽放置在正確的 X 位置。但是，這個想法不適用于 Y 位置。CollectionView在頁面上不斷增加 Y 位置。我希望CollectionView可以設定為不做任何控制元件定位，只允許我通過系結設定標簽的 x/y 位置。

uj5u.com熱心網友回復：

將標簽放置在正確的 X 位置。但是，這個想法不適用于 Y 位置。

問題是您在每個CollectionView 項中顯示標簽，但它們具有不同的 RelativeLayout 父項。它有足夠的寬度來設定 Y 值，但沒有設定 X 值。

對于這種情況，我們建議您使用 BindableLayout

例如

<ContentPage.BindingContext>
   <local:ItemsViewModel />
</ContentPage.BindingContext>

<RelativeLayout BindableLayout.ItemsSource="{Binding items}">
    <BindableLayout.ItemTemplate>
        <DataTemplate x:DataType="local:Item">
            <Label
                BackgroundColor="Transparent"
                FontSize="16"
                RelativeLayout.XConstraint="{Binding X}"
                RelativeLayout.YConstraint="{Binding Y}"
                Text="{Binding Text}" />
        </DataTemplate>
    </BindableLayout.ItemTemplate>
</RelativeLayout>

背后的代碼

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
    }

}
public class ItemsViewModel
{
    public ItemsViewModel()
    {
        MockDataStore();
    }
    public List<Item> items { get; set; }
    public void MockDataStore()
    {
        items = new List<Item>()
        {
            new Item { Id = Guid.NewGuid().ToString(), Text = "A"  , Description="My A"  ,X = Constraint.Constant(85),Y= Constraint.Constant(130)},
            new Item { Id = Guid.NewGuid().ToString(), Text = "B"  , Description="My B"  ,X = Constraint.Constant(140),Y= Constraint.Constant(150)},
            new Item { Id = Guid.NewGuid().ToString(), Text = "C"  , Description="My C"  ,X = Constraint.Constant(190),Y= Constraint.Constant(165)},
            new Item { Id = Guid.NewGuid().ToString(), Text = "D"  , Description="My D"  ,X = Constraint.Constant(240),Y= Constraint.Constant(175)},
            new Item { Id = Guid.NewGuid().ToString(), Text = "E"  , Description="My E"  ,X = Constraint.Constant(290),Y= Constraint.Constant(180)},
            new Item { Id = Guid.NewGuid().ToString(), Text = "F"  , Description="My F"  ,X = Constraint.Constant(335),Y= Constraint.Constant(185)}
        };
    }
}
public class Item
{
    public string Id { get; internal set; }
    public string Text { get; internal set; }
    public string Description { get; internal set; }
    public Constraint X { get; set; }
    public Constraint Y { get; set; }
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/313152.html

標籤：安卓 xml 沙马林超载

上一篇：Windows10UWP應用程式在啟動時崩潰（錯誤模塊名稱：Windows.UI.Xaml.dll）

下一篇：熱多載在VisualStudioforMac8.10.10（內部版本8）中不起作用。試圖創建一個新專案，但也不起作用