Xamarin Forms 创建可滚动的时间线答案

【问题标题】：Xamarin Forms Create scrollable timelineXamarin Forms 创建可滚动的时间线
【发布时间】：2020-09-23 21:16:36
【问题描述】：

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

我做的第一件事就是将日程设置为背景图片，但它并不好用。我想到的下一件事是网格，但是网格不起作用，因为您需要设置行的高度并且可以有随机行。我的想法不多了！ :(

我知道这个网站是用来解决编码问题的，但我真的很感激，因为我在这个问题上被困了 2 周，我想进一步使用这个功能！

告诉我！ :)

【问题讨论】：

有第三方日历控件可以执行此操作 - 这是一个重要的 UI
Syncfusion 作为一个非常棒的类似议程的控件，还有一个 Telerik 一个，在 Xamarin.Forms 中搜索计划控件，你会发现很多选项
非常感谢！我会看看那些:)
不太确定您的“随机行”。但是如上图，你仍然可以使用GridView，假设每行（1小时）的高度为200。那么第一个事件的高度可以是100，VerticalOption=end。第二个高度 150。第三个高度 300，RowSpan=2 等
或者只是将半小时设置为一行，然后玩 RowSpan。

标签： xamarin xamarin.forms xamarin.android xamarin.ios

【解决方案1】：

如果想创建一个可滚动的时间线，我建议安装 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, 0),
    EndTime = new DateTime(2020, 9, 24, 09, 30, 0),
    Subject = "Client Meeting",
    Notes="1111",
    MinHeight = 30,
    Color = Color.FromHex("#FFD80073")
});
scheduleAppointmentCollection.Add(new ScheduleAppointment()
{
    StartTime = new DateTime(2020, 9, 24, 11, 0, 0),
    EndTime = new DateTime(2020, 9, 24, 12, 30, 0),
    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)自定义更多外观。

【讨论】：