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 on NuGet

Sample Project Available: : Sample.InputKit on GitHub

Source Codes Available Too: : Plugin.InputKit on GitHub

Checkbox

Bildiğiniz üzere Xamarin Forms içerisinde varsayılan olarak CheckBox bulunmuyor. Bunun yerine Custom Renderer yazarak Native’deki checkbox’ı render ettirebilmekteyiz. Fakat bu plugindeki CheckBox tamamen portable katmanda oluşturulmuş bir checkbox’tır.

ÖRNEK:

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

  • CheckChanged: (Event) Seçme işleminde tetiklenir.
  • CheckChangedCommand: (Command) Bindable Command, seçme işlemi gerçekleştiğinde Execute edilir.
  • Key: (int) ID gibi checkbox’ları ayırt edici sayı atamanız için kullanılabilir.
  • Text: (string) Açıklama olarak gösterilecek metin
  • IsChecked: (bool) Seçili olup olmadığı bilgisi. Varsayılan olarak TwoWay Binding çalışır..
  • Color: (Color) Seçili checkbox’ın rengi.
  • TextColor: (Color) Açıklama metninin rengi
  • Type: (CheckType) Seçili haldeki ikonun stili. (Check,Cross,Star,Box vs.)

    • RadioButon

    RadioButton’lar RadioButtonGroupView içerisinde kullanılmalıdır. Bu view size kendi içerisindeki seçili radiuobutton’u çevirebilir. Bunun dışında teker teker seçili olup olmadığını kontrol edebilmeniz mümkün.

    ÖRNEK:

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

    ÖZELLİKLER

    PROPERTIES:

    RadioButtonGroupView
  • SelectedIndex: (int) Kendi içindeki seçili olan Radio Button’un indexi
  • SelectedItem: (object) Kendi içindeki seçili olan Radio Button’un içindeki değeri
    • RadioButton
  • Clicked: (event) Tıklandığında tetiklenen olay
  • ClickCommand: (int) Bindable Command, Tıklandığında Execute edilen Command
  • Value: (object) Radio Button’un içinde tutulan değer. RadioButtonGroupView bu değeri kullanır.
  • IsChecked: (bool) Seçili olup olmadığı
  • Text: (string) Gösterilecek metin
  • FontSize: (double) Gösterilecek metnin yazıtipi büyüklüğü
  • Color: (Color) RadioButton’un rengi
  • TextColor: (Color) Metnin rengi

    • Advanced Slider

    Xamarin Forms Slider üzerinde bir label ile birlikte çalışır. Kullanıcıların neyi seçtiğini görmesi için oldukça güzel bir tecrübe.

    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) Slider’ın geçerli değeri. (TwoWay Binding olarak kullanılabilir.)
  • Title: (string) Başlık
  • ValueSuffix: (string) Hareketli label’da Değerin yanında gösterilecek sonek
  • ValuePrefix: (string) Hareketli label’da Değerin yanında gösterilecek önek
  • MinValue: (double) Sliders’ın en küçük değeri
  • MaxValue: (double) Sliders’ın azami değeri
  • MaxValue: (double) Sliders’ın artış miktarı
  • TextColor: (Color) Yazıların rengi
  • DisplayMinMaxValue: (bool) Sağda ve soldaki Min ve Max değerlerin görünüp görünmediği

    • SelectionView

    SelectionView kullanıcıya buttonlar ile seçim yapmasını sağlar. SelectionView’in manuel kullanımdan ziyade MVVM için yapıldığından doğrudan XAML içerisine statik opsiyonlar koyamıyoruz. Bu örneği de MVVM kullanmadan basit bir şekilde cs dosyasından ItemSource vererek çözelim. Eğer bir model listesi ItemSource olara kveriyorsak, modelin class’ına gidip ToString metodunu override ederek görüntülenmesini istediğimiz property’i return ediyoruz, görüntülenme ismi düzeliyor. Bu durum için en kısa zamanda DisplayMember eklenecek.

    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

    ÖZELLİKLER:

  • ItemSource: (IList) Sorulacak seçeneklerin listesi
  • SelectedItem: (object) ItemSource içindeki seçili nesne
  • ColumnNumber: (int) Sütun sayısı

    • 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 Saving Data without SQL
    description

    Xamarin Forms Saving Data without SQL

    access_time chat_bubble0
    Xamarin Forms Material Cards and Animated Detail Page
    description

    Xamarin Forms Material Cards and Animated Detail Page

    access_time chat_bubble1
    Xamarin Forms ile Validation
    description

    Xamarin Forms ile Validation

    access_time chat_bubble0
    Xamarin Forms Rehber Okuma
    description

    Xamarin Forms Rehber Okuma

    access_time chat_bubble3

    One Comment

    1. Nicholas Ventimiglia 21 Nisan 2018 Reply

      Good stuff, thanks for your contribution!

    Add a Comment

    E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir