Home
/
/
Xamarin Forms Input Kit

Xamarin Forms Input Kit

bookmarkC# access_time personenisn chat_bubble1

Xamarin Forms CheckBox RadioButton etc.

Nuget Package Available: : Xamarin.Forms.InputKit

Sample Project Available: : Sample.InputKit on GitHub

Source Codes Available Too: : Plugin.InputKit on GitHub

Checkbox

As you know ther is no CheckBox in Xamarin Forms Library. You can use a custom renderer to use Native Checkbox in portable layer. This CheckBox is not a native one, It’s created in Xamarin Forms Portable layer.

SAMPLE:

<?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="30,0">
            <input:CheckBox Text="Option 1" Type="Box" />
            <input:CheckBox Text="Hello World I'm Option 2" Type="Check"/>
            <input:CheckBox Text="Consetetur eum kasd eos dolore Option 3" Type="Cross"/>
            <input:CheckBox Text="Sea sed justo" Type="Star"/>
        </StackLayout>
</ContentPage>

Xamarin Forms CheckBox Input Kit Enis Necipoglu

PROPERTIES:

  • CheckChanged: (Event) Invokes when check changed.
  • CheckChangedCommand: (Command) Bindable Command, executed when check changed.
  • Key: (int) A key you can set to define checkboxes as ID.
  • Text: (string) Text to display description
  • IsChecked: (bool) Checkbox checked situation. Works TwoWay Binding as default.
  • Color: (Color) Color of selected check.
  • TextColor: (Color) Color of description text.
  • Type: (CheckType) Type of checkbox checked style. (Check,Cross,Star,Box etc.)

    • RadioButon

    Radio Buttons should use inside a RadioButtonGroupView. If you want this view will return you selected radio button. But you can handle it one by one too.

    SAMPLE:

    <?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="30,0">

                <input:RadioButtonGroupView>
                    <input:RadioButton Text="Option 1" />
                    <input:RadioButton Text="Option 2" />
                    <input:RadioButton Text="Option 3" />
                    <input:RadioButton Text="Option 4" />
                </input:RadioButtonGroupView>

            </StackLayout>

    </ContentPage>

    Xamarin Forms Radio Button Input Kit Enis Necipoğlu

    PROPERTIES:

    RadioButtonGroupView
  • SelectedIndex: (int) Gets or Sets selected radio button inside itself by index
  • SelectedItem: (object) Gets or Sets selected radio button inside itself by Value
    • RadioButton
  • Clicked: (event) Invokes when clikced
  • ClickCommand: (int) Bindable Command, Executes when clicked
  • Value: (object) A value keeps inside and groupview returns that value as SelectedItem
  • IsChecked: (bool) Gets or Sets that radio button selected
  • Text: (string) Text to display near of Radio Button
  • FontSize: (double) Fontsize of Text
  • Color: (Color) Color of selected radio button dot
  • TextColor: (Color) Color of Text

    • Advanced Slider

    Xamarin Forms Slider works a Sticky label on it. Wonderful experience for your users.

    SAMPLE:

    <?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>

    Xamarin Forms Slider Sticky Label

    PROPERTIES:

  • Value: (double) Current Selected Value, (this can be used TwoWayBinding)
  • Title: (string) Title of slider
  • ValueSuffix: (string) Suffix to be displayed near Value on Floating Label
  • ValuePrefix: (string) Prefix to be displayed near Value on Floating Label
  • MinValue: (double) Sliders’ minimum value
  • MaxValue: (double) Sliders’ maximum value
  • MaxValue: (double) Sliders’ increment value
  • TextColor: (Color) Color of Texts
  • DisplayMinMaxValue: (bool) Visibility of Minimum and Maximum value

    • 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.)

    SAMPLE:

    <?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"
                };
            }
        }

    Xamarin Forms SelectionView Enis Necipoglu

    PROPERTIES:

  • ItemSource: (IList) List of options
  • SelectedItem: (object) Selected Item from ItemSource
  • ColumnNumber: (int) Number of columng of this view

    • Nuget Package Available: : Xamarin.Forms.InputKit on NuGet

    Sample Project Available: : Sample.InputKit on GitHub

    Source Codes Available Too: : Plugin.InputKit on GitHub

    label, , , , , , , , ,

    Related Posts

    Xamarin Forms Material Cards and Animated Detail Page
    description

    Xamarin Forms Material Cards and Animated Detail Page

    access_time chat_bubble1
    Xamarin Forms Reading Contacts
    description

    Xamarin Forms Reading Contacts

    access_time chat_bubble3
    Xamarin Forms Saving Data without SQL
    description

    Xamarin Forms Saving Data without SQL

    access_time chat_bubble0
    Validation on Xamarin Forms
    description

    Validation on Xamarin Forms

    access_time chat_bubble0

    One Comment

    1. Nicholas Ventimiglia 21 April 2018 Reply

      Good stuff, thanks for your contribution!

    Add a Comment

    Your email address will not be published. Required fields are marked *