dotnetdevcsharp
dotnetdevcsharp

Reputation: 3980

Custom control c# for mark-up aligning controls to others

How Would I center my labels and my text boxes I want them like the uwp date time picker.

public class DateTimePicker2: ContentView, INotifyPropertyChanged 
{
    public Entry _entry { get; private set; } = new Entry() 
    {
      WidthRequest = 300
    };
    
    public Entry _dayEntry { get; private set; } = new Entry() 
    {
      Placeholder = "00", WidthRequest = 30
    };
    
    public Entry _monthEntry { get; private set; } = new Entry() 
    {
      Placeholder = "00", WidthRequest = 30
    };
    
    public Entry _yearEntry { get; private set; } = new Entry() 
    {
      Placeholder = "00", WidthRequest = 30
    };
    
    public Entry _hourEntry { get; private set; } = new Entry() 
    {
      Placeholder = "00", WidthRequest = 30
    };
    
    public Entry _minsEntry {get;private set; } = new Entry() 
    {
      Placeholder = "00", WidthRequest = 30
    };
    
    private static DateTime ? _defaultDateTime = DateTime.Now;
    
    public DatePicker _datePicker { get; private set; } = new DatePicker() 
    {
      MinimumDate = DateTime.Today, IsVisible = false
    };
    
    public TimePicker _timePicker { get; private set; } = new TimePicker()
    {
      IsVisible = false
    };
    
    public Label _dayLabel { get; private set; } = new Label() 
    {
      Text = "DAY"
    };
    
    public Label _monthLabel { get; private set; } = new Label() 
    {
      Text = "MONTH"
    };
    
    public Label _yearLabel { get; private set; } = new Label() 
    {
      Text = "Year"
    };
    
    public Label _hourLabel { get; private set; } = new Label() 
    {
      Text = "Hour"
    };
    
    public Label  _minLabel { get; private set; } = new Label() 
    {
      Text = "Min"
    };
    
    public Picker _ampmPicker { get; private set; } = new Picker() 
    {
      ItemsSource = new List < string > { "AM", "PM" }
    };
    
    public Picker _twntyFourHourPicker { get; private set; } = new Picker()
    {
      ItemsSource = new List < string > { "12", "24" }
    };

    public DateTimePicker2() 
    {
        BindingContext = this;
        Content = new Frame() 
        {
            BorderColor = Color.Black,
            CornerRadius = 30,
            Padding = new Thickness(10, 10, 10, 10),
            Margin = new Thickness(20),
            Content = new StackLayout 
            {
                Orientation = StackOrientation.Horizontal,
                Children = 
                {
                    _dayLabel,
                    _dayEntry,
                    _monthLabel,
                    _monthEntry,
                    _yearLabel,
                    _yearEntry,
                    _hourLabel,
                    _hourEntry,
                    _minLabel,
                    _minsEntry,
                }
            }
        };
    }
}

Basically, at present it its showing as such I want the rounded corners only to be the width of the controls and the Labels to be cantered above the text boxes is that possible if it means making text boxes bigger am ok with that, but as long as the text is centered.

By the way, am using c# for mark-up to render the controls.

enter image description here

Upvotes: 0

Views: 95

Answers (1)

Wen xu Li
Wen xu Li

Reputation: 1686

Using Xamarin.Forms Grid can make the data more regular.

For more information, please refer to https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/grid

I wrote a small example for your reference:

Here is background code:

Grid grid = new Grid
{
    RowDefinitions =
    {
        new RowDefinition { Height = 25 },
        new RowDefinition { Height = 50 },
    },
    ColumnDefinitions =
    {
        new ColumnDefinition { Width = 65 },
        new ColumnDefinition { Width = 65 },
        new ColumnDefinition { Width = 65 },
        new ColumnDefinition { Width = 65 },
        new ColumnDefinition { Width = 65 }
    }
};
grid.Children.Add(new Label { Text = "Day" }, 0, 0);
grid.Children.Add(new Label { Text = "Month" }, 1, 0);
grid.Children.Add(new Label { Text = "Year" }, 2, 0);
grid.Children.Add(new Label { Text = "Hour" }, 3, 0);
grid.Children.Add(new Label { Text = "Min" }, 4, 0);
grid.Children.Add(new Entry { Placeholder = "00" }, 0, 1);
grid.Children.Add(new Entry { Placeholder = "00" }, 1, 1);
grid.Children.Add(new Entry { Placeholder = "00" }, 2, 1);
grid.Children.Add(new Entry { Placeholder = "00" }, 3, 1);
grid.Children.Add(new Entry { Placeholder = "00" }, 4, 1);

StackLayout stackLayout = new StackLayout
{
    Orientation = StackOrientation.Horizontal,
    HorizontalOptions = LayoutOptions.FillAndExpand,
    Children =
    {
       grid
    }
};
Frame defaultFrame = new Frame
{
    Content = stackLayout,
    CornerRadius = 30,
    Margin = new Thickness(20,20,20,20)
};

Content = new StackLayout
{
    Children =
    {
        defaultFrame
    }
};

Upvotes: 1

Related Questions