Syncfusion Toolkit for .NET MAUI

https://github.com/syncfusion/maui-toolkit
Admin
A high-performance collection of UI controls for .NET MAUI, streamlining cross-platform app...
Tokens:264,807
Snippets:1,484
Trust Score:10
License:MIT
Update:2 weeks ago
Show doc for...
Tokens:
Raw
### Usage Example

Source: https://github.com/syncfusion/maui-toolkit/blob/main/_autodocs/api-reference/SfOtpInput.md

Example of using SfOtpInput in C# and XAML.

```APIDOC
## Usage

### Description
Examples of how to configure and use the SfOtpInput control in C# and XAML.

### C# Example
```csharp
var otp = new SfOtpInput();
otp.Length = 6;
otp.Type = OtpInputType.Number;
otp.StylingMode = OtpInputStyle.Outlined;
otp.MaskCharacter = '●';
otp.AutoFocus = true;
otp.ValueChanged += (sender, e) =>
{
    if (e.NewValue != null && e.NewValue.Length == otp.Length)
    {
        otp.InputState = verify(e.NewValue) ? OtpInputState.Success : OtpInputState.Error;
    }
};
```

### XAML Example
```xml
<toolkit:SfOtpInput Length="4" StylingMode="Filled" InputState="Default" Separator="-"
                    TextColor="Black" Stroke="#49454F" />
```
```

--------------------------------

### C# usage of SfOtpInput

Source: https://github.com/syncfusion/maui-toolkit/blob/main/_autodocs/api-reference/SfOtpInput.md

C# usage example showing how to configure and handle value changes for SfOtpInput.

```csharp
var otp = new SfOtpInput();
otp.Length = 6;
otp.Type = OtpInputType.Number;
otp.StylingMode = OtpInputStyle.Outlined;
otp.MaskCharacter = '●';
otp.AutoFocus = true;
otp.ValueChanged += (sender, e) =>
{
    if (e.NewValue != null && e.NewValue.Length == otp.Length)
    {
        otp.InputState = verify(e.NewValue) ? OtpInputState.Success : OtpInputState.Error;
    }
};
```

--------------------------------

### SfEffectsView usage example

Source: https://github.com/syncfusion/maui-toolkit/blob/main/_autodocs/api-reference/SfEffectsView.md

Shows how to configure and use SfEffectsView with touch effects, auto-reset, and imperative ApplyEffects.

```csharp
var effectView = new SfEffectsView();
effectView.TouchDownEffects = SfEffects.Highlight | SfEffects.Ripple;
effectView.TouchUpEffects = SfEffects.Selection;
effectView.AutoResetEffects = AutoResetEffects.AllEffects;
effectView.RippleBackground = new SolidColorBrush(Colors.Purple);
effectView.Add(new Label { Text = "Press & hold" });

// imperative:
effectView.ApplyEffects(SfEffects.Scale, RippleStartPosition.TouchPoint, null, false);
effectView.Reset();
```

--------------------------------

### Install Syncfusion.Maui.Toolkit via dotnet CLI

Source: https://github.com/syncfusion/maui-toolkit/blob/main/README.md

Adds the Syncfusion Toolkit for .NET MAUI NuGet package to the project. Run this command in the project directory.

```bash
dotnet add package Syncfusion.Maui.Toolkit
```

--------------------------------

### C# usage of SfExpander

Source: https://github.com/syncfusion/maui-toolkit/blob/main/_autodocs/api-reference/SfExpander.md

C# usage example showing how to create an SfExpander, set its header and content, configure animation, and handle the Expanding event to cancel the expansion.

```csharp
var expander = new SfExpander();
expander.Header = new Label { Text = "Advanced options" };
expander.Content = new Grid { new Label { Text = "Hidden settings…" } };
expander.IsExpanded = true;
expander.AnimationEasing = ExpanderAnimationEasing.EaseInOut;
expander.AnimationDuration = 200;

expander.Expanding += (sender, args) =>
{
    if (/* some condition */)
    {
        args.Cancel = true;   // ExpandingAndCollapsingEventArgs is CancelEventArgs — veto the expand
    }
};
```

--------------------------------

### XAML usage of SfOtpInput

Source: https://github.com/syncfusion/maui-toolkit/blob/main/_autodocs/api-reference/SfOtpInput.md

XAML usage example for SfOtpInput with various properties set.

```xml
<toolkit:SfOtpInput Length="4" StylingMode="Filled" InputState="Default" Separator="-"
                    TextColor="Black" Stroke="#49454F" />
```

--------------------------------

### SfAccordion Usage Examples

Source: https://github.com/syncfusion/maui-toolkit/blob/main/_autodocs/api-reference/SfAccordion.md

Usage examples for the SfAccordion control in XAML and C#.

```APIDOC
## SfAccordion Usage (XAML)

### Description
Example of using the SfAccordion control in XAML with a BindableLayout and AccordionItem template.

### XAML
```xml
<toolkit:SfAccordion ExpandMode="SingleOrNone" AnimationDuration="300" ItemSpacing="10">
    <BindableLayout.ItemTemplate>
        <DataTemplate>
            <toolkit:AccordionItem IsExpanded="False">
                <toolkit:AccordionItem.Header>
                    <Label Text="{Binding Title}" />
                </toolkit:AccordionItem.Header>
                <toolkit:AccordionItem.Content>
                    <Label Text="{Binding Body}" />
                </toolkit:AccordionItem.Content>
            </toolkit:AccordionItem>
        </DataTemplate>
    </BindableLayout.ItemTemplate>
</toolkit:SfAccordion>
```
```

```APIDOC
## SfAccordion Usage (C#)

### Description
Example of creating an SfAccordion programmatically, adding items, and handling the Expanding event.

### C#
```csharp
var accordion = new SfAccordion();
accordion.ExpandMode = AccordionExpandMode.Multiple;

var item = new AccordionItem();
item.Header = new Label { Text = "Section 1" };
item.Content = new Label { Text = "Body content" };
item.IsExpanded = true;
accordion.Items.Add(item);

accordion.Expanding += (sender, args) =>
{
    // ExpandingAndCollapsingEventArgs is CancelEventArgs — veto by setting args.Cancel = true
    if (args.Index == 0 && !userAllowed) args.Cancel = true;
};
```
```

