Skip to content

Commit 8cd637c

Browse files
gonultasmfgonultasmf
committed
fix document
1 parent 2fa3edd commit 8cd637c

File tree

2 files changed

+164
-24
lines changed

2 files changed

+164
-24
lines changed

‎README.md

Lines changed: 82 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@ FmgLib.MauiMarkup provides extension methods for all properties provided for a V
1919
<details>
2020
<summary><b>Getting Started<b></summary>
2121

22+
<br>
23+
<br>
2224
### Creating a new FmgLib.MauiMarkup project from CLI
2325

2426
FmgLib provides a project template to start a new project with FmgLib.MauiMarkup.
@@ -42,11 +44,15 @@ Install the [FmgLib.MauiMarkup](https://www.nuget.org/packages/FmgLib.MauiMarkup
4244
```bash
4345
dotnet add package FmgLib.MauiMarkup
4446
```
47+
48+
<br>
4549
</details>
4650

4751
<details>
4852
<summary><b>XAML to FmgLib.MauiMarkup(C#)<b></summary>
4953

54+
<br>
55+
<br>
5056
If we were to write XAML code for the Image class, it would look like this:
5157
```xaml
5258
<Image
@@ -97,11 +103,15 @@ this
97103
)
98104
);
99105
```
106+
107+
<br>
100108
</details>
101109

102110
<details>
103111
<summary><b>How to assign object references<b></summary>
104112

113+
<br>
114+
<br>
105115
There are two main ways to assign objects in `FmgLib.MauiMarkup`:
106116

107117
- using the `Assign` method,
@@ -120,11 +130,15 @@ Button btnOk;
120130
new Button()
121131
.Assign(out btnOk);
122132
```
133+
134+
<br>
123135
</details>
124136

125137
<details>
126138
<summary><b>Attached properties<b></summary>
127139

140+
<br>
141+
<br>
128142
Attached properties are properties that are defined on a type but are intended to be used with instances of other types. In `FmgLib.MauiMarkup`, attached properties are matched with attached property fluent methods, allowing you to set their values in a more readable and fluent manner.
129143

130144
For example, if you want to set the `AbsoluteLayout.LayoutBounds` attached property on a Border object, you would create an instance of Border and then use the `AbsoluteLayoutBounds` fluent method to set its value, like this:
@@ -199,6 +213,8 @@ This would set the `AbsoluteLayout.LayoutBounds` attached property to the specif
199213
<details>
200214
<summary><b>Behaviors<b></summary>
201215

216+
<br>
217+
<br>
202218
In `FmgLib.MauiMarkup`, you can add functionality to user interface controls using behaviors. Behaviors allow you to add functionality to controls without having to subclass them.
203219

204220
You can add a behavior to a control by using the `Behaviors` method and passing in an instance of the behavior class. For example:
@@ -207,10 +223,14 @@ You can add a behavior to a control by using the `Behaviors` method and passing
207223
new Entry().Text("Click Item")
208224
.Behaviors(new YourCustomBehaviors());
209225
```
226+
227+
<br>
210228
</details>
211229
<details>
212230
<summary><b>Binding Converters<b></summary>
213231

232+
<br>
233+
<br>
214234
This code is an example of how to use binding converters in `FmgLib.MauiMarkup`.
215235

216236
A `CollectionView` is defined and for each item in the `MyNumbers` list, a label is created with text equal to the value of the item. The `BackgroundColor` property of the label is bound to the item using the `Convert` method, which takes in a function that converts the value of the item (an integer) to a color. In this case, the function checks if the number is even or odd, and returns either `Colors.Green` or `Colors.Yellow` based on the result.
@@ -243,11 +263,15 @@ public class CustomPage : ContentPage
243263
}
244264
}
245265
```
266+
267+
<br>
246268
</details>
247269

248270
<details>
249271
<summary><b>Event handlers<b></summary>
250272

273+
<br>
274+
<br>
251275
In Maui, you can add functionality to user interface controls by handling events. For each `EventHandler` in a `FmgLib.MauiMarkup` class, a fluent helper method is generated to make it easier to attach an event handler to the control.
252276

253277
For example, in the case of the `Clicked` event handler in the `Button` class, two fluent methods are generated:
@@ -300,11 +324,15 @@ new Button()
300324
```
301325

