Xamarin Forms Input Kit

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

    About the author

    Piksel Akademi | Xamarin Developer "İş olarak kod yazan, hobi olarak kod yazan biriyim. Unity 3D ve Xamarin Forms platformlarında C# ile uygulamalar yazmaktan zevk alırım. .Net Framework'ün taşınabildiği her platfromda da çalışma gerçekleştirmiş olmayı severim."

    One Comment

    Add a Comment

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