adding a column to control

Question

I know that Maui has a new Drawing api, to help you create custom controls, but I do not know how to use it, to create a control like this

but with another column to the rigth that that has tmezones (the timezones comes from api)

So basicallyI need something like this

I am sorry for the drawing I am not very good at it

Answer 1

Hello,

I implemented only the date selection part using data binding. In this example, the date in the Label will change dynamically in the 4 CollectionViews following the user's selection.

In ViewModel:

public class TimeSelectionItem
{
    public string Year {  get; set; }
    public string Month {  get; set; }
 
    public string Day { get; set; }
    public string Timezone {  get; set; }
    public ObservableCollection<string> Years { get; set; }
    public ObservableCollection<string> Months { get; set; }
    public ObservableCollection<string> Days { get; set; }
    public ObservableCollection<string> TimeZones { get; set; }
}
public class TimeViewModel : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;
 
    private TimeSelectionItem _TimeSelectionItem;
    private string _LabelText;
    public string LabelText
    {
        get => _LabelText;
        set
        {
            if (_LabelText != value)
            {
                _LabelText = value;
                OnPropertyChanged(); // reports this property
            }
        }
    }
 
    public TimeSelectionItem TimeSelectionItem
    {
        get => _TimeSelectionItem;
        set
        {
            if (_TimeSelectionItem != value)
            {
                _TimeSelectionItem = value;
                OnPropertyChanged(); // reports this property
            }
        }
    }
    public ICommand SelectedCommand { get; private set; }
 
    private void Onselected()
    {
        var sb = new StringBuilder();
        sb.Append(TimeSelectionItem.Timezone);
        sb.Append(" ");
        sb.Append(TimeSelectionItem.Year);
        sb.Append("/");
        sb.Append(TimeSelectionItem.Month);
        sb.Append("/");
        sb.Append(TimeSelectionItem.Day);
        LabelText = sb.ToString();
    }
    public TimeViewModel()
    {
        TimeSelectionItem = new TimeSelectionItem();
        TimeSelectionItem.Years = new ObservableCollection<string> { "2001","2002","2003","2004" , "2005", "2006", "2007", "2008" };
        TimeSelectionItem.Months = new ObservableCollection<string> {"1","2","3","4",
            "5","6","7","8","9","10","11","12" };
        TimeSelectionItem.Days = new ObservableCollection<string>();
        for (int i = 1; i < 32; i++) {
            TimeSelectionItem.Days.Add(i.ToString());                
        }
        TimeSelectionItem.TimeZones = new ObservableCollection<string> { "test1", "test2", "test3" };
        SelectedCommand = new Command(Onselected);
    }
 
 
    public void OnPropertyChanged([CallerMemberName] string name = "") =>
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
}

In xaml:

<VerticalStackLayout >
<Label x:Name="DateTime_label" Text="{Binding LabelText}"/>
<HorizontalStackLayout HeightRequest="70">
<CollectionView ItemsSource="{Binding TimeSelectionItem.Years}" SelectionChangedCommand="{Binding SelectedCommand}" SelectionMode="Single" SelectedItem="{Binding TimeSelectionItem.Year}">
<CollectionView.ItemTemplate>
<DataTemplate>
<Label Text="{Binding .}"/>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
<CollectionView ItemsSource="{Binding TimeSelectionItem.Months}" SelectionChangedCommand="{Binding SelectedCommand}" SelectionMode="Single" SelectedItem="{Binding TimeSelectionItem.Month}">
<CollectionView.ItemTemplate>
<DataTemplate>
<Label Text="{Binding .}"/>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
<CollectionView ItemsSource="{Binding TimeSelectionItem.Days}" SelectionChangedCommand="{Binding SelectedCommand}" SelectionMode="Single" SelectedItem="{Binding TimeSelectionItem.Day}">
<CollectionView.ItemTemplate>
<DataTemplate>
<Label Text="{Binding .}"/>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
<CollectionView ItemsSource="{Binding TimeSelectionItem.TimeZones}" SelectionChangedCommand="{Binding SelectedCommand}" SelectionMode="Single" SelectedItem="{Binding TimeSelectionItem.Timezone}">
<CollectionView.ItemTemplate>
<DataTemplate>
<Label Text="{Binding .}"/>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</HorizontalStackLayout>
</VerticalStackLayout>

Best Regards,

Alec Liu.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.