302326
This makes it easy to attach event handlers to controls in a concise and readable way.
327+
328+
<br>
303329
</details>
304330

305331
<details>
306332
<summary><b>Gesture Recognizers<b></summary>
307333

334+
<br>
335+
<br>
308336
The following gesture recognizers are available:
309337

310338
- `TapGestureRecognizer`
@@ -429,11 +457,15 @@ public class PointerGesturePage : ContentPage
429457
}
430458
}
431459
```
460+
461+
<br>
432462
</details>
433463

434464
<details>
435465
<summary><b>Gradients<b></summary>
436-
466+
467+
<br>
468+
<br>
437469
`FmgLib.MauiMarkup` provides a way to create visual effects using gradient brushes in curly braces. There are two defined types of gradient brushes:
438470

439471
- LinearGradientBrush
@@ -459,12 +491,15 @@ new Border()
459491
)
460492
)
461493
```
494+
495+
<br>
462496
</details>
463497

464498
<details>
465499
<summary><b>Grid Definition<b></summary>
466-
467-
500+
501+
<br>
502+
<br>
468503
The `Grid` element allows you to create complex, multi-row and multi-column layout using Row and Column definitions. You can define the number and size of the rows and columns using the `RowDefinitions` and `ColumnDefinitions` methods, respectively.
469504

470505
You can set the position of a child element within the grid using the `Row()`, `Column()`, `ColumnSpan()`, and `RowSpan()` methods. These methods match the attached properties `Grid.Row`, `Grid.Column`, `Grid.ColumnSpan`, and `Grid.RowSpan`, respectively.
@@ -514,12 +549,14 @@ new Grid()
514549
)
515550
```
516551

552+
<br>
517553
</details>
518554

519555
<details>
520556
<summary><b>ITextAlignment interface extension methods<b></summary>
521557

522-
#
558+
<br>
559+
<br>
523560

524561
In `FmgLib.MauiMarkup`, all classes that implement the `ITextAlignment` interface get the following extension methods:
525562

@@ -550,6 +587,7 @@ new Label().TextCenter()
550587

551588
This example centers the text both horizontally and vertically within the label's containing element.
552589

590+
<br>
553591
</details>
554592

555593
<details>
@@ -602,6 +640,8 @@ This example centers a Label inside a `StackLayout` container. You can use the s
602640
<details>
603641
<summary><b>Menus in FmgLib.MauiMarkup<b></summary>
604642

643+
<br>
644+
<br>
605645

606646
### Context menu
607647

@@ -692,12 +732,14 @@ public class MenuPage : ContentPage
692732
}
693733
```
694734

735+
<br>
695736
</details>
696737

697738
<details>
698739
<summary><b>Properties and Fluent Methods<b></summary>
699740

700-
741+
<br>
742+
<br>
701743
`FmgLib.MauiMarkup` provides a convenient way to set properties for UI elements by matching properties with fluent helper methods. This makes it easier and more readable to define the interface of your application.
702744

703745
Here is an example of using fluent methods to set properties on a `Label`:
@@ -720,11 +762,14 @@ new Label()
720762
.TextColor(e => e.OnLight(Colors.Black).OnDark(Colors.Teal))
721763
```
722764

765+
<br>
723766
</details>
724767

725768
<details>
726769
<summary><b>Property Bindings<b></summary>
727770

771+
<br>
772+
<br>
728773
`FmgLib.MauiMarkup` provides a simple way to bind properties of an element to a source, so that when the source changes, the property changes as well. You can bind a property by using the fluent method e.g. `Text()`, `TextColor()` etc. and then using lambda call the method `Path()` to specify the property you want to bind to.
729774

730775

@@ -754,11 +799,14 @@ In this example, the text property of the label is bound to the `Value` property
754799

755800
You can also bind a property to an object that is not part of the visual tree. This is useful when you have a separate data source, such as a model or a view model, that you want to bind to a visual element.
756801

802+
<br>
757803
</details>
758804

759805
<details>
760806
<summary><b>Property MultiBinding<b></summary>
761807

808+
<br>
809+
<br>
762810
You can easily use multibinding with FmgLib.MauiMarkup. You can add as many BindingBases as you want with the e.Bindings(...) method.
763811

764812
Example usage is as follows:
@@ -810,11 +858,14 @@ public partial class MainPage : ContentPage, IFmgLibHotReload
810858

811859
```
812860

