RSsegmentedControlMaui 1.0.4

RSsegmentedControlMaui

RSsegmentedControlMaui is a segmented control component for .NET MAUI that allows you to display and manage segmented UI elements in your application. It is fully customizable and supports advanced features like custom templates, item selection, and styling.

Features

• Bindable ItemsSource for dynamic data.
• Customizable appearance using border properties.
• Support for custom item templates.
• Properties to manage the selected item and index.
• Changeable background color for the selected segment via SelectedColor.

Installation

Install the package via NuGet:

dotnet add package RSsegmentedControlMaui --version 1.0.4

Usage

Basic Usage

Include the namespace in your XAML file:

xmlns:rsSegmented="clr-namespace:RSsegmentedControlMaui;assembly=RSsegmentedControlMaui"

Add the RSsegmentedControl to your layout and bind an ItemsSource:

<rsSegmented:RSsegmentedControl>
    <rsSegmented:RSsegmentedControl.ItemsSource>
        <x:Array Type="{x:Type x:String}">
            <x:String>Day</x:String>
            <x:String>Week</x:String>
            <x:String>Month</x:String>
            <x:String>Year</x:String>
        </x:Array>
    </rsSegmented:RSsegmentedControl.ItemsSource>
</rsSegmented:RSsegmentedControl>

Styling

The underlying control is a Border. To customize its appearance, use border properties like StrokeThickness and Stroke:

<rsSegmented:RSsegmentedControl StrokeThickness="2" Stroke="Blue" />

Custom Item Template

You can define a custom item template to display content as per your requirements:

<rsSegmented:RSsegmentedControl>
    <rsSegmented:RSsegmentedControl.ItemsSource>
        <x:Array Type="{x:Type x:String}">
            <x:String>Day</x:String>
            <x:String>Week</x:String>
            <x:String>Month</x:String>
            <x:String>Year</x:String>
        </x:Array>
    </rsSegmented:RSsegmentedControl.ItemsSource>
    <rsSegmented:RSsegmentedControl.ItemTemplate>
        <DataTemplate>
            <VerticalStackLayout Padding="10">
                <Image Source="dotnet_bot" HeightRequest="40"/>
                <Label Text="{Binding .}"/>
            </VerticalStackLayout>
        </DataTemplate>
    </rsSegmented:RSsegmentedControl.ItemTemplate>
</rsSegmented:RSsegmentedControl>

Selected Color

Change the background color of the selected segment using the SelectedColor property:

<rsSegmented:RSsegmentedControl SelectedColor="LightBlue" />

Selection Handling

• Use the SelectedItem property to get or set the currently selected item.
• Use the SelectedIndex property to get or set the index of the selected item.
• Use the SelectionMode property to set if selection is mandatory or not.

Example:

<rsSegmented:RSsegmentedControl SelectedColor="LightBlue"
                                 SelectionMode="Mandatory"
                                 SelectedItem="{Binding SelectedSegment}"
                                 SelectedIndex="{Binding SelectedIndex}" />

Orientation

Change the orientation of the control to Horizontal or Vertical using the Orientation property:

<rsSegmented:RSsegmentedControl Orientation="Vertical" />

License

This package is licensed under the MIT License. See the LICENSE.txt file for more details.

Enjoy using RSsegmentedControlMaui! If you encounter any issues or have feature requests, please let me know.