--------------------------------

### SfBottomSheet Usage

Source: https://github.com/syncfusion/maui-toolkit/blob/main/_autodocs/api-reference/SfBottomSheet.md

Programmatic and XAML usage examples for the SfBottomSheet control.

```APIDOC
## SfBottomSheet Usage

### Description
Shows how to create and configure a SfBottomSheet programmatically and in XAML.

### Programmatic Example
```csharp
var sheet = new SfBottomSheet();
sheet.BottomSheetContent = new Label { Text = "Sheet body" };
sheet.ShowGrabber = true;
sheet.HalfExpandedRatio = 0.5;
sheet.FullExpandedRatio = 0.9;
sheet.AllowedState = BottomSheetAllowedState.All;
// open:
sheet.Show();
// … later
sheet.Close();
```

### XAML Example
```xml
<toolkit:SfBottomSheet IsOpen="True" EnableSwiping="True" HalfExpandedRatio="0.4">
    <toolkit:SfBottomSheet.BottomSheetContent>
        <Label Text="Drag me up!" />
    </toolkit:SfBottomSheet.BottomSheetContent>
</toolkit:SfBottomSheet>
```
```

--------------------------------

### XAML usage of SfExpander

Source: https://github.com/syncfusion/maui-toolkit/blob/main/_autodocs/api-reference/SfExpander.md

XAML usage example for SfExpander, showing how to set the header and content via property elements.

```xml
<toolkit:SfExpander IsExpanded="False" HeaderIconPosition="End">
    <toolkit:SfExpander.Header>
        <Label Text="More options" />
    </toolkit:SfExpander.Header>
    <toolkit:SfExpander.Content>
        <Label Text="Collapsible body" />
    </toolkit:SfExpander.Content>
</toolkit:SfExpander>
```

--------------------------------

### Initialize Syncfusion Toolkit in MauiProgram.cs

Source: https://github.com/syncfusion/maui-toolkit/blob/main/_autodocs/index.md

Call this method in MauiProgram.cs to initialize the Syncfusion MAUI Toolkit. It registers platform handlers for internal interfaces and is the only setup API required.

```csharp
builder.ConfigureSyncfusionToolkit()
```

--------------------------------

### SfSparkWinLossChart

Source: https://github.com/syncfusion/maui-toolkit/blob/main/_autodocs/api-reference/SfSparkCharts.md

Usage example for the SfSparkWinLossChart control, showing data binding and win/loss color configuration.

```APIDOC
## [SfSparkWinLossChart] [Win/Loss Sparkline]

### Description
Creates a win/loss sparkline chart to visualize binary outcomes (e.g., +1/-1 series). Configure data binding and win/loss colors.

### Method
Constructor and property configuration

### Endpoint
SfSparkWinLossChart

### Parameters
#### Properties
- **ItemsSource** (IEnumerable) - Required - Data source for the chart, e.g., a series of +1/-1 values.
- **WinColor** (Color) - Optional - Color for win segments.
- **LossColor** (Color) - Optional - Color for loss segments.

### Request Example
```csharp
var wl = new SfSparkWinLossChart();
wl.ItemsSource = results;                 // +1 / -1 series
wl.WinColor = Color.FromArgb("#1E8E3E");
wl.LossColor = Color.FromArgb("#D93025");
```

### Response
#### Success Response
No return value; the chart is configured and rendered.

#### Response Example
No response body; the chart displays the data.

```

--------------------------------

### SfExpander Class

Source: https://github.com/syncfusion/maui-toolkit/blob/main/_autodocs/api-reference/SfExpander.md

Documentation for the SfExpander class, including its properties, events, and usage examples.

```APIDOC
## SfExpander Class

### Description
Represents a single expandable/collapsible section with an interactive header. It is the building block used by SfAccordion.

### Namespace
`Syncfusion.Maui.Toolkit.Expander`

### Inheritance
`SfView`, `IParentThemeElement`

### Constructor
```csharp
public SfExpander()
```

### Properties

| Property | Type | Default | Description |
|----------|------|---------|-------------|
| `Content` | `View?` | `null` | The content to display when expanded. |
| `HeaderIconPosition` | `ExpanderIconPosition` | `ExpanderIconPosition.End` | Position of the header icon (chevron). |
| `Header` | `View` | `null` | The header view. |
| `IsExpanded` | `bool` | `false` | Whether the expander is expanded. |
| `HeaderBackground` | `Brush` | `#00000000` | Background brush for the header. |
| `HeaderIconColor` | `Color` | `#49454F` | Color of the header icon. |
| `AnimationEasing` | `ExpanderAnimationEasing` | `ExpanderAnimationEasing.Linear` | Easing function for expand/collapse animation. |
| `AnimationDuration` | `double` | `300d` | Duration of the expand/collapse animation in milliseconds. |
| `HoverHeaderBackground` | `Brush` | `#141C1B1F` | Background brush when the header is hovered. |
| `HoverIconColor` | `Color` | `#1C1B1F` | Icon color when the header is hovered. |
| `PressedIconColor` | `Color` | `#49454F` | Icon color when the header is pressed. |
| `HeaderRippleBackground` | `Brush` | `#1C1B1E` | Ripple background brush. |
| `FocusedHeaderBackground` | `Brush` | `#1F1C1B1F` | Background brush when the header is focused. |
| `FocusedIconColor` | `Color` | `#49454F` | Icon color when the header is focused. |
| `HeaderStroke` | `Color` | `#CAC4D0` | Stroke color of the header. |
| `HeaderStrokeThickness` | `double` | `1d` | Stroke thickness of the header. |
| `FocusBorderColor` | `Color` | `#000000` | Border color when focused. |

### Events

| Event | Type | Description |
|-------|------|-------------|
| `Expanding` | `EventHandler<ExpandingAndCollapsingEventArgs>?` | Occurs before the expander expands. Can be cancelled. |
| `Expanded` | `EventHandler<ExpandedAndCollapsedEventArgs>?` | Occurs after the expander expands. |
| `Collapsing` | `EventHandler<ExpandingAndCollapsingEventArgs>?` | Occurs before the expander collapses. Can be cancelled. |
| `Collapsed` | `EventHandler<ExpandedAndCollapsedEventArgs>?` | Occurs after the expander collapses. |