861+
<br>
813862
</details>
814863

815864
<details>
816865
<summary><b>Shell Application<b></summary>
817866

867+
<br>
868+
<br>
818869
Here's an example of a simple shell-based application:
819870

820871
```csharp
@@ -885,12 +936,14 @@ public class ShellItemTemplate : ContentView
885936
}
886937
```
887938

939+
<br>
888940
</details>
889941

890942
<details>
891943
<summary><b>Application Styling<b></summary>
892944

893-
945+
<br>
946+
<br>
894947
`FmgLib.MauiMarkup` provides a way to define the styles of elements using the `Style<T>` class. Here's an example of how to define the style of a button:
895948

896949
```csharp
@@ -986,12 +1039,14 @@ new ResourceDictionary
9861039
};
9871040
```
9881041

1042+
<br>
9891043
</details>
9901044

9911045
<details>
9921046
<summary><b>User defined extension methods<b></summary>
9931047

994-
1048+
<br>
1049+
<br>
9951050
In `FmgLib:mauiMarkup`, you can create your own extension methods by defining a static method within a static class.
9961051

9971052
Here's an example of extension methods that set a label font size:
@@ -1064,11 +1119,14 @@ new Style<Label>(e => e
10641119

10651120
or use in an animation context.
10661121

1122+
<br>
10671123
</details>
10681124

10691125
<details>
10701126
<summary><b>Triggers<b></summary>
10711127

1128+
<br>
1129+
<br>
10721130
Triggers allow you to set properties in response to certain conditions or events.
10731131

10741132
### Property Triggers
@@ -1188,11 +1246,14 @@ public class NumericValidationTriggerAction : TriggerAction<Entry>
11881246
}
11891247
```
11901248

1249+
<br>
11911250
</details>
11921251

11931252
<details>
11941253
<summary><b>.NET built-in Hot-Reload<b></summary>
11951254

1255+
<br>
1256+
<br>
11961257
Additionally, the FmgLib.MauiMarkup library includes hot reload support to make the development process faster and more efficient.
11971258

11981259
If you want to enhance your page with fast reload, your page needs to implement the IFmgLibHotReload interface. Then, you should trigger the this.InitializeHotReload(); function within the constructor.
@@ -1224,12 +1285,14 @@ public partial class ExamplePage : ContentPage, IFmgLibHotReload
12241285
}
12251286
```
12261287

1288+
<br>
12271289
</details>
12281290

12291291
<details>
12301292
<summary><b>Extensions for 3rd Party Controls<b></summary>
1231-
1232-
1293+
1294+
<br>
1295+
<br>
12331296
FmgLib.MauiMarkup library can also generate extension methods for controls from third-party libraries. To achieve this, you should utilize the `MauiMarkupAttribute` provided by FmgLib.MauiMarkup.
12341297

12351298
Simply specify the control for which you want to create extension methods as `[MauiMarkup(typeof(YourControl))]`.
@@ -1501,12 +1564,14 @@ new Button()
15011564
.FormViewIsSubmitButton(true)
15021565
```
15031566

1567+
<br>
15041568
</details>
15051569

15061570
<details>
15071571
<summary><b>Localization (Json File)<b></summary>
15081572

1509-
1573+
<br>
1574+
<br>
15101575
In the MauiProgram.cs file,
15111576
```CSharp
15121577
builder
@@ -1595,12 +1660,14 @@ new VerticalStackLayout()
15951660
```
15961661
in the code.
15971662

1663+
<br>
15981664
</details>
15991665

16001666
<details>
16011667
<summary><b>Localization (Resx File)<b></summary>
1602-
1603-
1668+
1669+
<br>
1670+
<br>
16041671
In the MauiProgram.cs file,
16051672
```CSharp
16061673
builder
@@ -1654,11 +1721,14 @@ new VerticalStackLayout()
16541721
```
16551722
in the code.
16561723

1724+
<br>
16571725
</details>
16581726

16591727
<details>
16601728
<summary><b>General Example Code<b></summary>
16611729

1730+
<br>
1731+
<br>
16621732
```csharp
16631733

16641734
using Microsoft.Maui.Layouts;

0 commit comments

Comments
 (0)