Skip to content

Commit fa8988b

Browse files
enisnenisn
committed
Add RadioButton documentation
1 parent 3855c97 commit fa8988b

11 files changed

+174
-3
lines changed

‎docs/controls/CheckBox.md‎

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,8 +52,26 @@ Now you're ready to use it in your XAML page.
5252
<input:CheckBox Text="Hello World">
5353
```
5454

55-
![](../images/checkbox-usage-01.gif)
55+
![maui checkbox](../images/checkbox-usage-01.gif)
5656

57+
### Data Binding
58+
59+
All of the properties of the CheckBox control can be bound to any property of any object that supports data binding.
60+
61+
62+
- You can bind the `IsChecked` property to any property of ViewModel to handle the checkbox state.
63+
```xml
64+
<input:CheckBox Text="Hello World" IsChecked="{Binding IsChecked}">
65+
```
66+
67+
- You can bind the `CheckChangedCommand` property to any command of ViewModel to handle the checkbox changes. This command is executed right after the checkbox is checked or unchecked.
68+
```xml
69+
<input:CheckBox Text="Hello World" CheckChangedCommand="{Binding OnCheckChangedCommand}">
70+
```
71+
72+
> If you're looking for dynamic CheckBox list and want to get only selected item/items after selection. Check the [SelectionView](SelectionView.md)
73+
74+
- Rest of the visual properties are bindable as well.
5775

5876
## Customization
5977

@@ -139,7 +157,7 @@ CheckBox supports two label positions:
139157

140158
### Colors
141159

142-
You can customize checkbox colors by setting `Color`, `BackgroundColor`, `BorderColor`, `BoxBackgroundColor`, `TextColor` and `IconColor` properties.
160+
You can customize CheckBox colors by setting `Color`, `BackgroundColor`, `BorderColor`, `BoxBackgroundColor`, `TextColor` and `IconColor` properties.
143161

144162
```xml
145163
<input:CheckBox