### Event Arguments

- `ExpandingAndCollapsingEventArgs(int index) : CancelEventArgs` - Provides the index of the expander and supports cancellation.
- `ExpandedAndCollapsedEventArgs(int index) : EventArgs` - Provides the index of the expander.

### Usage Example

```csharp
var expander = new SfExpander();
expander.Header = new Label { Text = "Advanced options" };
expander.Content = new Grid { new Label { Text = "Hidden settings…" } };
expander.IsExpanded = true;
expander.AnimationEasing = ExpanderAnimationEasing.EaseInOut;
expander.AnimationDuration = 200;

expander.Expanding += (sender, args) =>
{
    if (/* some condition */)
    {
        args.Cancel = true;   // veto the expand
    }
};
```

### XAML Usage

```xml
<toolkit:SfExpander IsExpanded="False" HeaderIconPosition="End">
    <toolkit:SfExpander.Header>
        <Label Text="More options" />
    </toolkit:SfExpander.Header>
    <toolkit:SfExpander.Content>
        <Label Text="Collapsible body" />
    </toolkit:SfExpander.Content>
</toolkit:SfExpander>
```
```

--------------------------------

### Tap gesture listener usage

Source: https://github.com/syncfusion/maui-toolkit/blob/main/_autodocs/api-reference/Core-Infrastructure.md

Example of implementing ITapGestureListener with a GestureDetector to handle tap events.

```csharp
using Syncfusion.Maui.Toolkit.Internals;

class TapHandlerPane : Pane, ITapGestureListener
{
    readonly GestureDetector _detector = new GestureDetector(this);
    public TapHandlerPane()
    {
        _detector.AddListener(this);
    }
    public void OnTap(TapEventArgs e)
    {
        OnTap(this, e);
    }
    public void OnTap(object sender, TapEventArgs e)
    {
        // handle tap at e.TapPoint
    }
}
```

--------------------------------

### GestureDetector Class

Source: https://github.com/syncfusion/maui-toolkit/blob/main/_autodocs/api-reference/Core-Infrastructure.md

Documentation for the GestureDetector class, including constructor, methods, callbacks, and usage example.

```APIDOC
## GestureDetector Class

### Description
Provides gesture detection for a MAUI view, dispatching events to registered listeners for tap, double-tap, pan, pinch, long-press, and right-tap gestures.

### Constructor
- **GestureDetector(View mauiView)** - Creates a detector attached to the specified MAUI view. Subscribes to native gesture events immediately if the view's Handler exists; otherwise defers to HandlerChanged/HandlerChanging events.

### Methods
- **void AddListener(IGestureListener listener)** - Adds a listener. Type-dispatches to internal pan/pinch/long-press/tap/right-tap/double-tap lists.
- **void RemoveListener(IGestureListener listener)** - Removes a previously added listener.
- **void ClearListeners()** - Clears all listeners.
- **bool HasListener()** - Returns true when any listener list is non-empty.
- **void Dispose()** - Unsubscribes native events and clears listeners.

### Callbacks Delivered
- **OnTap(TapEventArgs)** / **OnTap(object, TapEventArgs)** - Single tap events (also ShouldHandleTap).
- **OnDoubleTap(TapEventArgs)** - Double tap events.
- **OnPan(PanEventArgs)** - Pan events.
- **OnPinch(PinchEventArgs)** - Pinch events.
- **OnLongPress(LongPressEventArgs)** - Long press events.
- **OnRightTap(RightTapEventArgs)** - Right tap events.

### Usage Example
```csharp
using Syncfusion.Maui.Toolkit.Internals;

class TapHandlerPane : Pane, ITapGestureListener
{
    readonly GestureDetector _detector = new GestureDetector(this);
    public TapHandlerPane()
    {
        _detector.AddListener(this);
    }
    public void OnTap(TapEventArgs e)
    {
        OnTap(this, e);
    }
    public void OnTap(object sender, TapEventArgs e)
    {
        // handle tap at e.TapPoint
    }
}
```
```

--------------------------------

### SfTextInputLayout

Source: https://github.com/syncfusion/maui-toolkit/blob/main/_autodocs/api-reference/SfTextInputLayout.md

Documentation for the SfTextInputLayout control, including its properties, methods, events, and usage examples in C# and XAML.

```APIDOC
## SfTextInputLayout

### Description
SfTextInputLayout is a container control that provides floating labels, helper text, error text, password visibility toggle, and leading/trailing views for input views like Entry. It implements the ITextInputLayout interface.

### Properties
- **ContainerType** (ContainerType) - Gets or sets the container type: Filled or Outlined.
- **Hint** (string) - Gets or sets the hint text displayed as a floating label.
- **HelperText** (string) - Gets or sets the helper text displayed below the input.
- **ErrorText** (string) - Gets or sets the error text displayed when HasError is true.
- **HasError** (bool) - Gets or sets whether the input is in an error state, switching stroke/text to error colors.
- **EnablePasswordVisibilityToggle** (bool) - Gets or sets whether to show a password visibility toggle button.
- **LeadingView** (View) - Gets or sets the leading view (e.g., an icon) displayed before the input.
- **CurrentActiveColor** (Color) - Gets the current active color (e.g., for error state).

### Methods
- **Add(View)** - Adds an input view (e.g., Entry) to the layout.
- **Focus()** - Focuses the input view.
- **Unfocus()** - Removes focus from the input view.

### Events
- **PasswordVisibilityToggled** - Occurs when the password visibility is toggled. Provides PasswordVisibilityToggledEventArgs with IsPasswordVisible property.

### Usage Example (C#)
```csharp
var entry = new Entry();
var layout = new SfTextInputLayout();
layout.ContainerType = ContainerType.Outlined;
layout.Hint = "Email address";
layout.HelperText = "We will never share this.";
layout.ErrorText = "Invalid email format.";
layout.HasError = false;
layout.EnablePasswordVisibilityToggle = true;
layout.LeadingView = new SfIconView(/* mail icon */);
layout.Add(entry);

entry.TextChanged += (sender, e) =>
{
    layout.HasError = !isValidEmail(entry.Text);
};
```

