【问题标题】:Highlighting days in a XamForms Calendar在 XamForms 日历中突出显示日期
【发布时间】:2021-05-31 09:44:21
【问题描述】:

我制作了一个 Xamarin 应用程序,它允许我在 DatePicker 中选择一个日期并使用 SQLite 将其保存到数据库中。然后我得到这些日期并在ListView 中显示它们,我想知道是否可以将数据库中的日期突出显示到日历上?

这是用来保存数据的

    void SaveButton_OnClicked(object sender, EventArgs e)
    {

        Birthdays brithday = new Birthdays()
        {
            FirstName = fNameEntry.Text,
            LastName = lNameEntry.Text,
            Date = datePicker.Date
        };

        using (SQLiteConnection conn = new SQLiteConnection(App.FilePath))
        {
            conn.CreateTable<Birthdays>();
            int rowsAdded = conn.Insert(brithday);               
        }
        DisplayAlert("Alert", "Birthday has been saved to database", "OK");
    }

然后将其加载到 ListView 中

    private async void NavigateButton_OnClicked(object sender, EventArgs e)
    {
        await Navigation.PushAsync(new Page1());
    }

    protected override void OnAppearing()
    {

        base.OnAppearing();
        using(SQLiteConnection conn = new SQLiteConnection(App.FilePath))
        {
            conn.CreateTable<Birthdays>();
            var birthday = conn.Table<Birthdays>().ToList();
            birthdayListView.ItemsSource = birthday; 
        }
    }

这是我用来加载日历和主页上的ListView 的 XML 即时通讯。

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" BackgroundColor="{AppThemeBinding Dark=Black, Light=White}" xmlns:controls="clr-namespace:XamForms.Controls;assembly=XamForms.Controls.Calendar" xmlns:d="http://xamarin.com/schemas/2014/forms/design" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" mc:Ignorable="d" x:Class="Mobile_App.MainPage">
    <ContentPage.ToolbarItems>
        <ToolbarItem
            Text="Settings"
            Clicked="ToolbarItem_Clicked"
            ></ToolbarItem>
    </ContentPage.ToolbarItems>
    <StackLayout>
        <!-- Place new controls here -->
        <controls:Calendar DatesBackgroundColor="{AppThemeBinding Dark=Black, Light=White}"  DatesTextColor="{AppThemeBinding Dark=White, Light=Black}" BackgroundColor="{AppThemeBinding Dark=Black, Light=White}" Padding="10,0,10,0" SelectedBorderWidth="4" DisabledBorderColor="Black" ShowNumberOfWeek="false" StartDay="Sunday" TitleLabelTextColor="Purple" TitleLeftArrowTextColor="MediumVioletRed" TitleRightArrowTextColor="MediumVioletRed" SpecialDates="{Binding Date}"  DateCommand="{Binding DateChosen}" />
        <Label Text="Welcome to the Birthday App!" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" />
        <Button Text="Add a birthday" AnchorX="1" AnchorY="1" Clicked="NavigateButton_OnClicked"  />
        <Switch  AnchorX="1" AnchorY="1" IsToggled="False" Toggled="Switch_Toggled"  />
        <ListView HeightRequest="250" WidthRequest="50" BackgroundColor="{AppThemeBinding Dark=Black, Light=#444343}" x:Name="birthdayListView">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <TextCell                                 
                              Text="{Binding FullName}"
                              Detail="{Binding Date}"
                              DetailColor="YellowGreen">
                    </TextCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>
</ContentPage>

【问题讨论】:

  • Xamarin Forms 中没有标准的日历控件。您需要告诉我们(并请提供链接)您正在使用哪个日历控件。
  • 我正在使用 XamForms.Controls.Calendar。
  • 如果您查看示例项目,有一个 SpecialDates 属性,您可以将其绑定到日期列表以在日历上突出显示
  • 我明白,我只是不知道如何处理我的数据库。还有如何改变日历本身的颜色。
  • 从您的数据库中获取列表,使用 SpecialDate 类创建一个列表,并将其绑定到日历。我现在无法给你一个更完整的例子

标签: c# xaml xamarin


【解决方案1】:

作为Jason的回复,你可以从Sqlite数据库中获取列表数据,然后创建ObservableCollection&lt;XamForms.Controls.SpecialDate&gt; attendances添加当前Date数据。

