InputKit.Maui 4.4.6

There is a newer version of this package available.
See the version list below for details.
dotnet add package InputKit.Maui --version 4.4.6                
NuGet\Install-Package InputKit.Maui -Version 4.4.6                
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.
<PackageReference Include="InputKit.Maui" Version="4.4.6" />                
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add InputKit.Maui --version 4.4.6                
#r "nuget: InputKit.Maui, 4.4.6"                
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.
// Install InputKit.Maui as a Cake Addin
#addin nuget:?package=InputKit.Maui&version=4.4.6

// Install InputKit.Maui as a Cake Tool
#tool nuget:?package=InputKit.Maui&version=4.4.6                

<table> <tr> <td> <img src="art/icon512.png" width="120" /></td> <td> <h1> InputKit </h1> <p><a href="https://enisn-projects.io/docs/en/inputkit/latest/components/controls/CheckBox">CheckBox</a>, <a href="https://enisn-projects.io/docs/en/inputkit/latest/components/controls/RadioButton">RadioButton</a>, Advanced Entry, Advanced Slider etc. </p> </td> </tr> </table>

<hr />

Build status CodeFactor Nuget Nuget <a href="https://enisn-projects.io/docs/en/inputkit/latest"> <img src="https://img.shields.io/badge/Visit-Docs-orange.svg"/></a> <br /> Sparkline <hr/>

<hr/>

Getting Started with InputKit on MAUI

  • Install InputKit.Maui package from NuGet.

  • Go to your MauiProgram.cs file and add following line:

    builder
    .UseMauiApp<App>()
    .ConfigureMauiHandlers(handlers =>
    {
        // Add following line:
        handlers.AddInputKitHandlers(); // 👈
    })
    
    
  • Read the documentation for further information.


Getting Started with InputKit on Xamarin Forms

<hr />

CheckBox

A checkbox control that is useful, customizable, full-featured, fully-bindable and easy to use.

<br /> <table> <tr> <td> <img src="docs/en/images/checkbox-dark-windows.gif" alt="Xamarin Forms CheckBox Input Kit Enis Necipoglu" width="270" class="aligncenter size-medium wp-image-996" /> </td>

<td> <img src="docs/en/images/checkbox-light-android.gif" alt="Xamarin Forms CheckBox Input Kit Enis Necipoglu" width="270" class="aligncenter size-medium wp-image-996" /> </td> <td> <img src="https://raw.githubusercontent.com/enisn/Xamarin.Forms.InputKit/develop/shreenshots/checkboxes_ios.png" alt="Xamarin Forms CheckBox Input Kit Enis Necipoglu" width="270" class="aligncenter size-medium wp-image-996" /> </td> </tr> </table> <hr />

RadioButton

A radio button control that is useful, customizable, full-featured, fully-bindable and easy to use.

<table> <tr> <td> <img src="docs/en/images/radiobutton-dark-windows.gif" alt="Xamarin Forms MAUI RadioButton Input Kit Enis Necipoglu" width="270" class="aligncenter size-medium wp-image-996" /> </td>

<td> <img src="docs/en/images/radiobutton-light-android.gif" alt="Xamarin Forms CheckBox Input Kit Enis Necipoglu" width="270" class="aligncenter size-medium wp-image-996" /> </td> <td> <img src="https://raw.githubusercontent.com/enisn/Xamarin.Forms.InputKit/develop/shreenshots/radiobuttons_ios.png" alt="Xamarin Forms Radio Button Input Kit Enis Necipoğlu" width="270" class="aligncenter size-medium wp-image-1001" /> </td> </tr> </table> <hr />

Advanced Entry

This entry has many features to develop your applications quickly. When this entry is completed, it finds the next entry in the Parent layout and focuses it. AdvancedEntry contains a validation system inside it. You can set some properties to validate it and you can handle whether all your entries are validated or not with FormView. You can set validation message and AnnotatinColor. Entry will automatically display your message when it's not validated.

<a href="#"><img src="https://media.giphy.com/media/1zl0u7O2doNolIXnrT/giphy.gif" width="270" height="480" alt="Xamarin Forms Slider Sticky Label" class="aligncenter size-medium" /></a>

