{"id":993,"date":"2018-04-20T23:23:34","date_gmt":"2018-04-20T20:23:34","guid":{"rendered":"http:\/\/enisnecipoglu.com\/?p=993"},"modified":"2018-04-20T23:32:51","modified_gmt":"2018-04-20T20:32:51","slug":"xamarin-forms-input-kit","status":"publish","type":"post","link":"https:\/\/enisnecipoglu.com\/en\/xamarin-forms-input-kit\/","title":{"rendered":"Xamarin Forms Input Kit"},"content":{"rendered":"


\n\"Xamarin<\/p>\n

\n

\nNuget Package Available: <\/b> : Xamarin.Forms.InputKit<\/a>\n<\/p>\n

\nSample Project Available: <\/b> : Sample.InputKit on GitHub<\/a>\n<\/p>\n

\nSource Codes Available Too: <\/b> : Plugin.InputKit on GitHub<\/a>\n<\/p>\n

\n

Checkbox<\/h2>\n

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.<\/p>\n

SAMPLE:<\/h4>\n
<?<\/span>xml version=<\/span>"1.0"<\/span> encoding=<\/span>"utf-8"<\/span> ?><\/span>
\n<<\/span>ContentPage xmlns=<\/span>"http:\/\/xamarin.com\/schemas\/2014\/forms"<\/span>
\n             xmlns:<\/span>x=<\/span>"http:\/\/schemas.microsoft.com\/winfx\/2009\/xaml"<\/span>
\n             xmlns:<\/span>local=<\/span>"clr-namespace:Sample.InputKit"<\/span>
\n             xmlns:<\/span>input=<\/span>"clr-namespace:Plugin.InputKit.Shared.Controls;assembly=Plugin.InputKit"<\/span>
\n             x:<\/span>Class<\/span>=<\/span>"Sample.InputKit.MainPage"<\/span>><\/span>
\n        <<\/span>StackLayout Spacing=<\/span>"12"<\/span> Padding=<\/span>"30,0"<\/span>><\/span>
\n            <<\/span>input:<\/span>CheckBox Text=<\/span>"Option 1"<\/span> Type=<\/span>"Box"<\/span> \/><\/span>
\n            <<\/span>input:<\/span>CheckBox Text=<\/span>"Hello World I'm Option 2"<\/span> Type=<\/span>"Check"<\/span>\/><\/span>
\n            <<\/span>input:<\/span>CheckBox Text=<\/span>"Consetetur eum kasd eos dolore Option 3"<\/span> Type=<\/span>"Cross"<\/span>\/><\/span>
\n            <<\/span>input:<\/span>CheckBox Text=<\/span>"Sea sed justo"<\/span> Type=<\/span>"Star"<\/span>\/><\/span>
\n        <\/<\/span>StackLayout><\/span>
\n<\/<\/span>ContentPage><\/span><\/div><\/div>\n

\"Xamarin<\/p>\n

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

    RadioButon<\/h2>\n

    Radio Buttons should use inside a RadioButtonGroupView<\/strong>. If you want this view will return you selected radio button. But you can handle it one by one too. <\/p>\n

    SAMPLE:<\/h4>\n
    <?xml<\/span> version<\/span>="1.0"<\/span> encoding<\/span>="utf-8"<\/span> ?><\/span><\/span>
    \n<ContentPage<\/span> xmlns<\/span>="http:\/\/xamarin.com\/schemas\/2014\/forms"<\/span><\/span>
    \n             xmlns:x<\/span>="http:\/\/schemas.microsoft.com\/winfx\/2009\/xaml"<\/span><\/span>
    \n             xmlns:local<\/span>="clr-namespace:Sample.InputKit"<\/span><\/span>
    \n             xmlns:input<\/span>="clr-namespace:Plugin.InputKit.Shared.Controls;assembly=Plugin.InputKit"<\/span><\/span>
    \n             x:Class<\/span>="Sample.InputKit.MainPage"<\/span>><\/span><\/span>
    \n
    \n        <StackLayout<\/span> Spacing<\/span>="12"<\/span> Padding<\/span>="30,0"<\/span>><\/span><\/span>
    \n
    \n            <input:RadioButtonGroupView><\/span><\/span><\/span>
    \n                <input:RadioButton<\/span> Text<\/span>="Option 1"<\/span> \/><\/span><\/span>
    \n                <input:RadioButton<\/span> Text<\/span>="Option 2"<\/span> \/><\/span><\/span>
    \n                <input:RadioButton<\/span> Text<\/span>="Option 3"<\/span> \/><\/span><\/span>
    \n                <input:RadioButton<\/span> Text<\/span>="Option 4"<\/span> \/><\/span><\/span>
    \n            <\/input:RadioButtonGroupView><\/span><\/span><\/span>
    \n
    \n        <\/StackLayout><\/span><\/span><\/span>
    \n
    \n<\/ContentPage><\/span><\/span><\/span><\/div><\/div>\n

    \"Xamarin<\/p>\n

    PROPERTIES:<\/h4>\n

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

    Advanced Slider<\/h2>\n

    Xamarin Forms Slider works a Sticky label on it. Wonderful experience for your users.<\/p>\n

    SAMPLE:<\/h4>\n
    <?xml<\/span> version<\/span>="1.0"<\/span> encoding<\/span>="utf-8"<\/span> ?><\/span>
    \n<ContentPage<\/span> xmlns<\/span>="http:\/\/xamarin.com\/schemas\/2014\/forms"<\/span>
    \n             xmlns:x<\/span>="http:\/\/schemas.microsoft.com\/winfx\/2009\/xaml"<\/span>
    \n             xmlns:local<\/span>="clr-namespace:Sample.InputKit"<\/span>
    \n             xmlns:input<\/span>="clr-namespace:Plugin.InputKit.Shared.Controls;assembly=Plugin.InputKit"<\/span>
    \n             x:Class<\/span>="Sample.InputKit.MainPage"<\/span>><\/span>
    \n
    \n    <StackLayout<\/span> Spacing<\/span>="12"<\/span> Padding<\/span>="10,0"<\/span> VerticalOptions<\/span>="CenterAndExpand"<\/span>><\/span>
    \n
    \n        <input:AdvancedSlider<\/span> MaxValue<\/span>="5000"<\/span> MinValue<\/span>="50"<\/span> StepValue<\/span>="50"<\/span> ValuePrefix<\/span>="Price:"<\/span> ValueSuffix<\/span>="\u20ac"<\/span> Title<\/span>="Choose Budget:"<\/span>\/><\/span>
    \n
    \n    <\/StackLayout><\/span><\/span>
    \n
    \n<\/ContentPage><\/span><\/span><\/div><\/div>\n

    \"Xamarin<\/a><\/p>\n

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

    SelectionView<\/h2>\n

    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>\n

    SAMPLE:<\/h4>\n
    <?xml<\/span> version<\/span>="1.0"<\/span> encoding<\/span>="utf-8"<\/span> ?><\/span>
    \n<ContentPage<\/span> xmlns<\/span>="http:\/\/xamarin.com\/schemas\/2014\/forms"<\/span>
    \n             xmlns:x<\/span>="http:\/\/schemas.microsoft.com\/winfx\/2009\/xaml"<\/span>
    \n             xmlns:local<\/span>="clr-namespace:Sample.InputKit"<\/span>
    \n             xmlns:input<\/span>="clr-namespace:Plugin.InputKit.Shared.Controls;assembly=Plugin.InputKit"<\/span>
    \n             x:Class<\/span>="Sample.InputKit.MainPage"<\/span>><\/span>
    \n
    \n    <StackLayout<\/span> Spacing<\/span>="12"<\/span> Padding<\/span>="10,0"<\/span> VerticalOptions<\/span>="CenterAndExpand"<\/span>><\/span>
    \n
    \n        <input:SelectionView<\/span> x:Name<\/span>="selectionView"<\/span> \/><\/span>
    \n
    \n    <\/StackLayout><\/span><\/span>
    \n<\/ContentPage><\/span><\/span><\/div><\/div>\n
    public<\/span> partial<\/span> class<\/span> MainPage :<\/span> ContentPage
    \n    {<\/span>
    \n        public<\/span> MainPage(<\/span>)<\/span>
    \n        {<\/span>
    \n            InitializeComponent(<\/span>)<\/span>;<\/span>
    \n            selectionView.<\/span>ItemSource<\/span> =<\/span> new<\/span>[<\/span>]<\/span>
    \n            {<\/span>
    \n                "Option 1"<\/span>,"Option 2"<\/span>,"Option 3"<\/span>,"Option 4"<\/span>,"Option 5"<\/span>,"Option 6"<\/span>,"Option 7"<\/span>,"Option 8"<\/span>
    \n            }<\/span>;<\/span>
    \n        }<\/span>
    \n    }<\/span><\/div><\/div>\n

    \"Xamarin<\/a><\/p>\n

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

    <\/p>\n

    \n

    \nNuget Package Available: <\/b> : Xamarin.Forms.InputKit on NuGet<\/a>\n<\/p>\n

    \nSample Project Available: <\/b> : Sample.InputKit on GitHub<\/a>\n<\/p>\n

    \nSource Codes Available Too: <\/b> : Plugin.InputKit on GitHub<\/a>\n<\/p>\n

    \n

    <\/p>","protected":false},"excerpt":{"rendered":"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> 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> 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) ","protected":false},"author":1,"featured_media":1013,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[20,15,6],"tags":[47,52,49,55,50,53,28,29,51,54],"_links":{"self":[{"href":"https:\/\/enisnecipoglu.com\/en\/wp-json\/wp\/v2\/posts\/993"}],"collection":[{"href":"https:\/\/enisnecipoglu.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/enisnecipoglu.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/enisnecipoglu.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/enisnecipoglu.com\/en\/wp-json\/wp\/v2\/comments?post=993"}],"version-history":[{"count":19,"href":"https:\/\/enisnecipoglu.com\/en\/wp-json\/wp\/v2\/posts\/993\/revisions"}],"predecessor-version":[{"id":1015,"href":"https:\/\/enisnecipoglu.com\/en\/wp-json\/wp\/v2\/posts\/993\/revisions\/1015"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/enisnecipoglu.com\/en\/wp-json\/wp\/v2\/media\/1013"}],"wp:attachment":[{"href":"https:\/\/enisnecipoglu.com\/en\/wp-json\/wp\/v2\/media?parent=993"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/enisnecipoglu.com\/en\/wp-json\/wp\/v2\/categories?post=993"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/enisnecipoglu.com\/en\/wp-json\/wp\/v2\/tags?post=993"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}