Я использую .Net MAUI для создания приложения для часов (Wear OS и IOS): маленькие экраны. Я бы хотел, чтобы пользователь выбрал число от 0 до 60.
Я попробовал picker, но макет на маленьком экране, как на часах, ужасен (см. ниже).
Есть ли для этого более эффективные элементы управления, например, «прокручивающийся» элемент управления для выбора числа, например, при установке будильника на Android? Если нет, есть ли способ настроить пользовательский интерфейс выбора средства выбора?





Правильный подход — использовать вертикальную карусель (док).
<ContentView.Content>
<StackLayout VerticalOptions = "Center" HorizontalOptions = "Center" Spacing = "0">
<CarouselView ItemsSource = "{Binding Source = {x:Reference Root}, Path=Numbers}"
CurrentItem = "{Binding Source = {x:Reference Root}, Path=Number}"
IsSwipeEnabled = "{Binding Source = {x:Reference Root}, Path=IsSwipeEnabled}">
<CarouselView.ItemsLayout>
<LinearItemsLayout Orientation = "Vertical" />
</CarouselView.ItemsLayout>
<CarouselView.ItemTemplate>
<DataTemplate>
<Label x:Name = "NumberLabel" Text = "{Binding ., StringFormat='{}{0:D2}'}" FontSize = "Title" VerticalOptions = "Center"
HorizontalOptions = "Center" HorizontalTextAlignment = "Center" VerticalTextAlignment = "Center"
WidthRequest = "50" TextColor = "White"/>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
<BoxView HeightRequest = "2" BackgroundColor = "White" VerticalOptions = "Start" HorizontalOptions = "FillAndExpand"/>
</StackLayout>
</ContentView.Content>
public partial class NumberPicker : ContentView
{
public static readonly BindableProperty NumberProperty = BindableProperty.Create(nameof(Number), typeof(int), typeof(NumberPicker), 0);
public static readonly BindableProperty IsSwipeEnabledProperty = BindableProperty.Create(nameof(IsSwipeEnabled), typeof(bool), typeof(DigitPicker), true);
public List<int> Numbers { get; } = new (Enumerable.Range(0, 59));
public bool IsSwipeEnabled
{
get => (bool)GetValue(IsSwipeEnabledProperty);
set
{
SetValue(IsSwipeEnabledProperty, value);
OnPropertyChanged(nameof(IsSwipeEnabled));
}
}
public int Number
{
get => (int)GetValue(NumberProperty);
set => SetValue(NumberProperty, value);
}
public NumberPicker()
{
InitializeComponent();
}
}
Для часов, часов и подобных устройств пользовательский интерфейс обычно представляет собой простую кнопку с быстрым автоматическим повтором нажатия и удержания.