### Usage Example (XAML)
```xml
<toolkit:SfTextInputLayout Hint="Password" ContainerType="Filled"
                           EnablePasswordVisibilityToggle="True"
                           HelperText="8+ characters">
    <Entry Password="True" />
</toolkit:SfTextInputLayout>
```

### Error-State Handling
```csharp
layout.HasError = true;              // switches stroke/text to error colors
System.Console.WriteLine(layout.CurrentActiveColor);
layout.Focus();
layout.Unfocus();
```
```

--------------------------------

### XAML usage of SfPullToRefresh

Source: https://github.com/syncfusion/maui-toolkit/blob/main/_autodocs/api-reference/SfPullToRefresh.md

XAML usage example with a bound refresh command and a ScrollView as pullable content.

```xml
<toolkit:SfPullToRefresh RefreshCommand="{Binding OnRefresh}" TransitionMode="PushContent">
    <toolkit:SfPullToRefresh.PullableContent>
        <ScrollView>
            <Label Text="Scrollable list…" />
        </ScrollView>
    </toolkit:SfPullToRefresh.PullableContent>
</toolkit:SfPullToRefresh>
```

--------------------------------

### C# usage of SfInteractiveViewer

Source: https://github.com/syncfusion/maui-toolkit/blob/main/_autodocs/api-reference/SfInteractiveViewer.md

C# usage example: creates an SfInteractiveViewer, sets content and zoom/pan options, subscribes to ZoomFactorChanged, and demonstrates Rotate() and Reset().

```csharp
var viewer = new SfInteractiveViewer();
viewer.Content = new Image { Source = "blueprint.png" };
viewer.IsZoomEnabled = true;
viewer.IsPanEnabled = true;
viewer.PanAxis = PanAxis.Free;
viewer.MinimumZoomFactor = 1.0;
viewer.MaximumZoomFactor = 5.0;

viewer.ZoomFactorChanged += (sender, e) =>
{
    var args = (ZoomFactorChangedEventArgs)e;
    System.Console.WriteLine($"zoom → {args.NewZoomFactor}");
};

viewer.Rotate();   // 90°
viewer.Rotate();   // 180°
viewer.Reset();
```

--------------------------------

### Configure Syncfusion Toolkit in MauiProgram.cs

Source: https://github.com/syncfusion/maui-toolkit/blob/main/README.md

Configures the Syncfusion Toolkit in MauiProgram.cs by calling ConfigureSyncfusionToolkit() on the builder. This is required to use the toolkit's controls. The example also shows optional font configuration.

```csharp
using Syncfusion.Maui.Toolkit.Hosting;

public static class MauiProgram
{
	public static MauiApp CreateMauiApp()
	{
		var builder = MauiApp.CreateBuilder();
		builder
		.UseMauiApp<App>()
		// Initialize the Syncfusion .NET MAUI Toolkit by adding the below line of code
		.ConfigureSyncfusionToolkit()
		// After initializing the Syncfusion .NET MAUI Toolkit, optionally add additional fonts
		.ConfigureFonts(fonts =>
		{
			fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
			fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
		});

		// Continue initializing your .NET MAUI App here

		return builder.Build();
	}
}
```

--------------------------------

### SfCalendar Usage

Source: https://github.com/syncfusion/maui-toolkit/blob/main/_autodocs/api-reference/SfCalendar.md

Example of creating and configuring an SfCalendar instance, including setting selection mode, date range, and handling selection changes.

```APIDOC
## SfCalendar Usage

### Description
Example of creating and configuring an SfCalendar instance, including setting selection mode, date range, and handling selection changes.

### Usage Example

```csharp
var calendar = new SfCalendar();
calendar.SelectionMode = CalendarSelectionMode.Range;
calendar.MinimumDate = DateTime.Today.AddMonths(-6);
calendar.MaximumDate = DateTime.Today.AddMonths(6);
calendar.SelectionChangedCommand = new OnDateRangeSelected(/* ICommand */);

calendar.SelectionChanged += (sender, args) =>
{
    if (args.NewValue is CalendarDateRange range)
    {
        System.Console.WriteLine($"{range.StartDate} – {range.EndDate}");
    }
};

calendar.Forward();   // next month
calendar.Backward();  // previous month
```

### Methods
- **Forward()** - Navigates to the next month.
- **Backward()** - Navigates to the previous month.

### Properties
- **SelectionMode** (CalendarSelectionMode) - Gets or sets the selection mode.
- **MinimumDate** (DateTime) - Gets or sets the minimum selectable date.
- **MaximumDate** (DateTime) - Gets or sets the maximum selectable date.
- **SelectionChangedCommand** (ICommand) - Gets or sets the command to execute when selection changes.

### Events
- **SelectionChanged** - Occurs when the selection changes. The event args contain a `NewValue` property that can be cast to `CalendarDateRange` to access `StartDate` and `EndDate`.

```

--------------------------------

### SfSparkLineChart

Source: https://github.com/syncfusion/maui-toolkit/blob/main/_autodocs/api-reference/SfSparkCharts.md

Usage example for the SfSparkLineChart control, showing data binding, styling, axis, range band, and trackball configuration.

```APIDOC
## [SfSparkLineChart] [Sparkline Chart]

### Description
Creates a sparkline chart to visualize data trends in a compact, word-sized graphic. Configure data binding, styling, axis visibility, range bands, and trackball behavior.

### Method
Constructor and property configuration

### Endpoint
SfSparkLineChart

### Parameters
#### Properties
- **ItemsSource** (IEnumerable) - Required - Data source for the chart, e.g., List<Quote> with Date and Close properties.
- **XBindingPath** (string) - Required - Path to the property for the X-axis values.
- **YBindingPath** (string) - Required - Path to the property for the Y-axis values.
- **Stroke** (Brush) - Optional - Brush for the line stroke.
- **ShowAxis** (bool) - Optional - Whether to show the axis.
- **RangeBandStart** (double) - Optional - Start value for a highlighted range band.
- **RangeBandEnd** (double) - Optional - End value for a highlighted range band.
- **TrackballBehavior** (SparkChartTrackballBehavior) - Optional - Trackball behavior for the chart.

