diff --git a/maui-toolkit/Button/Customization.md b/maui-toolkit/Button/Customization.md index ed841e17..6e5100eb 100644 --- a/maui-toolkit/Button/Customization.md +++ b/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 %} - - + + {% endhighlight %} {% highlight c# %} @@ -45,8 +45,8 @@ The [`FontSize`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Too {% tabs %} {% highlight xaml %} - - + + {% endhighlight %} {% highlight c# %} @@ -68,8 +68,9 @@ The [`FontAttributes`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Ma {% tabs %} {% highlight xaml %} - - + + {% endhighlight %} {% highlight c# %} @@ -91,8 +92,9 @@ The [`FontFamily`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.T {% tabs %} {% highlight xaml %} - - + + {% endhighlight %} {% highlight c# %} @@ -114,8 +116,9 @@ The [`HorizontalTextAlignment`](https://help.syncfusion.com/cr/maui-toolkit/Sync {% tabs %} {% highlight xaml %} - - + + {% endhighlight %} {% highlight c# %} @@ -135,12 +138,14 @@ Users can now customize the [`SfButton`](https://help.syncfusion.com/cr/maui-too {% tabs %} {% highlight xaml %} - - + {% endhighlight %} {% highlight c# %} @@ -169,8 +174,9 @@ The [`LineBreakMode`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Mau {% tabs %} {% highlight xaml %} - - + + {% endhighlight %} {% highlight c# %} @@ -196,8 +202,9 @@ The [`Background`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.T {% tabs %} {% highlight xaml %} - - + + {% endhighlight %} {% highlight c# %} @@ -221,8 +228,8 @@ The [`Stroke`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolk {% tabs %} {% highlight xaml %} - - + + {% endhighlight %} {% highlight c# %} @@ -244,8 +251,8 @@ The [`StrokeThickness`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.M {% tabs %} {% highlight xaml %} - - + + {% endhighlight %} {% highlight c# %} @@ -268,8 +275,8 @@ The [`CornerRadius`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui {% tabs %} {% highlight xaml %} - - + + {% endhighlight %} {% highlight c# %} @@ -294,8 +301,8 @@ You can enable the Icon image using the [`ShowIcon`](https://help.syncfusion.com {% tabs %} {% highlight xaml %} - - + + {% endhighlight %} {% highlight c# %} @@ -317,8 +324,8 @@ N> Enable the [`ShowIcon`]() property to enable the [`ImageSource`](https://help {% tabs %} {% highlight xaml %} - - + + {% endhighlight %} {% highlight c# %} @@ -343,8 +350,8 @@ N> Enable the `ShowIcon` property to enable the `ImageSize` property. {% tabs %} {% highlight xaml %} - - + + {% endhighlight %} {% highlight c# %} @@ -379,10 +386,12 @@ N> Enable the `ShowIcon` property to enable the `ImageAlignment` property. + {% endhighlight %} {% highlight c# %} @@ -767,11 +784,11 @@ N> Default value is [`null`]. - - + {% endhighlight %} {% highlight c# %} diff --git a/maui-toolkit/Button/Getting-Started.md b/maui-toolkit/Button/Getting-Started.md index f65fcf0c..6a0bc89e 100644 --- a/maui-toolkit/Button/Getting-Started.md +++ b/maui-toolkit/Button/Getting-Started.md @@ -122,6 +122,8 @@ N> Ensure that the images mentioned in the code snippets are located in the **Re 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; @@ -155,7 +159,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# %} @@ -166,6 +171,7 @@ button.FontAttributes = FontAttributes.Bold; button.BackgroundImageSource = "button_background.png"; button.CornerRadius = 10; button.WidthRequest = 150; +button.HeightRequest = 40; {% endhighlight %} {% endtabs %} diff --git a/maui-toolkit/Button/Images/customization-images/Button_border.png b/maui-toolkit/Button/Images/customization-images/Button_border.png index a0d53536..5e893641 100644 Binary files a/maui-toolkit/Button/Images/customization-images/Button_border.png and b/maui-toolkit/Button/Images/customization-images/Button_border.png differ diff --git a/maui-toolkit/Button/Images/customization-images/Button_borderthickness.png b/maui-toolkit/Button/Images/customization-images/Button_borderthickness.png index 5455c51d..28183d3f 100644 Binary files a/maui-toolkit/Button/Images/customization-images/Button_borderthickness.png and b/maui-toolkit/Button/Images/customization-images/Button_borderthickness.png differ diff --git a/maui-toolkit/Button/Images/customization-images/Button_cornerradius.png b/maui-toolkit/Button/Images/customization-images/Button_cornerradius.png index f592125c..83a67a1d 100644 Binary files a/maui-toolkit/Button/Images/customization-images/Button_cornerradius.png and b/maui-toolkit/Button/Images/customization-images/Button_cornerradius.png differ diff --git a/maui-toolkit/Button/Images/customization-images/Button_fontattributes.png b/maui-toolkit/Button/Images/customization-images/Button_fontattributes.png index e42dd3dd..c4453476 100644 Binary files a/maui-toolkit/Button/Images/customization-images/Button_fontattributes.png and b/maui-toolkit/Button/Images/customization-images/Button_fontattributes.png differ diff --git a/maui-toolkit/Button/Images/customization-images/Button_fontsize.png b/maui-toolkit/Button/Images/customization-images/Button_fontsize.png index 18d98959..d7c23876 100644 Binary files a/maui-toolkit/Button/Images/customization-images/Button_fontsize.png and b/maui-toolkit/Button/Images/customization-images/Button_fontsize.png differ diff --git a/maui-toolkit/Button/Images/customization-images/Button_icon.png b/maui-toolkit/Button/Images/customization-images/Button_icon.png index b9c1ddff..f37b5139 100644 Binary files a/maui-toolkit/Button/Images/customization-images/Button_icon.png and b/maui-toolkit/Button/Images/customization-images/Button_icon.png differ diff --git a/maui-toolkit/Button/Images/customization-images/Button_textColor.png b/maui-toolkit/Button/Images/customization-images/Button_textColor.png index a54988f4..4d490ba9 100644 Binary files a/maui-toolkit/Button/Images/customization-images/Button_textColor.png and b/maui-toolkit/Button/Images/customization-images/Button_textColor.png differ diff --git a/maui-toolkit/Button/Images/getting-started/net-maui-button-with-icon.png b/maui-toolkit/Button/Images/getting-started/net-maui-button-with-icon.png index b9c1ddff..6eb55082 100644 Binary files a/maui-toolkit/Button/Images/getting-started/net-maui-button-with-icon.png and b/maui-toolkit/Button/Images/getting-started/net-maui-button-with-icon.png differ diff --git a/maui-toolkit/Button/Images/right-to-left/RTL.png b/maui-toolkit/Button/Images/right-to-left/RTL.png index 3114535e..6cb78d2b 100644 Binary files a/maui-toolkit/Button/Images/right-to-left/RTL.png and b/maui-toolkit/Button/Images/right-to-left/RTL.png differ diff --git a/maui-toolkit/Button/Right-To-Left.md b/maui-toolkit/Button/Right-To-Left.md index a58d9bf8..06bc4db5 100644 --- a/maui-toolkit/Button/Right-To-Left.md +++ b/maui-toolkit/Button/Right-To-Left.md @@ -15,6 +15,8 @@ documentation: ug {% highlight xaml %} The visual states [Checked](https://help.syncfusion.com/cr/maui-toolkit/Syncf - + diff --git a/maui-toolkit/Button/how-to/Add-the-custom-view-for-button.md b/maui-toolkit/Button/how-to/Add-the-custom-view-for-button.md index 084ea085..dc53f12d 100644 --- a/maui-toolkit/Button/how-to/Add-the-custom-view-for-button.md +++ b/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 - - + + - - + + {% 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 %} diff --git a/maui-toolkit/NumericEntry/Basic-Features.md b/maui-toolkit/NumericEntry/Basic-Features.md index 849f6b4b..206e2b7a 100644 --- a/maui-toolkit/NumericEntry/Basic-Features.md +++ b/maui-toolkit/NumericEntry/Basic-Features.md @@ -16,17 +16,19 @@ You can prompt the user with any information using the [Placeholder](https://hel {% tabs %} {% highlight xaml %} - + {% endhighlight %} {% highlight C# %} -SfNumberBox SfNumberBox= new SfNumberBox(); -SfNumberBox.Placeholder = "Enter input here..."; -sfNumberBox.HorizontalOptions = LayoutOptions.Center; -sfNumberBox.VerticalOptions = LayoutOptions.Center; +SfNumericEntry sfNumericEntry= new SfNumericEntry(); +sfNumericEntry.WidthRequest=200; +sfNumericEntry.Placeholder = "Enter input here..."; +sfNumericEntry.HorizontalOptions = LayoutOptions.Center; +sfNumericEntry.VerticalOptions = LayoutOptions.Center; {% endhighlight %} {% endtabs %} @@ -41,7 +43,8 @@ N> The clear button appears only when the text box is focused and the `IsEditabl {% tabs %} {% highlight xaml %} - @@ -49,7 +52,8 @@ N> The clear button appears only when the text box is focused and the `IsEditabl {% endhighlight %} {% highlight C# %} -SfNumericEntry sfNumericEntry = new SfNumericEntry(); +SfNumericEntry sfNumericEntry= new SfNumericEntry(); +sfNumericEntry.WidthRequest=200; sfNumricEntry.Value=10; sfNumericEntry.ShowClearButton = true; sfNumericEntry.IsEditable = true; @@ -157,7 +161,8 @@ The NumericEntry border color can be changed by using the [Stroke]() property. T {% tabs %} {% highlight xaml %} - @@ -165,6 +170,7 @@ The NumericEntry border color can be changed by using the [Stroke]() property. T {% highlight C# %} SfNumericEntry sfNumericEntry = new SfNumericEntry(); +sfNumericEntry.WidthRequest=200; sfNumericEntry.HorizontalOptions = LayoutOptions.Center; sfNumericEntry.VerticalOptions = LayoutOptions.Center; sfNumericEntry.Stroke = Colors.Red; @@ -249,6 +255,7 @@ N> Default value of ReturnType is `Default`. {% highlight C# %} SfNumericEntry sfNumericEntry = new SfNumericEntry(); +sfNumericEntry.WidthRequest=200; sfNumericEntry.ReturnType = ReturnType.Next; {% endhighlight %} @@ -264,6 +271,7 @@ The [ClearButtonPath](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Mau {% highlight xaml %} @@ -288,6 +296,7 @@ var path = new Path() }; SfNumericEntry numericEntry = new SfNumericEntry(); +numericEntry.WidthRequest=200; numricEntry.Value=10; numericEntry.ShowClearButton = true; numericEntry.IsEditable = true; @@ -313,6 +322,7 @@ The following image illustrates the result of the above code: @@ -322,6 +332,7 @@ The following image illustrates the result of the above code: var viewModel = new CommandDemoViewModel(); SfNumericEntry numericEntry = new SfNumericEntry(); +numericEntry.WidthRequest=200; numericEntry.ReturnCommand = viewModel.AlertCommand; numericEntry.ReturnCommandParameter = "Return key is pressed"; diff --git a/maui-toolkit/NumericEntry/Events.md b/maui-toolkit/NumericEntry/Events.md index adc61a46..0b345103 100644 --- a/maui-toolkit/NumericEntry/Events.md +++ b/maui-toolkit/NumericEntry/Events.md @@ -21,7 +21,8 @@ The [ValueChanged](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.T {% tabs %} {% highlight xaml %} - @@ -29,6 +30,7 @@ The [ValueChanged](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.T {% highlight C# %} SfNumericEntry sfNumericEntry = new SfNumericEntry(); +sfNumericEntry.WidthRequest=200; sfNumericEntry.HorizontalOptions = LayoutOptions.Center; sfNumericEntry.VerticalOptions = LayoutOptions.Center; sfNumericEntry.ValueChanged += sfNumericEntry_ValueChanged; @@ -57,7 +59,8 @@ The `NumericEntry` control includes a [Completed](https://help.syncfusion.com/cr {% tabs %} {% highlight xaml %} - @@ -65,6 +68,7 @@ The `NumericEntry` control includes a [Completed](https://help.syncfusion.com/cr {% highlight C# %} SfNumericEntry sfNumericEntry = new SfNumericEntry(); +sfNumericEntry.WidthRequest=200; sfNumericEntry.HorizontalOptions = LayoutOptions.Center; sfNumericEntry.VerticalOptions = LayoutOptions.Center; sfNumericEntry.Completed += sfNumericEntry_Completed; diff --git a/maui-toolkit/NumericEntry/Formatting.md b/maui-toolkit/NumericEntry/Formatting.md index 0093f663..4c55e3db 100644 --- a/maui-toolkit/NumericEntry/Formatting.md +++ b/maui-toolkit/NumericEntry/Formatting.md @@ -25,25 +25,37 @@ N> You can apply various custom formats available in [this page](), which are s {% highlight xaml %} // Format stock price in currency. - + // Format product discount in percent. - + // Format worked hours in decimal. - + {% endhighlight %} {% highlight c# %} // Format stock price in currency. -stockPrice.CustomFormat = "C2"; +SfNumericEntry stockPrice = new SfNumericEntry +{ + CustomFormat = "C2", + WidthRequest = 200 +}; // Format product discount in percent. -productDiscount.CustomFormat = "P2"; +SfNumericEntry productDiscount = new SfNumericEntry +{ + CustomFormat = "P2", + WidthRequest = 200 +}; // Format worked hours in decimal. -hoursWorked.CustomFormat = "N2"; +SfNumericEntry hoursWorked = new SfNumericEntry +{ + CustomFormat = "N2", + WidthRequest = 200 +}; {% endhighlight %} {% endtabs %} @@ -62,25 +74,37 @@ N> **0** (Zero placeholder) replaces the zero with the corresponding digit prese {% highlight xaml %} // Format stock price in currency. - + // Format product discount in percentage. - + // Format worked hours in decimal. - + {% endhighlight %} {% highlight c# %} // Format stock price in currency. -stockPrice.CustomFormat = "$00000.00"; +SfNumericEntry stockPrice = new SfNumericEntry +{ + CustomFormat = "$00000.00", + WidthRequest = 200 +}; // Format product discount in percentage. -productDiscount.CustomFormat = "00000.00%"; +SfNumericEntry productDiscount = new SfNumericEntry +{ + CustomFormat = "00000.00%", + WidthRequest = 200 +}; // Format worked hours in decimal. -hoursWorked.CustomFormat = "00000.00"; +SfNumericEntry hoursWorked = new SfNumericEntry +{ + CustomFormat = "00000.00", + WidthRequest = 200 +}; {% endhighlight %} {% endtabs %} @@ -98,16 +122,30 @@ N> **0** (Zero placeholder) replaces the zero with the corresponding digit in th {% tabs %} {% highlight xaml %} - - - + + + {% endhighlight %} {% highlight c# %} -stockPrice.CustomFormat = "$000.000"; -productDiscount.CustomFormat = "00.000%"; -hoursWorked.CustomFormat = "00.000"; +SfNumericEntry stockPrice = new SfNumericEntry +{ + CustomFormat = "$000.000", + WidthRequest = 200 +}; + +SfNumericEntry productDiscount = new SfNumericEntry +{ + CustomFormat = "00.000%", + WidthRequest = 200 +}; + +SfNumericEntry hoursWorked = new SfNumericEntry +{ + CustomFormat = "00.000", + WidthRequest = 200 +}; {% endhighlight %} {% endtabs %} @@ -127,16 +165,30 @@ In the following example, the value of the `CustomFormat` property is **#.00##** {% tabs %} {% highlight xaml %} - - - + + + {% endhighlight %} {% highlight c# %} -stockPrice.CustomFormat = "$00.00##"; -productDiscount.CustomFormat = "00.00##%"; -hoursWorked.CustomFormat = "00.00##"; +SfNumericEntry stockPrice = new SfNumericEntry +{ + CustomFormat = "$00.00##", + WidthRequest = 200 +}; + +SfNumericEntry productDiscount = new SfNumericEntry +{ + CustomFormat = "00.00##%", + WidthRequest = 200 +}; + +SfNumericEntry hoursWorked = new SfNumericEntry +{ + CustomFormat = "00.00##", + WidthRequest = 200 +}; {% endhighlight %} {% endtabs %} @@ -169,6 +221,7 @@ When the [SfNumericEntry](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion {% highlight xaml %} @@ -178,7 +231,7 @@ When the [SfNumericEntry](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion {% highlight C# %} SfNumericEntry sfNumericEntry= new SfNumericEntry(); -SfNumericEntry sfNumericEntry = new SfNumericEntry(); +sfNumericUpDown.WidthRequest = 200; sfNumericEntry.Value = 1000; sfNumericEntry.CustomFormat = "p"; sfNumericEntry.PercentDisplayMode = PercentDisplayMode.Value; @@ -193,7 +246,8 @@ sfNumericEntry.PercentDisplayMode = PercentDisplayMode.Value; {% tabs %} {% highlight xaml %} - @@ -203,6 +257,7 @@ sfNumericEntry.PercentDisplayMode = PercentDisplayMode.Value; {% highlight C# %} SfNumericEntry sfNumericEntry= new SfNumericEntry(); +sfNumericUpDown.WidthRequest = 200; sfNumericEntry.Value = 1000; sfNumericEntry.CustomFormat = "p"; sfNumericEntry.PercentDisplayMode = PercentDisplayMode.Compute; @@ -224,6 +279,7 @@ N> The `MaximumNumberDecimalDigits` property can only be set to a positive value {% highlight xaml %} @@ -232,6 +288,7 @@ N> The `MaximumNumberDecimalDigits` property can only be set to a positive value {% highlight C# %} SfNumericEntry sfNumericEntry= new SfNumericEntry(); +sfNumericUpDown.WidthRequest = 200; sfNumericEntry.Value = 1000.23232; sfNumericEntry.MaximumNumberDecimalDigits = 3; diff --git a/maui-toolkit/NumericEntry/Getting-Started.md b/maui-toolkit/NumericEntry/Getting-Started.md index d133e75a..ea8e26af 100644 --- a/maui-toolkit/NumericEntry/Getting-Started.md +++ b/maui-toolkit/NumericEntry/Getting-Started.md @@ -121,7 +121,8 @@ This ensures that only valid numeric input is accepted and displayed according t {% tabs %} {% highlight xaml %} - @@ -129,6 +130,7 @@ This ensures that only valid numeric input is accepted and displayed according t {% highlight C# %} SfNumericEntry sfNumericEntry = new SfNumericEntry(); +sfNumericEntry.WidthRequest=200; sfNumericEntry.HorizontalOptions = LayoutOptions.Center; sfNumericEntry.VerticalOptions = LayoutOptions.Center; sfNumericEntry.CustomFormat = "0.000"; @@ -145,7 +147,8 @@ You can change the format in which the value should be displayed using the [Cust {% tabs %} {% highlight xaml %} - @@ -153,11 +156,12 @@ You can change the format in which the value should be displayed using the [Cust {% endhighlight %} {% highlight C# %} -SfNumberBox sfNumberBox = new SfNumberBox(); -sfNumberBox.HorizontalOptions = LayoutOptions.Center; -sfNumberBox.VerticalOptions = LayoutOptions.Center; -sfNumberBox.Value = 12.5; -sfNumberBox.CustomFormat = "C2"; +SfNumericEntry sfNumericEntry = new SfNumericEntry(); +sfNumericEntry.WidthRequest=200; +sfNumericEntry.HorizontalOptions = LayoutOptions.Center; +sfNumericEntry.VerticalOptions = LayoutOptions.Center; +sfNumericEntry.Value = 12.5; +sfNumericEntry.CustomFormat = "C2"; {% endhighlight %} {% endtabs %} @@ -171,7 +175,8 @@ By default, the [NumericEntry](https://help.syncfusion.com/cr/maui-toolkit/Syncf {% tabs %} {% highlight xaml %} - @@ -180,6 +185,7 @@ By default, the [NumericEntry](https://help.syncfusion.com/cr/maui-toolkit/Syncf {% highlight C# %} SfNumericEntry sfNumericEntry = new SfNumericEntry(); +sfNumericEntry.WidthRequest=200; sfNumericEntry.Value=12315; sfNumericEntry.HorizontalOptions = LayoutOptions.Center; sfNumericEntry.VerticalOptions = LayoutOptions.Center; diff --git a/maui-toolkit/NumericEntry/Restriction.md b/maui-toolkit/NumericEntry/Restriction.md index 4a9345c8..b903e79b 100644 --- a/maui-toolkit/NumericEntry/Restriction.md +++ b/maui-toolkit/NumericEntry/Restriction.md @@ -22,7 +22,8 @@ N> When the value of the Minimum property is **15**, and the `AllowNull` propert {% tabs %} {% highlight xaml %} - @@ -31,6 +32,7 @@ N> When the value of the Minimum property is **15**, and the `AllowNull` propert {% highlight C# %} SfNumericEntry sfNumericEntry = new SfNumericEntry(); +sfNumericEntry.WidthRequest=200; sfNumeriCEntry.HorizontalOptions = LayoutOptions.Center; sfNumericEntry.VerticalOptions = LayoutOptions.Center; sfNumericEntry.Value = 10; @@ -48,7 +50,8 @@ You can restrict the users to enter input within a minimum and maximum range in {% tabs %} {% highlight xaml %} - @@ -87,6 +92,7 @@ You can prevent users from editing the numerical value in the editor using the [ {% highlight C# %} SfNumericEntry sfNumericEntry = new SfNumericEntry(); +sfNumericEntry.WidthRequest=200; sfNumericEntry.HorizontalOptions = LayoutOptions.Center; sfNumericEntry.VerticalOptions = LayoutOptions.Center; sfNumericEntry.IsEditable = true; diff --git a/maui-toolkit/NumericUpDown/Basic-Features.md b/maui-toolkit/NumericUpDown/Basic-Features.md index 14d93964..99f6f55c 100644 --- a/maui-toolkit/NumericUpDown/Basic-Features.md +++ b/maui-toolkit/NumericUpDown/Basic-Features.md @@ -16,7 +16,8 @@ You can prompt the user with any information using the [Placeholder](https://hel {% tabs %} {% highlight xaml %} - @@ -24,6 +25,7 @@ You can prompt the user with any information using the [Placeholder](https://hel {% highlight C# %} SfNumericUpDown numericUpDown= new SfNumericUpDown(); +numericUpDown.WidthRequest = 200; numericUpDown.Placeholder = "Enter input here..."; numericUpDown.HorizontalOptions = LayoutOptions.Center; numericUpDown.VerticalOptions = LayoutOptions.Center; @@ -41,7 +43,8 @@ N> The clear button appears only when the text box is focused and the `IsEditabl {% tabs %} {% highlight xaml %} - @@ -50,6 +53,7 @@ N> The clear button appears only when the text box is focused and the `IsEditabl {% highlight C# %} SfNumericUpDown sfNumericUpDown = new SfNumericUpDown(); +sfNumericUpDown.WidthRequest = 200; sfNumericUpDown.Value=10; sfNumericUpDown.ShowClearButton = true; sfNumericUpDown.IsEditable = true; @@ -113,7 +117,7 @@ public partial class MainPage : ContentPage WidthRequest = 200, HeightRequest = 40, VerticalOptions = LayoutOptions.Center, - ValueChangeMode = ValueChangeMode.OnKeyFocus, + ValueChangeMode = Syncfusion.Maui.Toolkit.NumericEntry.ValueChangeMode.OnKeyFocus, Value = 50 }; var horizontalStackLayout = new StackLayout @@ -139,7 +143,7 @@ public partial class MainPage : ContentPage Content = verticalStackLayout; } - private void NumericUpDown_ValueChanged(object sender, NumericUpDownValueChangedEventArgs e) + private void NumericUpDown_ValueChanged(object? sender, Syncfusion.Maui.Toolkit.NumericEntry.NumericEntryValueChangedEventArgs e) { valueDisplay.Text="$"+e.NewValue.ToString(); } @@ -157,7 +161,8 @@ The NumericUpDown border color can be changed by using the [Stroke](https://help {% tabs %} {% highlight xaml %} - @@ -165,6 +170,7 @@ The NumericUpDown border color can be changed by using the [Stroke](https://help {% highlight C# %} SfNumericUpDown sfNumericUpDown = new SfNumericUpDown(); +sfNumericUpDown.WidthRequest = 200; sfNumericUpDown.HorizontalOptions = LayoutOptions.Center; sfNumericUpDown.VerticalOptions = LayoutOptions.Center; sfNumericUpDown.Stroke = Colors.Red; @@ -247,6 +253,7 @@ N> Default value of ReturnType is `Default`. {% highlight C# %} SfNumericUpDown sfNumericUpDown = new SfNumericUpDown(); +sfNumericUpDown.WidthRequest = 200; sfNumericUpDown.ReturnType = ReturnType.Next; {% endhighlight %} @@ -262,6 +269,7 @@ The `ClearButtonPath` property allows users to set the path for customizing the {% highlight xaml %} @@ -286,6 +294,7 @@ var path = new Path() }; SfNumericUpDown numericUpDown = new SfNumericUpDown(); +numericUpDown.WidthRequest = 200; numericUpDown.Value=10; numericUpDown.ShowClearButton = true; numericUpDown.IsEditable = true; @@ -311,6 +320,7 @@ The following image illustrates the result of the above code: @@ -320,6 +330,7 @@ The following image illustrates the result of the above code: var viewModel = new CommandDemoViewModel(); SfNumericUpDown NumericUpDown = new SfNumericUpDown(); +NumericUpDown.WidthRequest = 200; NumericUpDown.ReturnCommand = viewModel.AlertCommand; NumericUpDown.ReturnCommandParameter = "Return key is pressed"; diff --git a/maui-toolkit/NumericUpDown/Events.md b/maui-toolkit/NumericUpDown/Events.md index b07c8102..29ec50fe 100644 --- a/maui-toolkit/NumericUpDown/Events.md +++ b/maui-toolkit/NumericUpDown/Events.md @@ -21,7 +21,8 @@ The [ValueChanged](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.T {% tabs %} {% highlight xaml %} - @@ -29,6 +30,7 @@ The [ValueChanged](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.T {% highlight C# %} SfNumericUpDown sfNumericUpDown = new SfNumericUpDown(); +sfNumericUpDown.WidthRequest = 200; sfNumericUpDown.HorizontalOptions = LayoutOptions.Center; sfNumericUpDown.VerticalOptions = LayoutOptions.Center; sfNumericUpDown.ValueChanged += sfNumericUpDown_ValueChanged; @@ -57,7 +59,8 @@ The `NumericUpDown` control includes a [Completed](https://help.syncfusion.com/c {% tabs %} {% highlight xaml %} - @@ -65,6 +68,7 @@ The `NumericUpDown` control includes a [Completed](https://help.syncfusion.com/c {% highlight C# %} SfNumericUpDown sfNumericUpDown = new SfNumericUpDown(); +sfNumericUpDown.WidthRequest = 200; sfNumericUpDown.HorizontalOptions = LayoutOptions.Center; sfNumericUpDown.VerticalOptions = LayoutOptions.Center; sfNumericUpDown.Completed += sfNumericUpDown_Completed; diff --git a/maui-toolkit/NumericUpDown/Formatting.md b/maui-toolkit/NumericUpDown/Formatting.md index be8bca18..0cbf2d18 100644 --- a/maui-toolkit/NumericUpDown/Formatting.md +++ b/maui-toolkit/NumericUpDown/Formatting.md @@ -25,25 +25,37 @@ N> You can apply various custom formats available in [this page](https://docs.m {% highlight xaml %} // Format stock price in currency. - + // Format product discount in percent. - + // Format worked hours in decimal. - + {% endhighlight %} {% highlight c# %} // Format stock price in currency. -stockPrice.CustomFormat = "C2"; +SfNumericUpDown stockPrice = new SfNumericUpDown +{ + CustomFormat = "C2", + WidthRequest = 200 +}; // Format product discount in percent. -productDiscount.CustomFormat = "P2"; +SfNumericUpDown productDiscount = new SfNumericUpDown +{ + CustomFormat = "P2", + WidthRequest = 200 +}; // Format worked hours in decimal. -hoursWorked.CustomFormat = "N2"; +SfNumericUpDown hoursWorked = new SfNumericUpDown +{ + CustomFormat = "N2", + WidthRequest = 200 +}; {% endhighlight %} {% endtabs %} @@ -62,25 +74,37 @@ N> **0** (Zero placeholder) replaces the zero with the corresponding digit prese {% highlight xaml %} // Format stock price in currency. - + // Format product discount in percentage. - + // Format worked hours in decimal. - + {% endhighlight %} {% highlight c# %} // Format stock price in currency. -stockPrice.CustomFormat = "$00000.00"; +SfNumericUpDown stockPrice = new SfNumericUpDown +{ + CustomFormat = "$00000.00", + WidthRequest = 200 +}; // Format product discount in percentage. -productDiscount.CustomFormat = "00000.00%"; +SfNumericUpDown productDiscount = new SfNumericUpDown +{ + CustomFormat = "00000.00%", + WidthRequest = 200 +}; // Format worked hours in decimal. -hoursWorked.CustomFormat = "00000.00"; +SfNumericUpDown hoursWorked = new SfNumericUpDown +{ + CustomFormat = "00000.00", + WidthRequest = 200 +}; {% endhighlight %} {% endtabs %} @@ -98,16 +122,30 @@ N> **0** (Zero placeholder) replaces the zero with the corresponding digit in th {% tabs %} {% highlight xaml %} - - - + + + {% endhighlight %} {% highlight c# %} -stockPrice.CustomFormat = "$000.000"; -productDiscount.CustomFormat = "00.000%"; -hoursWorked.CustomFormat = "00.000"; +SfNumericUpDown stockPrice = new SfNumericUpDown +{ + CustomFormat = "$000.000", + WidthRequest = 200 +}; + +SfNumericUpDown productDiscount = new SfNumericUpDown +{ + CustomFormat = "00.000%", + WidthRequest = 200 +}; + +SfNumericUpDown hoursWorked = new SfNumericUpDown +{ + CustomFormat = "00.000", + WidthRequest = 200 +}; {% endhighlight %} {% endtabs %} @@ -127,16 +165,30 @@ In the following example, the value of the `CustomFormat` property is **#.00##** {% tabs %} {% highlight xaml %} - - - + + + {% endhighlight %} {% highlight c# %} -stockPrice.CustomFormat = "$00.00##"; -productDiscount.CustomFormat = "00.00##%"; -hoursWorked.CustomFormat = "00.00##"; +SfNumericUpDown stockPrice = new SfNumericUpDown +{ + CustomFormat = "$00.00##", + WidthRequest = 200 +}; + +SfNumericUpDown productDiscount = new SfNumericUpDown +{ + CustomFormat = "00.00##%", + WidthRequest = 200 +}; + +SfNumericUpDown hoursWorked = new SfNumericUpDown +{ + CustomFormat = "00.00##", + WidthRequest = 200 +}; {% endhighlight %} {% endtabs %} @@ -168,7 +220,8 @@ When the [SfNumericUpDown](https://help.syncfusion.com/cr/maui-toolkit/Syncfusio {% tabs %} {% highlight xaml %} - @@ -179,6 +232,7 @@ When the [SfNumericUpDown](https://help.syncfusion.com/cr/maui-toolkit/Syncfusio SfNumericUpDown sfNumericUpDown= new SfNumericUpDown(); SfNumericUpDown sfNumericUpDown = new SfNumericUpDown(); +sfNumericUpDown.WidthRequest = 200; sfNumericUpDown.Value = 1000; sfNumericUpDown.CustomFormat = "p"; sfNumericUpDown.PercentDisplayMode = PercentDisplayMode.Value; @@ -194,6 +248,7 @@ sfNumericUpDown.PercentDisplayMode = PercentDisplayMode.Value; {% highlight xaml %} @@ -203,6 +258,7 @@ sfNumericUpDown.PercentDisplayMode = PercentDisplayMode.Value; {% highlight C# %} SfNumericUpDown sfNumericUpDown= new SfNumericUpDown(); +sfNumericUpDown.WidthRequest = 200; sfNumericUpDown.Value = 1000; sfNumericUpDown.CustomFormat = "p"; sfNumericUpDown.PercentDisplayMode = PercentDisplayMode.Compute; @@ -224,6 +280,7 @@ N> The `MaximumNumberDecimalDigits` property can only be set to a positive value {% highlight xaml %} @@ -232,6 +289,7 @@ N> The `MaximumNumberDecimalDigits` property can only be set to a positive value {% highlight C# %} SfNumericUpDown sfNumericUpDown= new SfNumericUpDown(); +sfNumericUpDown.WidthRequest = 200; sfNumericUpDown.Value = 1000.23232; sfNumericUpDown.MaximumNumberDecimalDigits = 3; diff --git a/maui-toolkit/NumericUpDown/Getting-Started.md b/maui-toolkit/NumericUpDown/Getting-Started.md index 7e23c2b5..de1ecf39 100644 --- a/maui-toolkit/NumericUpDown/Getting-Started.md +++ b/maui-toolkit/NumericUpDown/Getting-Started.md @@ -120,7 +120,8 @@ This ensures that only valid numeric input is accepted and displayed according t {% tabs %} {% highlight xaml %} - @@ -128,6 +129,7 @@ This ensures that only valid numeric input is accepted and displayed according t {% highlight C# %} SfNumericUpDown sfNumericUpDown = new SfNumericUpDown(); +sfNumericUpDown.WidthRequest = 200; sfNumericUpDown.HorizontalOptions = LayoutOptions.Center; sfNumericUpDown.VerticalOptions = LayoutOptions.Center; sfNumericUpDown.CustomFormat = "0.000"; @@ -150,7 +152,8 @@ N> Clicking the up or down button increases or decreases the value based on the {% tabs %} {% highlight xaml %} - @@ -159,6 +162,7 @@ N> Clicking the up or down button increases or decreases the value based on the {% highlight C# %} SfNumericUpDown sfNumericUpDown = new SfNumericUpDown(); +sfNumericUpDown.WidthRequest = 200; sfNumericUpDown.HorizontalOptions = LayoutOptions.Center; sfNumericUpDown.VerticalOptions = LayoutOptions.Center; sfNumericUpDown.CustomFormat = "0.000"; @@ -176,7 +180,8 @@ You can change the format in which the value should be displayed using the [Cust {% tabs %} {% highlight xaml %} - @@ -185,6 +190,7 @@ You can change the format in which the value should be displayed using the [Cust {% highlight C# %} SfNumericUpDown sfNumericUpDown = new SfNumericUpDown(); +sfNumericUpDown.WidthRequest = 200; sfNumericUpDown.HorizontalOptions = LayoutOptions.Center; sfNumericUpDown.VerticalOptions = LayoutOptions.Center; sfNumericUpDown.Value = 12.5; @@ -202,7 +208,8 @@ By default, the [NumericUpDown](https://help.syncfusion.com/cr/maui-toolkit/Sync {% tabs %} {% highlight xaml %} - @@ -211,6 +218,7 @@ By default, the [NumericUpDown](https://help.syncfusion.com/cr/maui-toolkit/Sync {% highlight C# %} SfNumericUpDown sfNumericUpDown = new SfNumericUpDown(); +sfNumericUpDown.WidthRequest = 200; sfNumericUpDown.Value=12315; sfNumericUpDown.HorizontalOptions = LayoutOptions.Center; sfNumericUpDown.VerticalOptions = LayoutOptions.Center; diff --git a/maui-toolkit/NumericUpDown/Restriction.md b/maui-toolkit/NumericUpDown/Restriction.md index 43850b0d..685ca591 100644 --- a/maui-toolkit/NumericUpDown/Restriction.md +++ b/maui-toolkit/NumericUpDown/Restriction.md @@ -22,7 +22,8 @@ N> When the value of the Minimum property is **15**, and the `AllowNull` propert {% tabs %} {% highlight xaml %} - @@ -31,6 +32,7 @@ N> When the value of the Minimum property is **15**, and the `AllowNull` propert {% highlight C# %} SfNumericUpDown sfNumericUpDown = new SfNumericUpDown(); +sfNumericUpDown.WidthRequest = 200; sfNumericUpDown.HorizontalOptions = LayoutOptions.Center; sfNumericUpDown.VerticalOptions = LayoutOptions.Center; sfNumericUpDown.Value = 10; @@ -48,7 +50,8 @@ You can restrict the users to enter input within a minimum and maximum range in {% tabs %} {% highlight xaml %} - @@ -87,6 +92,7 @@ You can prevent users from editing the numerical value in the editor using the [ {% highlight C# %} SfNumericUpDown sfNumericUpDown = new SfNumericUpDown(); +sfNumericUpDown.WidthRequest = 200; sfNumericUpDown.HorizontalOptions = LayoutOptions.Center; sfNumericUpDown.VerticalOptions = LayoutOptions.Center; sfNumericUpDown.IsEditable = true; diff --git a/maui-toolkit/NumericUpDown/UpDown-Button.md b/maui-toolkit/NumericUpDown/UpDown-Button.md index 1b43d462..17d1a462 100644 --- a/maui-toolkit/NumericUpDown/UpDown-Button.md +++ b/maui-toolkit/NumericUpDown/UpDown-Button.md @@ -20,7 +20,8 @@ N> The value in the `NumericUpDown` can also be changed by mouse scrolling. The {% tabs %} {% highlight xaml %} - The value in the `NumericUpDown` can also be changed by mouse scrolling. The {% highlight C# %} SfNumericUpDown sfNumericUpDown= new SfNumericUpDown(); +sfNumericUpDown.WidthRequest = 200; sfNumericUpDown.Value=10; sfNumericUpDown.SmallChange=5; sfNumericUpDown.LargeChange=10; @@ -50,7 +52,8 @@ N> When using the up-down button, the `NumericUpDown` control value changes base {% tabs %} {% highlight XAML %} - @@ -59,6 +62,7 @@ N> When using the up-down button, the `NumericUpDown` control value changes base {% highlight c# %} SfNumericUpDown sfNumericUpDown = new SfNumericUpDown(); +sfNumericUpDown.WidthRequest = 200; sfNumericUpDown.HorizontalOptions = LayoutOptions.Center; sfNumericUpDown.VerticalOptions = LayoutOptions.Center; sfNumericUpDown.Value=360; @@ -82,7 +86,8 @@ The default updown button alignment is **Right**. {% tabs %} {% highlight XAML %} - @@ -91,6 +96,7 @@ The default updown button alignment is **Right**. {% highlight c# %} SfNumericUpDown sfNumericUpDown = new SfNumericUpDown(); +sfNumericUpDown.WidthRequest = 200; sfNumericUpDown.HorizontalOptions = LayoutOptions.Center; sfNumericUpDown.VerticalOptions = LayoutOptions.Center; sfNumericUpDown.Value=360; @@ -152,7 +158,7 @@ N> The UpDownButton template only supports Inline Placement mode. -