<h4>PROPERTIES:</h4> <ul> <li><strong>Text:</strong> <em>(string)</em> Text of user typed</li> <li><strong>Title:</strong> <em>(string)</em> Title will be shown top of this control</li> <li><strong>IconImage:</strong> <em>(string)</em> Icons of this Entry. Icon will be shown left of this control</li> <li><strong>IconColor:</strong> <em>(Color)</em> Color of Icon Image. IconImage must be a PNG and have Alpha channels. This fills all not-Alpha channels one color. <i>Default is Accent</i></li> <li><strong>Placeholder:</strong> <em>(string)</em> Entry's placeholder.</li> <li><strong>MaxLength:</strong> <em>(int)</em> Text's Maximum length can user type.</li> <li><strong>MinLength:</strong> <em>(int)</em> Text's Minimum length to be validated.</li> <li><strong>AnnotationMessage:</strong> <em>(string)</em> This will be shown below title. This automaticly updating. If you set this manually you must set true IgnoreValidationMessage !!! .</li> <li><strong>AnnotationColor:</strong> <em>(Color)</em> AnnotationMessage's color..</li> <li><strong>Annotation:</strong> <em>(Enum)</em> There is some annotation types inside in kit.</li> <li><strong>IsDisabled:</strong> <em>(bool)</em> Sets this control disabled or not.</li> <li><strong>IsAnnotated:</strong> <em>(bool)</em> Gets this control annotated or not. Depends on Annotation</li> <li><strong>IsRequired:</strong> <em>(bool)</em> IValidation implementation. Same with IsAnnotated</li> <li><strong>ValidationMessage:</strong> <em>(string)</em> This is message automaticly displayed when this is not validated. Use this one instead of annotationmessage</li> <li><strong>IgnoreValidationMessage:</strong> <em>(bool)</em> Ignores automaticly shown ValidationMessage and you can use AnnotationMessage as custom. </li> <li><strong>CompletedCommand:</strong> <em>(ICommand)</em> Executed when completed. </li> </ul> <hr />

SelectionView

Presents options to user to choose. This view didn't created to static usage. You should Bind a model List as ItemSource, or if you don't use MVVM you can set in page's cs file like below. (You can override ToString method to fix display value or I'll add displayMember property soon.)</p>

<h4>SAMPLE:</h4>

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:Sample.InputKit"
             xmlns:input="clr-namespace:Plugin.InputKit.Shared.Controls;assembly=Plugin.InputKit"
             x:Class="Sample.InputKit.MainPage">

    <StackLayout Spacing="12" Padding="10,0" VerticalOptions="CenterAndExpand">

        <input:SelectionView x:Name="selectionView" />

    </StackLayout>
</ContentPage>
public partial class MainPage : ContentPage
	{
		public MainPage()
		{
			InitializeComponent();
            selectionView.ItemSource = new[]
            {
                "Option 1","Option 2","Option 3","Option 4","Option 5","Option 6","Option 7","Option 8"
            };
		}
	}

<a href="https://media.giphy.com/media/KXtC6oNnOgnJhvYecy/giphy.gif"><img src="https://media.giphy.com/media/KXtC6oNnOgnJhvYecy/giphy.gif" width="270" height="480" alt="Xamarin Forms SelectionView Enis Necipoglu" class="aligncenter size-medium" /></a>

You may use a object list as ItemSource, You can make this. Don't forget override ToString() method in your object.

sample object:

  public class SampleClass
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public override string ToString() => Name;
    }

Usage:

public partial class MainPage : ContentPage
	{
		public MainPage()
		{
			InitializeComponent();
           selectionView.ItemSource = new[]
            {
                new SampleClass{ Name = "Option 1", Id = 1 },
                new SampleClass{ Name = "Option 2", Id = 2 },
                new SampleClass{ Name = "Option 3", Id = 3 },
                new SampleClass{ Name = "Option 4", Id = 4 },
                new SampleClass{ Name = "Option 5", Id = 5 },
                new SampleClass{ Name = "Option 6", Id = 6 },
                new SampleClass{ Name = "Option 7", Id = 7 },
                new SampleClass{ Name = "Option 8", Id = 8 },
            };
		}
	}

<h4>PROPERTIES:</h4> <ul> <li><strong>ItemSource:</strong> <em>(IList)</em> List of options</li> <li><strong>SelectedItem:</strong> <em>(object)</em> Selected Item from ItemSource</li> <li><strong>ColumnNumber:</strong> <em>(int)</em> Number of columng of this view</li> </ul>

<hr />

AutoCompleteEntry

Alternative picker with dropdown menu. ( Xamarin Forms only )

 <input:AutoCompleteEntry Title="Type something below:"
                          ItemsSource="{Binding MyList}" 
                          SelectedItem="{Binding SelectedItem}" />