### Request Example
```csharp
var spark = new SfSparkLineChart();
spark.ItemsSource = history;              // List<Quote { Date, Close }>
spark.XBindingPath = "Date";
spark.YBindingPath = "Close";
spark.Stroke = new SolidColorBrush(Colors.Teal);
spark.ShowAxis = true;
spark.RangeBandStart = 100.0;
spark.RangeBandEnd = 105.0;               // highlight a band
spark.TrackballBehavior = new SparkChartTrackballBehavior();
```

### Response
#### Success Response
No return value; the chart is configured and rendered.

#### Response Example
No response body; the chart displays the data.

```

--------------------------------

### C# usage of SfPullToRefresh

Source: https://github.com/syncfusion/maui-toolkit/blob/main/_autodocs/api-reference/SfPullToRefresh.md

C# usage example configuring the control with a scrollable content, refresh command, thresholds, and event handlers for pulling, refreshing, and refreshed.

```csharp
var ptr = new SfPullToRefresh();
ptr.PullableContent = myScrollView;
ptr.RefreshCommand = new ReloadCommand();          // ICommand
ptr.PullingThreshold = 220;
ptr.RefreshViewHeight = 60;
ptr.RefreshViewWidth = 60;
ptr.ProgressColor = Color.FromArgb("#6750A4");

ptr.Pulling += (sender, e) =>
{
    var args = (PullingEventArgs)e;
    System.Console.WriteLine($"pulled {args.PullDistance}/{args.PullingThreshold}");
};
ptr.Refreshing += (sender, e) => { /* disable UI / show overlay */ };
ptr.Refreshed += (sender, e) => { /* data reloaded */ };
```

--------------------------------

### SfTextInputLayout usage

Source: https://github.com/syncfusion/maui-toolkit/blob/main/_autodocs/api-reference/SfTextInputLayout.md

Usage example for SfTextInputLayout: creates an Entry and layout, sets properties like ContainerType, Hint, HelperText, ErrorText, HasError, EnablePasswordVisibilityToggle, and LeadingView, then adds the entry and updates HasError on text change.

```csharp
var entry = new Entry();
var layout = new SfTextInputLayout();
layout.ContainerType = ContainerType.Outlined;
layout.Hint = "Email address";
layout.HelperText = "We will never share this.";
layout.ErrorText = "Invalid email format.";
layout.HasError = false;
layout.EnablePasswordVisibilityToggle = true;
layout.LeadingView = new SfIconView(/* mail icon */);
layout.Add(entry);

entry.TextChanged += (sender, e) =>
{
    layout.HasError = !isValidEmail(entry.Text);
};
```

--------------------------------

### Create a Deck of Cards with SfCardLayout and SfCardView

Source: https://github.com/syncfusion/maui-toolkit/blob/main/_autodocs/api-reference/SfCards.md

Shows how to set up a card deck in C#: configure swipe direction, spacing, handle VisibleIndexChanging to veto changes, add a card with swipe-to-dismiss and indicator settings, and advance programmatically with Forward().

```csharp
var deck = new SfCardLayout();
deck.SwipeDirection = CardSwipeDirection.Right;
deck.HorizontalCardSpacing = 12;
deck.VerticalCardSpacing = 12;
deck.VisibleIndexChanging += (sender, args) =>
{
    // CancelEventArgs — veto the change if needed
    if (args.OldIndex == 0) args.Cancel = true;
};

var card = new SfCardView();
card.SwipeToDismiss = true;
card.IndicatorPosition = CardIndicatorPosition.Left;
card.IndicatorColor = Colors.Red;
card.Add(new Label { Text = "Card #1" });
deck.Add(card);

// advance programmatically:
deck.Forward();
```

--------------------------------

### SfEffectsView.ApplyEffects Method

Source: https://github.com/syncfusion/maui-toolkit/blob/main/_autodocs/api-reference/SfEffectsView.md

Imperatively runs the specified effects on the view. Allows specifying the ripple start position, start point, and whether to repeat the effects.

```APIDOC
## SfEffectsView.ApplyEffects Method

### Description
Imperatively runs the specified effects on the view. Allows specifying the ripple start position, start point, and whether to repeat the effects.

### Method
APPLY

### Endpoint
SfEffectsView.ApplyEffects(SfEffects effects = SfEffects.Ripple, RippleStartPosition rippleStartPosition = RippleStartPosition.Default, System.Drawing.Point? rippleStartPoint = null, bool repeat = false)

### Parameters
#### Path Parameters
- **effects** (SfEffects) - Optional - The effects to apply. Can be a bitwise combination of SfEffects values. Defaults to SfEffects.Ripple.
- **rippleStartPosition** (RippleStartPosition) - Optional - The position from which the ripple starts. Defaults to RippleStartPosition.Default.
- **rippleStartPoint** (System.Drawing.Point?) - Optional - The pixel point where the ripple starts. Defaults to null.
- **repeat** (bool) - Optional - Whether to repeat the effects. Defaults to false.

### Request Example
```csharp
effectView.ApplyEffects(SfEffects.Scale, RippleStartPosition.TouchPoint, null, false);
```

### Response
#### Success Response (200)
- **void** - No return value.

#### Response Example
```csharp
effectView.ApplyEffects(SfEffects.Ripple | SfEffects.Highlight, RippleStartPosition.Default, null, false);
```
```

--------------------------------

### RippleStartPosition Enum

Source: https://github.com/syncfusion/maui-toolkit/blob/main/_autodocs/api-reference/SfEffectsView.md

Defines the starting position for the ripple effect.

```APIDOC
## RippleStartPosition Enum

### Description
Defines the starting position for the ripple effect.

### Members

- **Left** - The ripple starts from the left edge.
- **Top** - The ripple starts from the top edge.
- **Right** - The ripple starts from the right edge.
- **Bottom** - The ripple starts from the bottom edge.
- **Default** - The ripple starts from the platform default origin.
- **TopLeft** - The ripple starts from the top-left corner.
- **TopRight** - The ripple starts from the top-right corner.
- **BottomLeft** - The ripple starts from the bottom-left corner.
- **BottomRight** - The ripple starts from the bottom-right corner.

