S8C.WheelPicker.Maui 1.0.3

Features

• ItemTemplate
• Loop mode (infinite wheel)
• Selection threshold band (controls how “strict” the center selection is)
• Visual states for selected/non-selected items (CurrentItem / DefaultItem)
• Curvature / 3D wheel effect with configurable tilt, scale, opacity
• Overlay view (selection band, highlight, etc.)
• Haptic and sound feedbacks on selection change
• Mouse wheel support for macOS and Windows
• Parent ScrollView support (disables parent scrolling when interacting with the wheel)
• Exposes IsDragging, IsSpinning, and computed ItemHeight

Requirements

• .NET 10+

Installation

dotnet add package S8C.WheelPicker.Maui

Quick start (XAML)

Add the namespace:

xmlns:wp="clr-namespace:WheelPicker.Maui;assembly=SBC.WheelPicker.Maui"

Use the control:

<wp:WheelPicker ItemsSource="{Binding Years}"
                SelectedItem="{Binding SelectedYear}">
...
</wp:WheelPicker>

ItemTemplate + Visual States

The WheelPicker uses VisualStateManager to switch between:

• CurrentItem (selected)
• DefaultItem (non-selected)

These names are defined by the control constants:

public const string DefaultItemVisualState = "DefaultItem";
public const string CurrentItemVisualState = "CurrentItem";

Example

<wp:WheelPicker x:Name="WheelPicker"
                ItemsSource="{Binding Years}"
                SelectedItem="{Binding SelectedYear}">
    <wp:WheelPicker.ItemTemplate>
        <DataTemplate>
            <Label Text="{Binding .}" >
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="SelectionStates">
                        <VisualState x:Name="DefaultItem" />
                        <VisualState x:Name="CurrentItem">
                            <VisualState.Setters>
                                <Setter Property="TextColor"
                                        Value="DarkOrange" />
                            </VisualState.Setters>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
            </Label>
        </DataTemplate>
    </wp:WheelPicker.ItemTemplate>
</wp:WheelPicker>

Overlay (selection band)

Use Overlay to place a highlight or “selection window” on top of the wheel.

<wp:WheelPicker x:Name="WheelPicker"
                ItemsSource="{Binding Years}"
                SelectedItem="{Binding SelectedYear}">

.....

    <wp:WheelPicker.Overlay>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="{Binding Source={x:Reference WheelPicker}, Path=ItemHeight}" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>

            <Border StrokeThickness="0"
                    BackgroundColor="#1affffff"
                    Grid.Row="1">
                <Border.StrokeShape>
                    <RoundRectangle CornerRadius="8" />
                </Border.StrokeShape>
                <Border.Shadow>
                    <Shadow Brush="Black"
                            Offset="0,0"
                            Radius="1"
                            Opacity="0.8" />
                </Border.Shadow>
            </Border>

        </Grid>
    </wp:WheelPicker.Overlay>
</wp:WheelPicker>

Public API

Methods

// Scrolls the wheel so that the item at the specified "index" becomes centered and selected,
// optionally animating the transition.
wheelPicker.SpinTo(index, animated: true);

// Scrolls the wheel so that the item at the specified "index" becomes centered and selected.
// This is a convenience overload that behaves the same as "SpinTo(int, bool)" with animated controlled by "IsSelectionAnimated".
wheelPicker.SpinTo(index);

// Scrolls the wheel so that the specified "item" becomes centered and selected,
// optionally animating the transition.
wheelPicker.SpinTo(item, animated: true);

// Scrolls the wheel so that the specified "item" becomes centered and selected.
// This is a convenience overload that behaves the same as "SpinTo(object?, bool)" with animated controlled by "IsSelectionAnimated".
wheelPicker.SpinTo(item);

Selections

Feedbacks

Interactions

Appearance