‎docs/controls/RadioButton.md‎

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
# InputKit: RadioButton
2+
3+
A radio button control that is useful, customizable, full-featured, fully-bindable and easy to use.
4+
5+
## Supported Platforms
6+
7+
| - | MAUI | Xamarin Forms |
8+
| :--- | :---: | :---: |
9+
| Windows | ✅ | v4.0+ |
10+
| macOS | ✅ | ✅ |
11+
| Linux | ❌ | ❌ |
12+
| Android | ✅ | ✅ |
13+
| iOS | ✅ | ✅ |
14+
15+
16+
## Showcase
17+
18+
```xml
19+
<input:RadioButtonGroupView>
20+
<input:RadioButton Text="Option 1" />
21+
<input:RadioButton Text="Option 2" />
22+
<input:RadioButton Text="Option 3 with Check Shape" SelectedIconGeomerty="{x:Static input:PredefinedShapes.Check}" />
23+
<input:RadioButton Text="Option 4 with CheckCircle Shape" SelectedIconGeomerty="{x:Static input:PredefinedShapes.CheckCircle}"/>
24+
<input:RadioButton Text="Option 5 with Custom Shape" SelectedIconGeomerty="M 15.6038 7.1366 v 5.8061 c 0 0.8669 -0.8266 1.6934 -1.6934 1.6934 h -5.0803 c -1.0547 0 -1.9094 -0.1302 -2.903 -0.4838 c -0.3068 -0.1092 -1.2096 -0.4838 -1.2096 -0.4838 V 6.8947 l 3.9939 -4.6913 L 9.072 0.121 h 0.7258 c 0.804 0 1.3703 0.6415 1.3703 1.4456 v 0.4522 c 0 1.0321 -0.0622 2.0633 -0.1862 3.0879 L 10.9412 5.4432 H 13.9104 C 14.7773 5.4432 15.6038 6.2698 15.6038 7.1366 z M 0.121 14.3942 h 3.6288 V 6.169 H 0.121 V 14.3942 z"/>
25+
<input:RadioButton Text="Option 6 Label Position Before" LabelPosition="Before"/>
26+
<input:RadioButton Text="Option 7 Disabled" IsDisabled="True"/>
27+
</input:RadioButtonGroupView>
28+
```
29+
30+
> _You can visit entire code from [here](../../sandbox/SandboxMAUI/Pages/RadioButtonPage.xaml)_
31+
32+
| Dark - Desktop | Light - Mobile |
33+
| --- | --- |
34+
| ![maui radiobutton](../images/radiobutton-dark-windows.gif) | ![maui radio button](../images/radiobutton-light-android.gif) |
35+
36+
## Usage
37+
38+
Make sure you defined InputKit namespace in your XAML file.
39+
40+
| | |
41+
| --- | --- |
42+
| MAUI | `xmlns:input="clr-namespace:InputKit.Shared.Controls;assembly=InputKit.Maui"` |
43+
| Xamarin Forms | `xmlns:input="clr-namespace:Plugin.InputKit.Shared.Controls;assembly=Plugin.InputKit"` |
44+
45+
46+
Now you're ready to use it in your XAML page. RadioButtons should be grouped together in a RadioButtonGroupView. Otherwise, they will not work properly and each one will be independent.
47+
48+
49+
```xml
50+
<input:RadioButtonGroupView>
51+
<input:RadioButton Text="Option 1" />
52+
<input:RadioButton Text="Option 2" />
53+
</input:RadioButtonGroupView>
54+
```
55+
56+
![maui radio button usage](../images/radiobutton-usage-01.gif)
57+
58+
59+
### Data Binding
60+
61+
All of the RadioButton properties are bindable.
62+
63+
- `IsChecked` property can be used separately from the RadioButtonGroupView.
64+
```xml
65+
<input:RadioButton Text="Option 1" IsChecked="{Binding IsOption1}" />
66+
```
67+
68+
- RadioButtonGroupView provides `SelectedIndex` and `SelectedItem` properties. _You can use one of them to handle or change selected item._
69+
```xml
70+
<input:RadioButtonGroupView SelectedIndex="{Binding SelectedIndex}" SelectedItem="{Binding SelectedItem}">
71+
<input:RadioButton Text="Option 1" Value="1" />
72+
<input:RadioButton Text="Option 2" Value="2" />
73+
</input:RadioButtonGroupView>
74+
```
75+
- `SelectedIndex`: Gets or sets selected item by index.
76+
- `SelectedItem`: Gets or sets selected item by value. You should add `Value` to each RadioButton.
77+
78+
- RadioButtonGroupView provides `SelectedItemChangedCommand` and `SelectedItemChangedCommandParameter` properties. _You can use one of them to handle or change selected item._
79+
```xml
80+
<input:RadioButtonGroupView SelectedItemChangedCommand="{Binding SelectedItemChangedCommand}" SelectedItemChangedCommandParameter="{Binding SelectedItemChangedCommandParameter}">
81+
<input:RadioButton Text="Option 1" Value="1" />
82+
<input:RadioButton Text="Option 2" Value="2" />
83+
</input:RadioButtonGroupView>
84+
```
85+
86+
- `SelectedItemChangedCommand`: Gets or sets command to execute when selected item is changed.
87+
- `SelectedItemChangedCommandParameter`: Gets or sets parameter to pass to command when selected item is changed. _(By default it's selected item value.)_
88+
89+
90+
> If you're looking for dynamic RadioButton list and want to get only selected item/items after selection. Check the [SelectionView](SelectionView.md)
91+
92+
## Customization
93+
94+
### Icons
95+
96+
RadioButton icon can be customized in two different ways. You can use predefined shapes or you can use custom shape.
97+
InputKit provides a collection of predefined shapes that can be used as an icon.
98+
99+
> Check all [Predefined Shapes](../../sandbox/SandboxMAUI/Pages/CheckBoxPage.xaml)
100+
101+
- Predefined shapes can be used as parameter for `SelectedIconGeomerty` property.
102+
103+
```xml
104+
<input:RadioButton Text="Option 1" SelectedIconGeomerty="{x:Static input:PredefinedShapes.CheckCircle}" />
105+
```
106+
107+
![inputkit maui radiobutton check circle](../images/radiobutton-customization-icon-checkcircle.gif)
108+
109+
110+
- Custom shape can be used as parameter of `SelectedIconGeomerty` property. A plain SVG path can be used as an icon.
111+
112+
```xml
113+
<input:RadioButton
114+
Text="Option 5 with Custom Shape"
115+
SelectedIconGeomerty="M 15.6038 7.1366 v 5.8061 c 0 0.8669 -0.8266 1.6934 -1.6934 1.6934 h -5.0803 c -1.0547 0 -1.9094 -0.1302 -2.903 -0.4838 c -0.3068 -0.1092 -1.2096 -0.4838 -1.2096 -0.4838 V 6.8947 l 3.9939 -4.6913 L 9.072 0.121 h 0.7258 c 0.804 0 1.3703 0.6415 1.3703 1.4456 v 0.4522 c 0 1.0321 -0.0622 2.0633 -0.1862 3.0879 L 10.9412 5.4432 H 13.9104 C 14.7773 5.4432 15.6038 6.2698 15.6038 7.1366 z M 0.121 14.3942 h 3.6288 V 6.169 H 0.121 V 14.3942 z"/>
116+
```
117+
118+
![inputkit maui radiobutton custom shape](../images/radiobutton-customization-icon-custom-thumbsup.gif)
119+
120+
### Colors
121+
122+
You can customize RadioButton colors by setting `Color`, `CircleColor` and `TextColor`.
123+
124+
```xml
125+
<input:RadioButton Text="Option 1" Color="Red" CircleColor="Orange" TextColor="Purple" />
126+
```
127+
128+
![inputkit maui radiobutton custom colors](../images/radiobutton-customization-colors.gif)
129+
130+
131+
### Label Position
132+
133+
RadioButton supports two label positions:
134+
- Before - label is positioned before the control.
135+
- After - label is positioned after the control. (default)
136+
137+
```xml
138+
<input:RadioButtonGroupView>
139+
<input:RadioButton Text="Option 1 (After)" LabelPosition="After"/>
140+
<input:RadioButton Text="Option 2 (After)" LabelPosition="After"/>
141+
</input:RadioButtonGroupView>
142+
143+
144+
<input:RadioButtonGroupView>
145+
<input:RadioButton Text="Option 1 (Before)" LabelPosition="Before"/>
146+
<input:RadioButton Text="Option 2 (Before)" LabelPosition="Before"/>
147+
</input:RadioButtonGroupView>
148+
```
149+
150+
![](../images/radiobutton-customization-labelposition.gif)
151+

‎Wiki/SelectionView.md‎ renamed to ‎docs/controls/SelectionView.md‎

File renamed without changes.

‎docs/images/radiobutton-customization-colors.gif‎

16.2 KB
Loading

‎docs/images/radiobutton-customization-icon-checkcircle.gif‎

13.9 KB
Loading

‎docs/images/radiobutton-customization-icon-custom-thumbsup.gif‎

15.8 KB
Loading

‎docs/images/radiobutton-customization-labelposition.gif‎

47.6 KB
Loading

‎docs/images/radiobutton-dark-windows.gif‎

94 KB
Loading

‎docs/images/radiobutton-light-android.gif‎

224 KB
Loading

‎docs/images/radiobutton-usage-01.gif‎

21.4 KB
Loading

0 commit comments

Comments
 (0)