### Request Example
```csharp
RippleStartPosition position = RippleStartPosition.TouchPoint;
```

### Response
#### Success Response (200)
- **RippleStartPosition** - The ripple start position value.

#### Response Example
```csharp
RippleStartPosition position = RippleStartPosition.TouchPoint;
```
```

--------------------------------

### SfCircularProgressBar

Source: https://github.com/syncfusion/maui-toolkit/blob/main/_autodocs/api-reference/SfProgressBar.md

Documentation for the SfCircularProgressBar class, including its properties and usage examples.

```APIDOC
## [SfCircularProgressBar] Circular Progress Bar

### Description
Creates a circular progress bar with configurable start/end angles, progress, thickness, and content. Supports determinate and indeterminate modes.

### Type
Class

### Namespace
Syncfusion.Maui.ProgressBar

### Properties
- **StartAngle** (double) - The start angle of the progress arc.
- **EndAngle** (double) - The end angle of the progress arc.
- **Progress** (double) - The current progress value.
- **ProgressThickness** (double) - The thickness of the progress arc.
- **TrackThickness** (double) - The thickness of the track arc.
- **Content** (View) - The content displayed in the center of the circular progress bar.
- **IsIndeterminate** (bool) - When true, the progress bar shows an indeterminate animation.
- **IndeterminateAnimationDuration** (int) - The duration of the indeterminate animation in milliseconds.
- **GradientStops** (IList<ProgressGradientStop>) - The gradient stops for the progress fill.

### Example
```csharp
var circle = new SfCircularProgressBar();
circle.StartAngle = 90;
circle.EndAngle = 450;             // 360° sweep
circle.Progress = 72;
circle.ProgressThickness = 8;
circle.TrackThickness = 8;
circle.Content = new Label { Text = "72%", HorizontalTextAlignment = center };
```
```

--------------------------------

### Navigate to repository directory

Source: https://github.com/syncfusion/maui-toolkit/blob/main/DEVELOPMENT.md

Navigate to the cloned repository directory before building the build tasks.

```shell
cd \repos\maui-toolkit
```

--------------------------------

### SfOtpInput constructor, event, and method

Source: https://github.com/syncfusion/maui-toolkit/blob/main/_autodocs/api-reference/SfOtpInput.md

Constructor, event, and method signatures for SfOtpInput.

```csharp
public SfOtpInput()
public event EventHandler<OtpInputValueChangedEventArgs>? ValueChanged;
public void DrawUI(ICanvas canvas, RectF rectF)
```

--------------------------------

### SfLinearProgressBar

Source: https://github.com/syncfusion/maui-toolkit/blob/main/_autodocs/api-reference/SfProgressBar.md

Documentation for the SfLinearProgressBar class, including its properties and usage examples.

```APIDOC
## [SfLinearProgressBar] Linear Progress Bar

### Description
Creates a linear progress bar with configurable minimum, maximum, progress, thickness, corner radius, fill, and animation duration. Supports determinate and indeterminate modes.

### Type
Class

### Namespace
Syncfusion.Maui.ProgressBar

### Properties
- **Minimum** (double) - The minimum value of the progress bar.
- **Maximum** (double) - The maximum value of the progress bar.
- **Progress** (double) - The current progress value.
- **ProgressHeight** (double) - The height of the progress track.
- **TrackHeight** (double) - The height of the track.
- **TrackCornerRadius** (CornerRadius) - The corner radius of the track.
- **ProgressFill** (Brush) - The brush used to fill the progress.
- **AnimationDuration** (int) - The duration of the progress animation in milliseconds.
- **IsIndeterminate** (bool) - When true, the progress bar shows an indeterminate animation.
- **IndeterminateAnimationDuration** (int) - The duration of the indeterminate animation in milliseconds.
- **SegmentCount** (int) - The number of segments in the progress bar.
- **SegmentGapWidth** (double) - The gap width between segments.
- **GradientStops** (IList<ProgressGradientStop>) - The gradient stops for the progress fill.

### Example
```csharp
var bar = new SfLinearProgressBar();
bar.Minimum = 0;
bar.Maximum = 100;
bar.Progress = 45;
bar.ProgressHeight = 6;
bar.TrackHeight = 6;
bar.TrackCornerRadius = new CornerRadius(3);
bar.ProgressFill = new SolidColorBrush(Colors.Purple);
bar.AnimationDuration = 600;
```
```

--------------------------------

### Build the build tasks

Source: https://github.com/syncfusion/maui-toolkit/blob/main/DEVELOPMENT.md

Restore .NET tools and build the solution. Required before opening the solution in Visual Studio or VS Code.

```shell
dotnet tool restore
```

```shell
dotnet build ./Syncfusion.Maui.Toolkit.sln
```

--------------------------------

### Configure SfCircularChart with DoughnutSeries

Source: https://github.com/syncfusion/maui-toolkit/blob/main/_autodocs/api-reference/SfCircularChart.md

Demonstrates how to initialize a doughnut chart with an exploded slice, custom radius, and grouping for small slices.

```csharp
var chart = new SfCircularChart();
var doughnut = new DoughnutSeries();
doughnut.ItemsSource = traffic;            // List<Traffic { Browser, Share }>
doughnut.XBindingPath = "Browser";
doughnut.YBindingPath = "Share";
doughnut.InnerRadius = "60%";
doughnut.StartAngle = 90;
doughnut.EndAngle = 450;
doughnut.Explode = true;
doughnut.PieGroupMode = PieGroupMode.Others;   // group small slices
doughnut.EnableTooltip = true;
chart.Series.Add(doughnut);
```

--------------------------------

### Module Graph: Dependency Flow

Source: https://github.com/syncfusion/maui-toolkit/blob/main/_autodocs/index.md

Shows the dependency flow from hosting initialization through platform handlers, controls, native drawing, and theming. Useful for understanding the architecture and module relationships.

```text
ConfigureSyncfusionToolkit()                       (Hosting)
        │ registers platform handlers for
        ▼
Internals: SfView → SfContentView / ButtonBase / SfDrawableView
        │ gesture/touch/keyboard detectors feed
        ▼