<table> <tr> <td> <a href="#"><img src="https://raw.githubusercontent.com/enisn/Xamarin.Forms.InputKit/develop/shreenshots/autocompleteentries_android.gif" width="270" height="480" alt="Xamarin Forms Slider Sticky Label" class="aligncenter size-medium" /></a> </td> <td> <a href="#"><img src="https://raw.githubusercontent.com/enisn/Xamarin.Forms.InputKit/develop/shreenshots/autocompleteentries_ios.png" width="270" height="480" alt="Xamarin Forms Slider Sticky Label" class="aligncenter size-medium" /></a> </td> </tr> </table>

<h4>PROPERTIES:</h4> <ul> <li><strong>Placeholder:</strong> <em>(string)</em> Placehodler Text</li> <li><strong>Title:</strong> <em>(string)</em> Title will be shown top of this control</li> <li><strong>IconImage:</strong> <em>(string)</em> Icons of this Entry. Icon will be shown left of this control</li> <li><strong>Color:</strong> <em>(Color)</em> Color of Icon Image. IconImage must be a PNG and have Alpha channels. This fills all not-Alpha channels one color. <i>Default is Accent</i></li> <li><strong>ValidationMessage:</strong> <em>(string)</em> This is message automaticly displayed when this is not validated. Use this one instead of annotationmessage</li> <li><strong>AnnotationColor:</strong> <em>(Color)</em> AnnotationMessage's color..</li> <li><strong>IsRequired:</strong> <em>(bool)</em> IValidation implementation. Same with IsAnnotated</li> <li><strong>ItemsSource:</strong> <em>(IList)</em> Suggestions items</li> </ul>

To be added... <hr />

<h2>Dropdown ( Experimental )</h2> <p>Alternative picker with dropdown menu. (Xamarin Forms only) </p> <h4>SAMPLE:</h4>

 <input:Dropdown Title="Chosse an option below:"
                            TitleColor="Black"
                            ValidationMessage="This field is required" 
                            AnnotationColor="Accent" 
                            IsRequired="True" 
                            BorderColor="Black" 
                            Color="BlueViolet"
                            Placeholder="Choose one" 
                            ItemsSource="{Binding MyList}" 
                            SelectedItem="{Binding SelectedItem}" />

<a href="#"><img src="https://media.giphy.com/media/CjGR8p3HoeOup8r21J/giphy.gif" width="270" height="480" alt="Xamarin Forms Slider Sticky Label" class="aligncenter size-medium" /></a>

<h4>PROPERTIES:</h4> <ul> <li><strong>Placeholder:</strong> <em>(string)</em> Placehodler Text</li> <li><strong>Title:</strong> <em>(string)</em> Title will be shown top of this control</li> <li><strong>IconImage:</strong> <em>(string)</em> Icons of this Entry. Icon will be shown left of this control</li> <li><strong>Color:</strong> <em>(Color)</em> Color of Icon Image. IconImage must be a PNG and have Alpha channels. This fills all not-Alpha channels one color. <i>Default is Accent</i></li> <li><strong>ValidationMessage:</strong> <em>(string)</em> This is message automaticly displayed when this is not validated. Use this one instead of annotationmessage</li> <li><strong>AnnotationColor:</strong> <em>(Color)</em> AnnotationMessage's color..</li> <li><strong>IsRequired:</strong> <em>(bool)</em> IValidation implementation. Same with IsAnnotated</li> </ul>

<hr />

<h2>Advanced Slider</h2> <p>Xamarin Forms Slider works a Sticky label on it. Wonderful experience for your users.</p> <h4>SAMPLE:</h4>

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:Sample.InputKit"
             xmlns:input="clr-namespace:Plugin.InputKit.Shared.Controls;assembly=Plugin.InputKit"
             x:Class="Sample.InputKit.MainPage">

    <StackLayout Spacing="12" Padding="10,0" VerticalOptions="CenterAndExpand">

        <input:AdvancedSlider MaxValue="5000" MinValue="50" StepValue="50" ValuePrefix="Price:" ValueSuffix="€" Title="Choose Budget:"/>

    </StackLayout>

</ContentPage>

<a href="https://media.giphy.com/media/BoIPfRefA0Q9AtJ6mQ/giphy.gif"><img src="https://media.giphy.com/media/BoIPfRefA0Q9AtJ6mQ/giphy.gif" width="270" height="480" alt="Xamarin Forms Slider Sticky Label" class="aligncenter size-medium" /></a>

