Xamarin表单创建可滚动的时间轴

问题描述

我有问题。我需要在Xamarin Forms中创建以下图像：

我做的第一件事是将日程表设置为背景图像，但是它不容易使用。我接下来要说的是网格，但是网格不起作用，因为您需要设置行的高度，并且可以有随机的行。我的想法不多了！ ：（

我知道这个网站是针对编码问题的，但是我会非常感激，因为我在此问题上停留了2周，并且我想进一步使用此功能！

让我知道！ ：）

解决方法

如果要创建可滚动的时间轴，我建议安装 Syncfusion.Xamarin.SfSchedule nuget来实现。

这是Xaml在一天中可滚动的时间轴示例代码：

<?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:syncfusion="clr-namespace:Syncfusion.SfCalendar.XForms;assembly=Syncfusion.SfCalendar.XForms"
             xmlns:schedule="clr-namespace:Syncfusion.SfSchedule.XForms;assembly=Syncfusion.SfSchedule.XForms"
             x:Class="XamarinTableView.Views.SyncCalendaPage">
    <ContentPage.Content>
        <StackLayout>
            <Label Text="Welcome to Xamarin.Forms!"
                VerticalOptions="Start" 
                HorizontalOptions="CenterAndExpand" />
            <schedule:SfSchedule x:Name="schedule"
                                    BackgroundColor="LightGray"
                                    ScheduleView="DayView" 
                                    VerticalOptions="FillAndExpand"/>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

还有.cs示例代码：

schedule.ScheduleView = ScheduleView.DayView;
ScheduleAppointmentCollection scheduleAppointmentCollection = new ScheduleAppointmentCollection();
scheduleAppointmentCollection.Add(new ScheduleAppointment()
{
    StartTime = new DateTime(2020,9,24,09,0),EndTime = new DateTime(2020,30,Subject = "Client Meeting",Notes="1111",MinHeight = 30,Color = Color.FromHex("#FFD80073")
});
scheduleAppointmentCollection.Add(new ScheduleAppointment()
{
    StartTime = new DateTime(2020,11,12,Subject = "Anniversary",Notes = "1111",Color = Color.FromHex("#FFA2C139")
});
schedule.DataSource = scheduleAppointmentCollection;

DayViewSettings dayViewSettings = new DayViewSettings();
dayViewSettings.VerticalLineColor = Color.LightGray;
dayViewSettings.VerticalLineStrokeWidth = 5;
schedule.DayViewSettings = dayViewSettings;

效果：

也可以参考Appointments in Xamarin Scheduler (SfSchedule)来定制它的更多外观。