Controls (each public Sf* control)
        │ draw through
        ▼
SfDrawableView / ICanvas native drawing (platform files *.Android.cs, *.iOS.cs, *.Windows.cs, *.Standard.cs)
        │ styled by
        ▼
Themes: SyncfusionThemeResourceDictionary → DefaultTheme(/LightThemeColors|DarkThemeColors)
```

--------------------------------

### SfButton constructor and OnTouch method

Source: https://github.com/syncfusion/maui-toolkit/blob/main/_autodocs/api-reference/SfButton.md

Constructor and OnTouch method signature for SfButton.

```csharp
public SfButton()
public override void OnTouch(PointerEventArgs e)
```

--------------------------------

### SfShimmer usage in C#

Source: https://github.com/syncfusion/maui-toolkit/blob/main/_autodocs/api-reference/SfEffectsView.md

Demonstrates creating a SfShimmer instance, setting properties, and swapping placeholder for real content when data arrives.

```csharp
var shimmer = new SfShimmer();
shimmer.IsActive = true;
shimmer.Type = ShimmerType.CirclePersona;
shimmer.WaveDirection = ShimmerWaveDirection.LeftToRight;
shimmer.WaveColor = Color.FromArgb("#E1E1E1");

// swap placeholder for real content when data arrives:
shimmer.IsActive = false;
shimmer.CustomView = realContent;
```

--------------------------------

### Samples directory structure

Source: https://github.com/syncfusion/maui-toolkit/blob/main/DEVELOPMENT.md

Directory structure of the samples folder, showing the two sample projects.

```text
├── samples 
│   ├── Syncfusion.Maui.ControlsGallery
│   ├── Syncfusion.Maui.Controls.Samples.Sandbox
```

--------------------------------

### SfBottomSheet.Show()

Source: https://github.com/syncfusion/maui-toolkit/blob/main/_autodocs/api-reference/SfBottomSheet.md

Opens the sheet by setting IsOpen to true and animating to the initial state.

```APIDOC
## [METHOD] Show

### Description
Opens the sheet; sets `IsOpen = true` and animates to `HalfExpanded`/initial state.

### Method
Show

### Parameters
None

### Response
No return value.
```

--------------------------------

### SfSparkColumnChart

Source: https://github.com/syncfusion/maui-toolkit/blob/main/_autodocs/api-reference/SfSparkCharts.md

Usage example for the SfSparkColumnChart control, showing data binding, fill color, and column width configuration.

```APIDOC
## [SfSparkColumnChart] [Column Sparkline]

### Description
Creates a column sparkline chart to visualize data as vertical bars. Configure data binding, fill color, and column width factor.

### Method
Constructor and property configuration

### Endpoint
SfSparkColumnChart

### Parameters
#### Properties
- **ItemsSource** (IEnumerable) - Required - Data source for the chart, e.g., weekly usage data.
- **YBindingPath** (string) - Required - Path to the property for the Y-axis values.
- **Fill** (Brush) - Optional - Brush for the column fill.
- **ColumnWidthFactor** (double) - Optional - Factor to adjust column width.

### Request Example
```csharp
var columns = new SfSparkColumnChart();
columns.ItemsSource = weeklyUsage;
columns.YBindingPath = "Minutes";
columns.Fill = new SolidColorBrush(Colors.Purple);
columns.ColumnWidthFactor = 0.6;
```

### Response
#### Success Response
No return value; the chart is configured and rendered.

#### Response Example
No response body; the chart displays the data.

```

--------------------------------

### Manual refresh cycle

Source: https://github.com/syncfusion/maui-toolkit/blob/main/_autodocs/api-reference/SfPullToRefresh.md

Manual refresh cycle: start refreshing, perform async reload, then end refreshing.

```csharp
ptr.StartRefreshing();
await reloadFromServer();
ptr.EndRefreshing();
```

--------------------------------

### SfGridSplitter Usage

Source: https://github.com/syncfusion/maui-toolkit/blob/main/_autodocs/api-reference/SfGridSplitter.md

Demonstrates how to create and configure an SfGridSplitter, add SplitterPane instances, and use collapse/expand methods with events.

```APIDOC
## SfGridSplitter Usage

### Description
Shows how to instantiate SfGridSplitter, set its properties, add panes, and handle collapse/expand operations.

### Properties
- **Orientation** (GridSplitterOrientation) - Sets the splitter orientation.
- **SeparatorSize** (double) - Sets the size of the separator bar.

### Methods
- **AddPane(SplitterPane pane)** - Adds a pane to the splitter.
- **CollapsePane(int index)** - Collapses the pane at the specified index. Returns a Task.
- **ExpandPane(int index)** - Expands the pane at the specified index. Returns a Task.

### Events
- **Collapsing** - Occurs before a pane is collapsed. Can be cancelled by setting `args.Cancel = true`.

### SplitterPane Properties
- **Size** (double) - Sets the initial size of the pane.
- **MinimumSize** (double) - Sets the minimum size of the pane.
- **IsCollapsible** (bool) - Indicates whether the pane can be collapsed.
- **IsCollapsed** (bool) - Gets whether the pane is currently collapsed.

### Example
```csharp
var splitter = new SfGridSplitter();
splitter.Orientation = GridSplitterOrientation.Vertical;
splitter.SeparatorSize = 8;

var left = new SplitterPane();
left.Size = 200;
left.MinimumSize = 60;
left.IsCollapsible = true;
splitter.AddPane(left);

var right = new SplitterPane();
right.Size = 400;
splitter.AddPane(right);

var layout = new Grid();
layout.Add(splitter);
```