<h4>PROPERTIES:</h4> <ul> <li><strong>Value:</strong> <em>(double)</em> Current Selected Value, (this can be used TwoWayBinding)</li> <li><strong>Title:</strong> <em>(string)</em> Title of slider</li> <li><strong>ValueSuffix:</strong> <em>(string)</em> Suffix to be displayed near Value on Floating Label</li> <li><strong>ValuePrefix:</strong> <em>(string)</em> Prefix to be displayed near Value on Floating Label</li> <li><strong>MinValue:</strong> <em>(double)</em> Sliders' minimum value</li> <li><strong>MaxValue:</strong> <em>(double)</em> Sliders' maximum value</li> <li><strong>MaxValue:</strong> <em>(double)</em> Sliders' increment value</li> <li><strong>TextColor:</strong> <em>(Color)</em> Color of Texts</li> <li><strong>DisplayMinMaxValue:</strong> <em>(bool)</em> Visibility of Minimum and Maximum value</li> </ul> <hr />

Did you like ?

<a href="https://www.buymeacoffee.com/enisn" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/purple_img.png" alt="Buy Me A Coffee" style="height: auto !important;width: auto !important;" ></a>

Your coffee keeps me awake while developing projects like this. 👍☕

<hr />

Product Compatible and additional computed target framework versions.
.NET net8.0 is compatible.  net8.0-android was computed.  net8.0-android34.0 is compatible.  net8.0-browser was computed.  net8.0-ios was computed.  net8.0-ios17.5 is compatible.  net8.0-maccatalyst was computed.  net8.0-maccatalyst17.5 is compatible.  net8.0-macos was computed.  net8.0-tvos was computed.  net8.0-windows was computed.  net8.0-windows10.0.19041 is compatible. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.
  • net8.0

    • No dependencies.
  • net8.0-android34.0

    • No dependencies.
  • net8.0-ios17.5

    • No dependencies.
  • net8.0-maccatalyst17.5

    • No dependencies.
  • net8.0-windows10.0.19041

    • No dependencies.

NuGet packages (2)

Showing the top 2 NuGet packages that depend on InputKit.Maui:

Package Downloads
UraniumUI

Uranium is a Free & Open-Source UI Kit for MAUI.

UraniumUI.Validations.DataAnnotations

Uranium is a Free & Open-Source UI Kit for MAUI.

GitHub repositories (1)

Showing the top 1 popular GitHub repositories that depend on InputKit.Maui:

Repository Stars
enisn/UraniumUI
Uranium is a Free & Open-Source UI Kit for MAUI.
Version Downloads Last updated
4.4.7 2,087 9/20/2024
4.4.6 4,479 8/26/2024
4.4.5 3,524 8/1/2024
4.4.4 8,935 7/8/2024
4.4.3 38,269 2/25/2024
4.4.2 694 2/23/2024
4.4.1 17,285 1/9/2024
4.4.0 7,863 11/23/2023
4.4.0-pre.1 2,581 9/28/2023
4.3.5 23,406 7/31/2023
4.3.4 2,153 7/19/2023
4.3.3 1,710 7/13/2023
4.3.2 673 7/13/2023
4.3.1 175 7/12/2023
4.3.0 9,122 5/11/2023
4.2.12 1,608 5/11/2023
4.2.11 404 5/9/2023
4.2.10 1,618 4/18/2023
4.2.9 677 4/12/2023
4.2.8 661 3/17/2023
4.2.7 2,785 2/17/2023
4.2.6 645 1/20/2023
4.2.5 3,548 1/16/2023
4.2.4 337 1/13/2023
4.2.3 327 1/12/2023
4.2.2 677 1/9/2023
4.2.1 1,260 12/9/2022
4.2.0 2,086 11/18/2022
4.1.6 5,502 10/22/2022
4.1.5 3,678 9/21/2022
4.1.4 787 9/17/2022
4.1.3 449 9/17/2022
4.1.2 458 9/17/2022
4.1.1 433 9/17/2022
4.1.0 485 9/17/2022
4.1.0-pre.3 126 9/17/2022
4.1.0-pre.2 891 9/6/2022
4.1.0-pre.1 996 9/3/2022
4.0.3 2,273 9/2/2022
4.0.2 423 8/31/2022
4.0.1 423 8/28/2022
4.0.0 457 8/28/2022
4.0.0-pre.11 113 8/27/2022
4.0.0-pre.10 189 5/30/2022
4.0.0-pre.9 126 5/24/2022
4.0.0-pre.8 164 3/22/2022

Android Target Framework issue resolved.