930801 [Dev] Revamp the UG documentation of .NET MAUI toolkit controls NumericEntry, NumericUpDown and Button.

maui-toolkit/Button/Customization.md

@@ -3,7 +3,7 @@ layout: post
 title: Customization in .NET MAUI Button control | Syncfusion®
 description: Learn here all about Customization support in Syncfusion® .NET MAUI Button (SfButton) control and more.
 platform: maui
-control: Sfbutton
+control: SfButton
 documentation: ug
 ---
 
@@ -22,8 +22,8 @@ The [`TextColor`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.To
 {% tabs %}
 {% highlight xaml %}
 
-<button:SfButton x:Name="button" Text="Button" TextColor = "White" CornerRadius="10">
-</button:SfButton>
+<buttons:SfButton x:Name="button" WidthRequest="200" Text="Button" TextColor = "White" CornerRadius="10">
+</buttons:SfButton>
 
 {% endhighlight %}
 {% highlight c# %}
@@ -45,8 +45,8 @@ The [`FontSize`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Too
 {% tabs %}
 {% highlight xaml %}
 
-<button:SfButton x:Name="button" Text="Button" FontSize = "18" CornerRadius="10">
-</button:SfButton>
+<buttons:SfButton x:Name="button" WidthRequest="150" HeightRequest="40" Text="Button" FontSize = "18" CornerRadius="10">
+</buttons:SfButton>
 
 {% endhighlight %}
 {% highlight c# %}
@@ -68,8 +68,9 @@ The [`FontAttributes`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Ma
 {% tabs %}
 {% highlight xaml %}
 
-<button:SfButton x:Name="button" Text="Button" FontAttributes = "Italic" CornerRadius="10">
-</button:SfButton>
+<buttons:SfButton x:Name="button" Text="Button" WidthRequest="150" HeightRequest="40"
+                  FontAttributes = "Italic" CornerRadius="10">
+</buttons:SfButton>
 
 {% endhighlight %}
 {% highlight c# %}
@@ -91,8 +92,9 @@ The [`FontFamily`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.T
 {% tabs %}
 {% highlight xaml %}
 
-<button:SfButton x:Name="button" Text="Button" FontFamily = "Samantha-Demo" CornerRadius="10">
-</button:SfButton>
+<buttons:SfButton x:Name="button" Text="Button" WidthRequest="150" HeightRequest="40"
+                  FontFamily = "Samantha-Demo" CornerRadius="10">
+</buttons:SfButton>
 
 {% endhighlight %}
 {% highlight c# %}
@@ -114,8 +116,9 @@ The [`HorizontalTextAlignment`](https://help.syncfusion.com/cr/maui-toolkit/Sync
 {% tabs %}
 {% highlight xaml %}
 
-<button:SfButton x:Name="button" Text="Button" HorizontalTextAlignment="Center" VerticalTextAlignment="Center">
-</button:SfButton>
+<buttons:SfButton x:Name="button" WidthRequest="150" HeightRequest="40"
+                  Text="Button" HorizontalTextAlignment="Center" VerticalTextAlignment="Center">
+</buttons:SfButton>
 
 {% endhighlight %}
 {% highlight c# %}
@@ -135,12 +138,14 @@ Users can now customize the [`SfButton`](https://help.syncfusion.com/cr/maui-too
 {% tabs %}
 {% highlight xaml %}
 
-<button:SfButton x:Name="button" 
+<buttons:SfButton x:Name="button" 
                  Text="Submit" 
                  TextTransform="Uppercase" 
+                 WidthRequest="150" 
+                 HeightRequest="40"
                  HorizontalTextAlignment="Center" 
                  VerticalTextAlignment="Center">
-</button:SfButton>
+</buttons:SfButton>
 
 {% endhighlight %}
 {% highlight c# %}
@@ -169,8 +174,9 @@ The [`LineBreakMode`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Mau
  {% tabs %}
 {% highlight xaml %}
 
-<button:SfButton x:Name="button" Text="Add Items To Cart" LineBreakMode="MiddleTruncation" ImageSource="Cart.png">
-</button:SfButton>
+<buttons:SfButton x:Name="button" Text="Add Items To Cart" WidthRequest="150" HeightRequest="40"
+                  LineBreakMode="MiddleTruncation" ImageSource="Cart.png">
+</buttons:SfButton>
 
 {% endhighlight %}
 {% highlight c# %}
@@ -196,8 +202,9 @@ The [`Background`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.T
 {% tabs %}
 {% highlight xaml %}
 
-<button:SfButton x:Name="button" Text="Button" Background = "DeepSkyBlue" CornerRadius="10">
-</button:SfButton>
+<buttons:SfButton x:Name="button" Text="Button" WidthRequest="150" HeightRequest="40" 
+                  Background = "DeepSkyBlue" CornerRadius="10">
+</buttons:SfButton>
 
 {% endhighlight %}
 {% highlight c# %}
@@ -221,8 +228,8 @@ The [`Stroke`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolk
 {% tabs %}
 {% highlight xaml %}
 
-<button:SfButton x:Name="button" Text="Button" Stroke="Red" CornerRadius="10">
-</button:SfButton>
+<buttons:SfButton x:Name="button" Text="Button" Stroke="Red" CornerRadius="10">
+</buttons:SfButton>
 
 {% endhighlight %}
 {% highlight c# %}
@@ -244,8 +251,8 @@ The [`StrokeThickness`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.M
 {% tabs %}
 {% highlight xaml %}
 
-<button:SfButton x:Name="button" Text="Button" Stroke="Red" StrokeThickness="6" CornerRadius="10">
-</button:SfButton>
+<buttons:SfButton x:Name="button" Text="Button" Stroke="Red" StrokeThickness="6" CornerRadius="10">
+</buttons:SfButton>
 
 {% endhighlight %}
 {% highlight c# %}
@@ -268,8 +275,8 @@ The [`CornerRadius`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui
 {% tabs %}
 {% highlight xaml %}
 
-<button:SfButton x:Name="button" Text="Button" CornerRadius="20">
-</button:SfButton>
+<buttons:SfButton x:Name="button" Text="Button" CornerRadius="20" WidthRequest="150" HeightRequest="40">
+</buttons:SfButton>
 
 {% endhighlight %}
 {% highlight c# %}
@@ -294,8 +301,8 @@ You can enable the Icon image using the [`ShowIcon`](https://help.syncfusion.com
 {% tabs %}
 {% highlight xaml %}
 
-<button:SfButton x:Name="button" Text="Button" ImageSource="Heart.png" ShowIcon="True">
-</button:SfButton>
+<buttons:SfButton x:Name="button" Text="Button" ImageSource="Heart.png" ShowIcon="True" WidthRequest="150" HeightRequest="40">
+</buttons:SfButton>
 
 {% endhighlight %}
 {% highlight c# %}
@@ -317,8 +324,8 @@ N> Enable the [`ShowIcon`]() property to enable the [`ImageSource`](https://help
 {% tabs %}
 {% highlight xaml %}
 
-<button:SfButton x:Name="button" Text="Button" ImageSource="Heart.png" ShowIcon="True" CornerRadius="2">
-</button:SfButton>
+<buttons:SfButton x:Name="button" Text="Button" ImageSource="Heart.png" ShowIcon="True" CornerRadius="2" WidthRequest="150" HeightRequest="40">
+</buttons:SfButton>
 
 {% endhighlight %}
 {% highlight c# %}
@@ -343,8 +350,8 @@ N> Enable the `ShowIcon` property to enable the `ImageSize` property.
 {% tabs %}
 {% highlight xaml %}
 
-<button:SfButton x:Name="button" Text="Button" ImageSource="Heart.png" ShowIcon="True" ImageSize="50">
-</button:SfButton>
+<buttons:SfButton x:Name="button" Text="Button" ImageSource="Heart.png" ShowIcon="True" ImageSize="50" WidthRequest="150" HeightRequest="40">
+</buttons:SfButton>
 
 {% endhighlight %}
 {% highlight c# %}
@@ -379,10 +386,12 @@ N> Enable the `ShowIcon` property to enable the `ImageAlignment` property.
 
 <buttons:SfButton x:Name="button" 
                 Text="Shopping"
+                WidthRequest="150"
+                HeightRequest="40"
                 TextColor="Black"
                 HorizontalOptions="Center"
                 ImageSource="add_to_card.png"
-                ShowIcon="True" 
+                ShowIcon="True"
                 ImageSize="25"
                 Stroke="Black"
                 CornerRadius="10"
@@ -418,6 +427,8 @@ SfButton button = new SfButton()
 
 <buttons:SfButton  x:Name="button"
                     Text="Shopping"
+                    WidthRequest="150"
+                    HeightRequest="40"
                     TextColor="Black"
                     HorizontalOptions="Center"
                     ImageSource="add_to_card.png"
@@ -458,6 +469,8 @@ SfButton button = new SfButton()
 
 <buttons:SfButton x:Name="button" 
                 Text="Shopping"
+                WidthRequest="150"
+                HeightRequest="40"
                 TextColor="Black"
                 HorizontalOptions="Center"
                 ImageSource="add_to_card.png"
@@ -498,6 +511,8 @@ SfButton button = new SfButton()
 
 <buttons:SfButton x:Name="button" 
                 Text="Shopping"
+                WidthRequest="150"
+                HeightRequest="40"
                 TextColor="Black"
                 HorizontalOptions="Center"
                 ImageSource="add_to_card.png"
@@ -538,6 +553,8 @@ SfButton button = new SfButton()
 
 <buttons:SfButton x:Name="button" 
                 Text="Shopping"
+                WidthRequest="150"
+                HeightRequest="40"
                 TextColor="Black"
                 HorizontalOptions="Center"
                 ImageSource="add_to_card.png"
@@ -740,7 +757,7 @@ The [EnableRippleEffect](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.
 {% tabs %}
 {% highlight xaml %}
 
-<button:SfButton x:Name="button" Text="Button" EnableRippleEffect="True" />
+<buttons:SfButton x:Name="button" Text="Button" EnableRippleEffect="True" />
 
 {% endhighlight %}
 {% highlight c# %}
@@ -767,11 +784,11 @@ N> Default value is [`null`].
     <local:CommandDemoViewModel />
  </ContentPage.BindingContext>
 
-<button:SfButton x:Name="button" 
+<buttons:SfButton x:Name="button" 
                 Text="Button" 
                 Background="{Binding Background}" 
                 Command="{Binding ButtonCommand}">
-</button:SfButton>
+</buttons:SfButton>
 
 {% endhighlight %}
 {% highlight c# %}

maui-toolkit/Button/Getting-Started.md

@@ -289,6 +289,8 @@ N> Ensure that the images mentioned in the code snippets are located in the **Re
 
 <buttons:SfButton x:Name="SfButton" 
                     Text="Button"
+                    WidthRequest="150"
+                    HeightRequest="40" 
                     TextColor="White" 
                     ShowIcon="True"
                     CornerRadius="2" 
@@ -299,6 +301,8 @@ N> Ensure that the images mentioned in the code snippets are located in the **Re
 
 SfButton button = new SfButton();
 button.Text = "Button";
+button.WidthRequest = 150;
+button.HeightRequest = 40;
 button.TextColor = Colors.White;
 button.ImageSource = "button_Heart.png";
 button.ShowIcon = true;
@@ -322,7 +326,8 @@ The button background image can be defined using the [BackgroundImageSource](htt
                     FontAttributes="Bold" 
                     BackgroundImageSource="button_background.png" 
                     CornerRadius="10" 
-                    WidthRequest="150"/>
+                    WidthRequest="150"
+                    HeightRequest="40"/>
 
 {% endhighlight %}
 {% highlight c# %}
@@ -333,6 +338,7 @@ button.FontAttributes = FontAttributes.Bold;
 button.BackgroundImageSource = "button_background.png";
 button.CornerRadius = 10;
 button.WidthRequest = 150;
+button.HeightRequest = 40;
 
 {% endhighlight %}
 {% endtabs %}

maui-toolkit/Button/Right-To-Left.md

@@ -15,6 +15,8 @@ documentation: ug
 {% highlight xaml %}
 
 <buttons:SfButton x:Name="button"
+                WidthRequest="150"
+                HeightRequest="40"
                 FlowDirection="RightToLeft"
                 ImageSource="add_to_card.png"
                 ShowIcon="True" 
@@ -24,6 +26,8 @@ documentation: ug
 {% highlight c# %}
 SfButton button = new SfButton()
 {
+    WidthRequest = 150,
+    HeightRequest = 40,
     FlowDirection = FlowDirection.RightToLeft,
     Text = "Add to cart",
     ImageSource = "add_to_card.png",

maui-toolkit/Button/Visual-States.md

@@ -35,7 +35,7 @@ N> The visual states [Checked](https://help.syncfusion.com/cr/maui-toolkit/Syncf
         <VisualStateGroup x:Name="CommonStates">
             <VisualState x:Name="Normal">
                 <VisualState.Setters>
-                    <Setter Property="Background" Value="Orange"/>
+                    <Setter Property="Background" Value="#6A4C9C"/>
                 </VisualState.Setters>
             </VisualState>
             <VisualState x:Name="Checked">

maui-toolkit/Button/how-to/Add-the-custom-view-for-button.md

@@ -16,16 +16,16 @@ You can customize the appearance of the button by adding your custom view in the
 
 
 <ContentPage.Content>
-    <button:SfButton  CornerRadius="10"  WidthRequest="120" Text="SfButton" Background="#4125BC">
-        <button:SfButton.Content>
+    <buttons:SfButton  CornerRadius="10"  WidthRequest="120" Text="SfButton" Background="#4125BC">
+        <buttons:SfButton.Content>
             <DataTemplate>
                 <HorizontalStackLayout Spacing = "8" Padding="5">
                     <ActivityIndicator Color = "White" IsRunning="True"/>
                     <Label Text = "Loading..." VerticalOptions="Center" TextColor="White"/>
                 </HorizontalStackLayout>
             </DataTemplate>
-        </button:SfButton.Content>
-    </button:SfButton>
+        </buttons:SfButton.Content>
+    </buttons:SfButton>
 </ContentPage.Content>
 
 {% endhighlight %}
@@ -57,10 +57,17 @@ SfButton button = new SfButton
 {
     Text = "SfButton",
     WidthRequest = 120,
+    HeightRequest = 50,
     Background = Color.FromArgb("#4125BC"),
     CornerRadius= 10,
     Content = customTemplate
 };
+
+Content = new VerticalStackLayout
+{
+    Children = { button },
+};
+
 {% endhighlight %}
 {% endtabs %}