ObservableCollection Class 表示一个动态数据集合,它在添加、删除项目或刷新整个列表时提供通知。

我做了一个简单的,你可以看看:

 <StackLayout>
        <controls:Calendar
            Padding="10,0,10,0"
            BackgroundColor="{AppThemeBinding Dark=Black,
                                              Light=White}"
            DateCommand="{Binding DateChosen}"
            DatesBackgroundColor="{AppThemeBinding Dark=Black,
                                                   Light=White}"
            DatesTextColor="{AppThemeBinding Dark=White,
                                             Light=Black}"
            DisabledBorderColor="Black"
            SelectedBorderWidth="4"
            SelectedDate="{Binding Date}"
            ShowNumberOfWeek="false"
            SpecialDates="{Binding attendances}"
            StartDay="Sunday"
            TitleLabelTextColor="Purple"
            TitleLeftArrowTextColor="MediumVioletRed"
            TitleRightArrowTextColor="MediumVioletRed" />

        <ListView
            x:Name="birthdayListView"
            BackgroundColor="{AppThemeBinding Dark=Black,
                                              Light=#444343}"
            HeightRequest="250"
            ItemsSource="{Binding birthdays}"
            WidthRequest="50">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <TextCell
                        Detail="{Binding Date}"
                        DetailColor="YellowGreen"
                        Text="{Binding FullName}" />
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>

public partial class Page38 : ContentPage, INotifyPropertyChanged
{
    private List<Birthday> _birthdays;
    public List<Birthday> birthdays 
    {
        get { return _birthdays; }
        set
        {
            _birthdays = value;
            RaisePropertyChanged("birthdays");
        }
    }
    private DateTime? _date;
    public DateTime? Date
    {
        get
        {
            return _date;
        }
        set
        {
            _date = value;
            RaisePropertyChanged(nameof(Date));
        }
    }
    public ObservableCollection<XamForms.Controls.SpecialDate> attendances { get; set; }
    public ICommand DateChosen
    {
        get
        {
            return new Command((obj) => {
                System.Diagnostics.Debug.WriteLine(obj as DateTime?);
            });
        }
    }

    public Page38()
    {
        InitializeComponent();      
        attendances = new ObservableCollection<SpecialDate>();
        Date = DateTime.Now;
        this.BindingContext = this;
    
    }
    protected override void OnAppearing()
    {
        base.OnAppearing();
        //get data from sqlite database.
         birthdays = new List<Birthday>()
        {
            new Birthday(){FirstName="cherry", Date=new DateTime(2021,5,25), },
            new Birthday(){FirstName="cherry", Date=new DateTime(2021,5,26), },
            new Birthday(){FirstName="cherry", Date=new DateTime(2021,5,27), },
            new Birthday(){FirstName="cherry", Date=new DateTime(2021,5,28), },
            new Birthday(){FirstName="cherry", Date=new DateTime(2021,5,30), },
            new Birthday(){FirstName="cherry", Date=new DateTime(2021,5,31), },

        };
        //foreach birthdays data, add Date property to  attendances
        foreach (Birthday b in birthdays)
        {
            attendances.Add(new XamForms.Controls.SpecialDate(b.Date) { BackgroundColor = Color.Green, TextColor = Color.White, BorderColor = Color.Yellow, BorderWidth = 8, Selectable = true });
        }

    }
    
    public event PropertyChangedEventHandler PropertyChanged;
    public void RaisePropertyChanged(string propertyName)
    {
        PropertyChangedEventHandler handler = PropertyChanged;
        if (handler != null)
        {
            handler(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

你需要实现INotifyPropertyChanged来通知数据发生变化。

截图:

【讨论】:

  • 感谢 Cherry,这对我有很大帮助。 :)
  • 请看一下这个并告诉我我会把这些放在哪里。我对事情需要去哪里有点困惑。谢谢 :D github.com/bigmanwebbjess123/Jesse-Webb
  • @JesseWebb 我无法运行你的项目,你可以根据你的情况修改我的代码在 ContentPage 中包含controls:Calendar
猜你喜欢
  • 1970-01-01
  • 2021-05-03
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-09-15
  • 2018-05-22
  • 2020-01-29
相关资源
最近更新 更多