### Collapse with Animation and Events
```csharp
splitter.Collapsing += (sender, args) =>
{
    if (args.Index == 0 && /* locked */)
    {
        args.Cancel = true;
    }
};

await splitter.CollapsePane(0);
System.Console.WriteLine(splitter.SplitterPanes[0].IsCollapsed);   // true
await splitter.ExpandPane(0);
```
```

--------------------------------

### Load Raw Asset with FileSystem.OpenAppPackageFileAsync

Source: https://github.com/syncfusion/maui-toolkit/blob/main/maui/samples/Gallery/Resources/Raw/AboutAssets.txt

This C# method loads a raw asset file (e.g., AboutAssets.txt) from the app package using FileSystem.OpenAppPackageFileAsync and reads its contents with a StreamReader. It demonstrates the recommended way to access deployed raw assets.

```csharp
async Task LoadMauiAsset()
{
	using var stream = await FileSystem.OpenAppPackageFileAsync("AboutAssets.txt");
	using var reader = new StreamReader(stream);

	var contents = reader.ReadToEnd();
}
```

--------------------------------

### SfPullToRefresh constructor and refresh methods

Source: https://github.com/syncfusion/maui-toolkit/blob/main/_autodocs/api-reference/SfPullToRefresh.md

Constructor and methods for manual refresh control. StartRefreshing shows the refreshing template and fires Refreshing; EndRefreshing hides the spinner and fires Refreshed.

```csharp
public SfPullToRefresh()
public void StartRefreshing()
public void EndRefreshing()
```

--------------------------------

### SfCalendar Dialog Mode

Source: https://github.com/syncfusion/maui-toolkit/blob/main/_autodocs/api-reference/SfCalendar.md

Example of configuring the SfCalendar to display in a relative dialog mode with a specified anchor view and position.

```APIDOC
## SfCalendar Dialog Mode

### Description
Example of configuring the SfCalendar to display in a relative dialog mode with a specified anchor view and position.

### Usage Example

```csharp
calendar.Mode = CalendarMode.RelativeDialog;
calendar.RelativeView = anchorButton;
calendar.RelativePosition = CalendarRelativePosition.AlignBottom;
calendar.IsOpen = true;
```

### Properties
- **Mode** (CalendarMode) - Gets or sets the calendar mode.
- **RelativeView** (View) - Gets or sets the anchor view for the relative dialog.
- **RelativePosition** (CalendarRelativePosition) - Gets or sets the position of the dialog relative to the anchor view.
- **IsOpen** (bool) - Gets or sets whether the dialog is open.

```

--------------------------------

### SfNavigationDrawer Usage

Source: https://github.com/syncfusion/maui-toolkit/blob/main/_autodocs/api-reference/SfNavigationDrawer.md

Demonstrates how to create and configure an SfNavigationDrawer in C# and XAML.

```APIDOC
## SfNavigationDrawer Usage

### Description
Shows how to instantiate the drawer, set DrawerSettings, handle events, and toggle the drawer.

### C# Example
```csharp
var drawer = new SfNavigationDrawer();
var settings = new DrawerSettings();
settings.Position = Position.Left;
settings.DrawerWidth = 320;
settings.Duration = 250;
settings.EnableSwipeGesture = true;
settings.TouchThreshold = 30;
settings.ContentBackground = Color.FromArgb("#F7F2FB");

drawer.DrawerSettings = settings;
drawer.ContentView = new ListView { /* nav items */ };

drawer.DrawerOpening += (sender, e) =>
{
    if (!userLicensed) e.Cancel = true;
};
drawer.ToggleDrawer();
System.Console.WriteLine(drawer.IsOpen);   // true
```

### XAML Example
```xml
<toolkit:SfNavigationDrawer IsOpen="False" FlowDirection="LeftToRight">
    <toolkit:SfNavigationDrawer.DrawerSettings>
        <toolkit:DrawerSettings Position="Left" DrawerWidth="300" EnableSwipeGesture="True" />
    </toolkit:SfNavigationDrawer.DrawerSettings>
    <toolkit:SfNavigationDrawer.ContentView>
        <StackLayout>
            <Label Text="Home" />
            <Label Text="Inbox" />
        </StackLayout>
    </toolkit:SfNavigationDrawer.ContentView>
</toolkit:SfNavigationDrawer>
```
```

--------------------------------

### XAML usage of SfInteractiveViewer

Source: https://github.com/syncfusion/maui-toolkit/blob/main/_autodocs/api-reference/SfInteractiveViewer.md

XAML usage example: declares an SfInteractiveViewer with zoom and pan enabled, sets zoom limits, and assigns an Image as content.

```xml
<toolkit:SfInteractiveViewer IsZoomEnabled="True" IsPanEnabled="True" MinimumZoomFactor="1" MaximumZoomFactor="8">
    <toolkit:SfInteractiveViewer.Content>
        <Image Source="diagram.png" />
    </toolkit:SfInteractiveViewer.Content>
</toolkit:SfInteractiveViewer>
```

--------------------------------

### SfNumericUpDown constructor and OnTouch method

Source: https://github.com/syncfusion/maui-toolkit/blob/main/_autodocs/api-reference/SfNumericEntry.md

Shows the constructor that calls base(true) and the overridden OnTouch method.

```csharp
public SfNumericUpDown() : base(true)
public override void OnTouch(PointerEventArgs e)
```

--------------------------------

### MauiAsset Build Action in .csproj

Source: https://github.com/syncfusion/maui-toolkit/blob/main/maui/samples/Gallery/Resources/Raw/AboutAssets.txt

This XML snippet is added to the .csproj file to include all files in the Resources\Raw directory as MauiAsset items, deploying them with the application. The LogicalName metadata preserves the relative directory structure.

```xml
<MauiAsset Include="Resources\Raw\**" LogicalName="%(RecursiveDir)%(Filename)%(Extension)" />
```

--------------------------------

### XAML Example of SfCardLayout and SfCardView

Source: https://github.com/syncfusion/maui-toolkit/blob/main/_autodocs/api-reference/SfCards.md

Declares a card deck in XAML with SwipeDirection and ShowSwipedCard properties on SfCardLayout, and SfCardView children with BorderWidth, SwipeToDismiss, and FadeOutOnSwiping.

```xml
<toolkit:SfCardLayout SwipeDirection="Left" ShowSwipedCard="False">
    <toolkit:SfCardView BorderWidth="2" SwipeToDismiss="True" FadeOutOnSwiping="True">
        <Label Text="Swipe me" />
    </toolkit:SfCardView>
    <toolkit:SfCardView>
        <Label Text="Card two" />
    </toolkit:SfCardView>
</toolkit:SfCardLayout>
```
Tokens:
Raw