Skip to content

Commit c39f1ac

Browse files
enisnenisn
authored
Merge pull request #279 from enisn/documentation
Initial Documentation Structure
2 parents 9f2ffb2 + 7d4d7c0 commit c39f1ac

25 files changed

+454
-155
lines changed

‎README.md‎

Lines changed: 48 additions & 154 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<td> <img src="art/icon512.png" width="120" /></td>
44
<td>
55
<h1> InputKit </h1>
6-
<p><a href="https://github.com/enisn/Xamarin.Forms.InputKit/wiki/CheckBox">CheckBox</a>, Radio Button, Advanced Entry, Advanced Slider, Dropdown etc. </p>
6+
<p><a href="https://github.com/enisn/Xamarin.Forms.InputKit/wiki/CheckBox">CheckBox</a>, Radio Button, Advanced Entry, Advanced Slider etc. </p>
77
</td>
88
</tr>
99
</table>
@@ -25,23 +25,23 @@
2525

2626
## Getting Started with InputKit on **MAUI**
2727

28-
> Be careful. MAUI Compatibility work in progress and experimental.
28+
> MAUI doesn't implement exactly same features as Xamarin.Forms.InputKit.
2929
> You can follow the progress with [this issue](https://github.com/enisn/Xamarin.Forms.InputKit/issues/221)
3030
3131
- Install [InputKit.Maui](https://www.nuget.org/packages/InputKit.Maui) package from NuGet.
3232

33-
- Go your **MauiProgram.cs** file and add following line:
33+
- Go to your **MauiProgram.cs** file and add following line:
3434

35-
```csharp
36-
builder
37-
.UseMauiApp<App>()
38-
.ConfigureMauiHandlers(handlers =>
39-
{
40-
// Add following line:
41-
handlers.AddInputKitHandlers(); // <---
42-
})
43-
44-
```
35+
```csharp
36+
builder
37+
.UseMauiApp<App>()
38+
.ConfigureMauiHandlers(handlers =>
39+
{
40+
// Add following line:
41+
handlers.AddInputKitHandlers(); // 👈
42+
})
43+
44+
```
4545

4646
<hr />
4747

@@ -53,116 +53,59 @@ builder
5353
5454
<hr />
5555

56-
<a href="https://github.com/enisn/Xamarin.Forms.InputKit/wiki/CheckBox">
57-
<h2>Checkbox</h2>
58-
</a>
59-
<p>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>
6056

61-
<p>Also you can read more about Checkbox from <a href="https://github.com/enisn/Xamarin.Forms.InputKit/wiki/CheckBox">here</a> </p>
62-
<h4>SAMPLE:</h4>
6357

64-
```xaml
65-
<?xml version="1.0" encoding="utf-8" ?>
66-
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
67-
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
68-
xmlns:local="clr-namespace:Sample.InputKit"
69-
xmlns:input="clr-namespace:Plugin.InputKit.Shared.Controls;assembly=Plugin.InputKit"
70-
x:Class="Sample.InputKit.MainPage">
71-
<StackLayout Spacing="12" Padding="30,0">
72-
<input:CheckBox Text="Option 1" Type="Box" />
73-
<input:CheckBox Text="Hello World I'm Option 2" Type="Check"/>
74-
<input:CheckBox Text="Consetetur eum kasd eos dolore Option 3" Type="Cross"/>
75-
<input:CheckBox Text="Sea sed justo" Type="Star"/>
76-
</StackLayout>
77-
</ContentPage>
78-
```
58+
## CheckBox
59+
60+
A checkbox control that is useful, customizable, full-featured, fully-bindable and easy to use.
61+
62+
- [Sample Code](sandbox/SandboxMAUI/Pages/CheckBoxPage.xaml)
63+
- [Documentation](docs/Controls/CheckBox.md)
64+
7965
<br />
8066
<table>
8167
<tr>
8268
<td>
83-
<img src="https://raw.githubusercontent.com/enisn/Xamarin.Forms.InputKit/develop/shreenshots/checkboxes_android.gif" alt="Xamarin Forms CheckBox Input Kit Enis Necipoglu" width="270" height="480" class="aligncenter size-medium wp-image-996" />
69+
<img src="docs/images/checkbox-dark-windows.gif" alt="Xamarin Forms CheckBox Input Kit Enis Necipoglu" width="270" class="aligncenter size-medium wp-image-996" />
70+
</td>
71+
72+
<td>
73+
<img src="docs/images/checkbox-light-android.gif" alt="Xamarin Forms CheckBox Input Kit Enis Necipoglu" width="270" class="aligncenter size-medium wp-image-996" />
8474
</td>
8575
<td>
86-
<img src="https://raw.githubusercontent.com/enisn/Xamarin.Forms.InputKit/develop/shreenshots/checkboxes_ios.png" alt="Xamarin Forms CheckBox Input Kit Enis Necipoglu" width="270" height="480" class="aligncenter size-medium wp-image-996" />
76+
<img src="https://raw.githubusercontent.com/enisn/Xamarin.Forms.InputKit/develop/shreenshots/checkboxes_ios.png" alt="Xamarin Forms CheckBox Input Kit Enis Necipoglu" width="270" class="aligncenter size-medium wp-image-996" />
8777
</td>
8878
</tr>
8979
</table>
90-
91-
<h4>PROPERTIES:</h4>
92-
<ul>
93-
<li><strong>CheckChanged:</strong> <em>(Event)</em> Invokes when check changed.</li>
94-
<li><strong>CheckChangedCommand:</strong> <em>(Command)</em> Bindable Command, executed when check changed.</li>
95-
<li><strong>Key:</strong> <em>(int)</em> A key you can set to define checkboxes as ID.</li>
96-
<li><strong>Text:</strong> <em>(string)</em> Text to display description</li>
97-
<li><strong>IsChecked:</strong> <em>(bool)</em> Checkbox checked situation. Works TwoWay Binding as default.</li>
98-
<li><strong>Color:</strong> <em>(Color)</em> Color of selected check.</li>
99-
<li><strong>TextColor:</strong> <em>(Color)</em> Color of description text.</li>
100-
<li><strong>Type:</strong> <em>(CheckType)</em> Type of checkbox checked style. (Check,Cross,Star,Box etc.)</li>
101-
</ul>
10280
<hr />
10381

10482

105-
<h2>RadioButon</h2>
106-
<p>Radio Buttons should use inside a <strong>RadioButtonGroupView</strong>. If you want this view will return you selected radio button. But you can handle it one by one too. </p>
107-
<h4>SAMPLE:</h4>
108-
109-
```xaml
110-
<?xml version="1.0" encoding="utf-8" ?>
111-
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
112-
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
113-
xmlns:local="clr-namespace:Sample.InputKit"
114-
xmlns:input="clr-namespace:Plugin.InputKit.Shared.Controls;assembly=Plugin.InputKit"
115-
x:Class="Sample.InputKit.MainPage">
83+
## RadioButton
11684

117-
<StackLayout Spacing="12" Padding="30,0">
85+
A radio button control that is useful, customizable, full-featured, fully-bindable and easy to use.
11886

119-
<input:RadioButtonGroupView>
120-
<input:RadioButton Text="Option 1" />
121-
<input:RadioButton Text="Option 2" />
122-
<input:RadioButton Text="Option 3" />
123-
<input:RadioButton Text="Option 4" />
124-
</input:RadioButtonGroupView>
125-
126-
</StackLayout>
127-
128-
</ContentPage>
129-
```
87+
- [Sample Code](sandbox/SandboxMAUI/Pages/RadioButtonPage.xaml)
88+
- [Documentation](docs/Controls/RadioButton.md)
13089

13190
<table>
13291
<tr>
13392
<td>
134-
<img src="https://raw.githubusercontent.com/enisn/Xamarin.Forms.InputKit/develop/shreenshots/radiobuttons_android.gif" alt="Xamarin Forms Radio Button Input Kit Enis Necipoğlu" width="270" height="480" class="aligncenter size-medium wp-image-1001" />
93+
<img src="docs/images/radiobutton-dark-windows.gif" alt="Xamarin Forms MAUI RadioButton Input Kit Enis Necipoglu" width="270" class="aligncenter size-medium wp-image-996" />
94+
</td>
95+
96+
<td>
97+
<img src="docs/images/radiobutton-light-android.gif" alt="Xamarin Forms CheckBox Input Kit Enis Necipoglu" width="270" class="aligncenter size-medium wp-image-996" />
13598
</td>
13699
<td>
137-
<img src="https://raw.githubusercontent.com/enisn/Xamarin.Forms.InputKit/develop/shreenshots/radiobuttons_ios.png" alt="Xamarin Forms Radio Button Input Kit Enis Necipoğlu" width="270" height="480" class="aligncenter size-medium wp-image-1001" />
100+
<img src="https://raw.githubusercontent.com/enisn/Xamarin.Forms.InputKit/develop/shreenshots/radiobuttons_ios.png" alt="Xamarin Forms Radio Button Input Kit Enis Necipoğlu" width="270" class="aligncenter size-medium wp-image-1001" />
138101
</td>
139102
</tr>
140103
</table>
141-
<h4>PROPERTIES:</h4>
142-
<h5>RadioButtonGroupView</h5>
143-
<ul>
144-
<li><strong>SelectedIndex:</strong> <em>(int)</em> Gets or Sets selected radio button inside itself by index</li>
145-
<li><strong>SelectedItem:</strong> <em>(object)</em> Gets or Sets selected radio button inside itself by Value</li>
146-
</ul>
147-
<h5>RadioButton</h5>
148-
<ul>
149-
<li><strong>Clicked:</strong> <em>(event)</em> Invokes when clikced</li>
150-
<li><strong>ClickCommand:</strong> <em>(int)</em> Bindable Command, Executes when clicked</li>
151-
<li><strong>Value:</strong> <em>(object)</em> A value keeps inside and groupview returns that value as SelectedItem</li>
152-
<li><strong>IsChecked:</strong> <em>(bool)</em> Gets or Sets that radio button selected</li>
153-
<li><strong>Text:</strong> <em>(string)</em> Text to display near of Radio Button</li>
154-
<li><strong>TextFontSize:</strong> <em>(double)</em> Fontsize of Text</li>
155-
<li><strong>Color:</strong> <em>(Color)</em> Color of selected radio button dot</li>
156-
<li><strong>TextColor:</strong> <em>(Color)</em> Color of Text</li>
157-
</ul>
158-
<hr />
159104
<hr />
160105

161106

162-
<h2>AutoCompleteEntry ( Experimental )</h2>
163-
<p>Alternative picker with dropdown menu.
164-
</p>
165-
<h4>SAMPLE:</h4>
107+
## AutoCompleteEntry
108+
Alternative picker with dropdown menu. _( Xamarin Forms only )_
166109

167110
```xaml
168111
<input:AutoCompleteEntry Title="Type something below:"
@@ -196,8 +139,8 @@ builder
196139
To be added...
197140
<hr />
198141

199-
<h2>Dropdown ( Experimental * Not Stable * )</h2>
200-
<p>Alternative picker with dropdown menu.
142+
<h2>Dropdown ( Experimental )</h2>
143+
<p>Alternative picker with dropdown menu. _(Xamarin Forms only)_
201144
</p>
202145
<h4>SAMPLE:</h4>
203146

@@ -226,66 +169,16 @@ To be added...
226169
<li><strong>IsRequired:</strong> <em>(bool)</em> IValidation implementation. Same with IsAnnotated</li>
227170
</ul>
228171

229-
To be adde...
230172
<hr />
231173

232174

175+
## Advanced Entry
176+
This entry has many features to develop your applications quickly. When this entry is completed, it finds the next entry in the Parent layout and focuses it. AdvancedEntry contains a validation system inside it. You can set some properties to validate it and you can handle whether all your entries are validated or not with **FormView**.
177+
You can set validation message and AnnotatinColor. Entry will automatically display your message when it's not validated.
233178

234-
<hr />
235-
<h2>Advanced Entry</h2>
236-
<p>This entry has many features to develop your applications quickly. When this entry completed, it finds next entry in Parent layout and focus it. AdvancedEntry contains validation system inside it. You can set some properties to validate it and you can handle all your entries is validated or not with **FormView**.
237-
You can set validation message and AnnotatinColor. Entry will automaticly display your message when it's not validated.
238-
</p>
239-
<h4>SAMPLE:</h4>
179+
- [Sample Code](sandbox/SandboxMAUI/Pages/AdvancedEntryPage.xaml)
180+
- [Documentation](docs/Controls/AdvancedEntry.md)
240181

241-
```xaml
242-
<StackLayout Padding="30">
243-
<Label Text="You can see FormView Below:"/>
244-
<BoxView HeightRequest="1" Color="LightGray" />
245-
<input:FormView IsValidated="{Binding IsValidated}">
246-
247-
<input:AdvancedEntry
248-
Text="{Binding Email}"
249-
IsRequired="True"
250-
Title="Place your email below:"
251-
Annotation="Email"
252-
Placeholder="[email protected]"
253-
AnnotationColor="Accent"
254-
ValidationMessage="Please type a valid email address"
255-
IconImage="ic_email_black_24dp.png"
256-
MinLength="10"
257-
MaxLength="50"
258-
/>
259-
260-
<input:AdvancedEntry
261-
Text="{Binding NameSurname}"
262-
IsRequired="True"
263-
Title="Place your name below:"
264-
Annotation="NameSurname"
265-
Placeholder="John Doe"
266-
AnnotationColor="Accent"
267-
ValidationMessage="Please type your name correctly"
268-
IconImage="ic_account_circle_black_24dp.png"
269-
MinLength="5"
270-
MaxLength="30"
271-
/>
272-
273-
<input:AdvancedEntry
274-
Text="{Binding Phone}"
275-
IsRequired="True"
276-
Title="Place your phone number below:"
277-
Annotation="Phone"
278-
Placeholder="5439998877"
279-
AnnotationColor="Accent"
280-
ValidationMessage="Please type your phone number correctly"
281-
IconImage="ic_account_circle_black_24dp.png"
282-
MaxLength="10"
283-
/>
284-
285-
<Button Command="{Binding SubmitCommand}" Text="Submit" BackgroundColor="Accent" CornerRadius="20" TextColor="White" />
286-
</input:FormView>
287-
</StackLayout>
288-
```
289182
<a href="#"><img src="https://media.giphy.com/media/1zl0u7O2doNolIXnrT/giphy.gif" width="270" height="480" alt="Xamarin Forms Slider Sticky Label" class="aligncenter size-medium" /></a>
290183

291184
<h4>PROPERTIES:</h4>
@@ -347,8 +240,9 @@ You can set validation message and AnnotatinColor. Entry will automaticly displa
347240
</ul>
348241
<hr />
349242

350-
<h2>SelectionView</h2>
351-
<p>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>
243+
## SelectionView
244+
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>
245+
352246
<h4>SAMPLE:</h4>
353247

354248
```xaml

‎docs/PredefinedShapes.md‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
# InputKit: Predefined Shapes
2+
3+
Inputkit provides a collection of predefined shapes that can be used as an icon for controls or they can be used standalone.
4+
5+
6+
## Usage
7+
You can access Predefined Shapes from anywhere in your code by using static members of `PredefinedShapes` class.
8+
9+
Following shapes are available:
10+
11+
- `PredefinedShapes.Check`
12+
- `CheckCircle`
13+
- `Line`
14+
- `Square`
15+
- `Dot`
16+
17+
You can use these shapes in XAML like below:
18+
19+
```xml
20+
<Path
21+
Fill="Black"
22+
Data="{x:Static input:PredefinedShapes.CheckCircle}"/>
23+
```
24+
25+
List of all available shapes:
26+
27+
```xml
28+
<Path
29+
Fill="Blue"
30+
Stroke="Lime"
31+
StrokeThickness="2"
32+
Data="{x:Static input:PredefinedShapes.CheckCircle}"/>
33+
34+
35+
<Path
36+
Fill="Red"
37+
Stroke="Pink"
38+
StrokeThickness="2"
39+
Data="{x:Static input:PredefinedShapes.Check}"/>
40+
41+
42+
<Path
43+
Fill="Brown"
44+
Stroke="Orange"
45+
StrokeThickness="2"
46+
Data="{x:Static input:PredefinedShapes.Line}"/>
47+
48+
<Path
49+
Fill="Aqua"
50+
Stroke="Black"
51+
StrokeThickness="2"
52+
Data="{x:Static input:PredefinedShapes.Dot}"/>
53+
54+
<Path
55+
Fill="Purple"
56+
Stroke="Gold"
57+
StrokeThickness="2"
58+
Data="{x:Static input:PredefinedShapes.Square}"/>
59+
```
60+
61+
![maui-predefined-shapes checkbox check line dot square](images/predefined-shapes-all.png)

0 commit comments

Comments
 (0)