Xamarin中的跟踪器布局

如何解决Xamarin中的跟踪器布局

<Frame BackgroundColor="#13CF13" Padding="5" HorizontalOptions="Center" WidthRequest="80" HeightRequest="20" CornerRadius="40">
     <Label WidthRequest="40" Text="{Binding Date,StringFormat='{0:MM/dd/yyyy}'}" HorizontalTextAlignment="Center"></Label>
</Frame>

当前，这是我的实现，我希望输出与提供的图像类似。如何使用框架实现它？或任何方式。预先感谢！

解决方法

查看：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d" x:Name="MainPageXaml"
             x:Class="DummyTestApp.MainPage"
             BackgroundColor="White" Title="Tracker Layout">

    <ContentPage.Content>
        <ScrollView HorizontalOptions="Fill" VerticalOptions="Fill">
            <RelativeLayout HorizontalOptions="FillAndExpand">
                <StackLayout RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent,Property=Width,Factor=1}"
                             BindingContext="{x:Reference MainPageXaml}" HorizontalOptions="Fill" VerticalOptions="FillAndExpand" Margin="0" 
                             BindableLayout.ItemsSource="{Binding TrackerDateDataList}"
                             x:Name="myBoxView">
                    <BindableLayout.ItemTemplate>
                        <DataTemplate>
                            <RelativeLayout x:Name="MainRelLayout" HorizontalOptions="FillAndExpand" Padding="0" Margin="0">
                                <Frame HasShadow="True" BackgroundColor="LightGray" BorderColor="DarkGray" Padding="0"
                                   RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent,Factor=0,Constant=30}"
                                   CornerRadius="15" Margin="0,10" HeightRequest="30" 
                                   x:Name="headerFrame">
                                    <StackLayout HorizontalOptions="Center" Orientation="Horizontal" Padding="5" Margin="0" Spacing="0">
                                        <Frame BackgroundColor="Yellow" BorderColor="Yellow" WidthRequest="18" HeightRequest="18"
                                           CornerRadius="9" HorizontalOptions="Start" VerticalOptions="Center" Padding="0" Margin="10,0"/>
                                        <Label Text="{Binding TrackDate,StringFormat='{0:MMMM dd,yyyy}'}" FontAttributes="Bold" Margin="0,30,0"
                                           HorizontalTextAlignment="Center" VerticalTextAlignment="Center"/>
                                    </StackLayout>
                                </Frame>
                                <StackLayout RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent,Constant=26}"
                                         RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView,ElementName=headerFrame,Property=Height,Factor=1,Constant=20}"
                                         BindableLayout.ItemsSource="{Binding DescriptionList}">
                                    <BindableLayout.ItemTemplate>
                                        <DataTemplate>
                                            <StackLayout Orientation="Horizontal" Margin="0" Padding="0" Spacing="0">
                                                <Frame BackgroundColor="Yellow" BorderColor="Yellow" WidthRequest="36" HeightRequest="36"
                                                   CornerRadius="18" HorizontalOptions="Start" VerticalOptions="Center" Padding="0" Margin="10,0"/>
                                                <StackLayout Margin="0" Padding="0" Spacing="2">
                                                    <!-- Add more labels here -->
                                                    <Label Text="{Binding Location}" FontAttributes="Bold"/>
                                                    <Label Text="{Binding Status}"/>
                                                </StackLayout>
                                            </StackLayout>
                                        </DataTemplate>
                                    </BindableLayout.ItemTemplate>
                                </StackLayout>
                                        <!--
                                            Frame has constant value of 30,then stack has padding 5,then again frame within stack has margin 10 then radius of 18
                                            SO Box constant is 30 + (5/2) + 10 +(18/2),So around 52.5
                                        -->
                            </RelativeLayout>
                        </DataTemplate>
                    </BindableLayout.ItemTemplate>
                </StackLayout>
                <BoxView RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent,Constant=52.5}"
                         HeightRequest="{Binding Source={x:Reference myBoxView},Path=Height}" 
                         WidthRequest="2" Color="Yellow" Margin="0"/>
            </RelativeLayout>
        </ScrollView>
    </ContentPage.Content>
</ContentPage>

隐藏代码：

public partial class MainPage : ContentPage
    {
        public ObservableCollection<TrackerDateData> TrackerDateDataList { get; set; } = new ObservableCollection<TrackerDateData>();

        public MainPage()
        {
            InitializeComponent();
            InitilizeTrackerList();
        }

        private void InitilizeTrackerList()
        {
            TrackerDateData tracker1 = new TrackerDateData();
            TrackerDateData tracker2 = new TrackerDateData();
            TrackerDateData tracker3 = new TrackerDateData();
            TrackerDateData tracker4 = new TrackerDateData();

            Description desc1 = new Description();
            Description desc2 = new Description();
            Description desc3 = new Description();

            desc1.Location = "Near Location A";
            desc1.Status = "Dispatched";
            
            desc2.Location = "Near Location B";
            desc2.Status = "Arriving";
            
            desc3.Location = "Near Location C";
            desc3.Status = "Packed";

            tracker1.TrackDate = new DateTime(2020,1,3);
            tracker2.TrackDate = new DateTime(2020,2);
            tracker3.TrackDate = new DateTime(2020,1);
            tracker4.TrackDate = new DateTime(2019,12,31);

            tracker1.DescriptionList.Add(desc2);
            tracker1.DescriptionList.Add(desc1);
            tracker1.DescriptionList.Add(desc3);
            
            tracker2.DescriptionList.Add(desc1);
            tracker2.DescriptionList.Add(desc3);

            tracker3.DescriptionList.Add(desc3);

            tracker4.DescriptionList.Add(desc3);
            tracker4.DescriptionList.Add(desc2);
            tracker4.DescriptionList.Add(desc2);
            tracker4.DescriptionList.Add(desc1);

            TrackerDateDataList.Add(tracker1);
            TrackerDateDataList.Add(tracker2);
            TrackerDateDataList.Add(tracker3);
            TrackerDateDataList.Add(tracker4);
            TrackerDateDataList.Add(tracker1);
        }
    }

    public class TrackerDateData
    {
        public DateTime TrackDate { get; set; }
        public ObservableCollection<Description> DescriptionList { get; set; } = new ObservableCollection<Description>();
    }
    
    public class Description
    {
        public string Location { get; set; }
        public string Status { get; set; }
    }

Demo to code