Xamarin Forms Input Kit

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

    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

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