diff --git a/MAUI/Button/Customization.md b/MAUI/Button/Customization.md index cbb4924005..07f5411c03 100644 --- a/MAUI/Button/Customization.md +++ b/MAUI/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/Syncfusion.Maui.Core.Butto {% tabs %} {% highlight xaml %} - - + + {% endhighlight %} {% highlight c# %} @@ -44,8 +44,8 @@ The [`FontSize`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.Button {% tabs %} {% highlight xaml %} - - + + {% endhighlight %} {% highlight c# %} @@ -66,8 +66,8 @@ The [`FontAttributes`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core. {% tabs %} {% highlight xaml %} - - + + {% endhighlight %} {% highlight c# %} @@ -88,8 +88,8 @@ The [`FontFamily`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.Butt {% tabs %} {% highlight xaml %} - - + + {% endhighlight %} {% highlight c# %} @@ -110,8 +110,8 @@ The [`HorizontalTextAlignment`](https://help.syncfusion.com/cr/maui/Syncfusion.M {% tabs %} {% highlight xaml %} - - + + {% endhighlight %} {% highlight c# %} @@ -131,12 +131,13 @@ Users can now customize the [`SfButton`](https://help.syncfusion.com/cr/maui/Syn {% tabs %} {% highlight xaml %} - - + {% endhighlight %} {% highlight c# %} @@ -165,8 +166,8 @@ The [`LineBreakMode`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Button {% tabs %} {% highlight xaml %} - - + + {% endhighlight %} {% highlight c# %} @@ -192,8 +193,8 @@ The [`Background`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.S {% tabs %} {% highlight xaml %} - - + + {% endhighlight %} {% highlight c# %} @@ -216,8 +217,8 @@ The [`Stroke`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ButtonBa {% tabs %} {% highlight xaml %} - - + + {% endhighlight %} {% highlight c# %} @@ -229,6 +230,8 @@ button.Stroke = Colors.Red; {% endhighlight %} {% endtabs %} +N> To display the `Stroke` color, we should define the `StrokeThickness` property. + ![SfButton with stroke](images/customization-images/Button_border.png) ### StrokeThickness @@ -238,8 +241,8 @@ The [`StrokeThickness`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core {% tabs %} {% highlight xaml %} - - + + {% endhighlight %} {% highlight c# %} @@ -261,8 +264,8 @@ The [`CornerRadius`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.Bu {% tabs %} {% highlight xaml %} - - + + {% endhighlight %} {% highlight c# %} @@ -287,8 +290,8 @@ You can enable the Icon image using the [`ShowIcon`](https://help.syncfusion.com {% tabs %} {% highlight xaml %} - - + + {% endhighlight %} {% highlight c# %} @@ -310,8 +313,8 @@ N> Enable the [`ShowIcon`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.C {% tabs %} {% highlight xaml %} - - + + {% endhighlight %} {% highlight c# %} @@ -335,8 +338,8 @@ N> Enable the `ShowIcon` property to enable the `ImageSize` property. {% tabs %} {% highlight xaml %} - - + + {% endhighlight %} {% highlight c# %} @@ -372,6 +375,7 @@ N> Enable the `ShowIcon` property to enable the `ImageAlignment` property. + {% endhighlight %} {% highlight c# %} @@ -668,27 +678,27 @@ Refer to this [`documentation`](https://learn.microsoft.com/en-us/dotnet/maui/us . . . - - + + - - + + - - + + - - + + {% endhighlight %} {% highlight c# %} @@ -735,11 +745,12 @@ N> Default value is [`null`]. - - + {% endhighlight %} {% highlight c# %} diff --git a/MAUI/Button/Getting-Started.md b/MAUI/Button/Getting-Started.md index c6afcbb4be..83e6cad6c2 100644 --- a/MAUI/Button/Getting-Started.md +++ b/MAUI/Button/Getting-Started.md @@ -206,6 +206,8 @@ N> Ensure that the images mentioned in the code snippets are located in the **Re @@ -215,6 +217,8 @@ N> Ensure that the images mentioned in the code snippets are located in the **Re SfButton button = new SfButton(); button.Text = "Button"; button.TextColor = Colors.White; +button.WidthRequest = 150; +button.HorizontalTextAlignment = TextAlignment.Start, button.ImageSource = "button_Heart.png"; button.ShowIcon = true; diff --git a/MAUI/Button/Images/customization-images/Button_EnableRippleEffect.gif b/MAUI/Button/Images/customization-images/Button_EnableRippleEffect.gif index f7ca6b8664..2be170ac6d 100644 Binary files a/MAUI/Button/Images/customization-images/Button_EnableRippleEffect.gif and b/MAUI/Button/Images/customization-images/Button_EnableRippleEffect.gif differ diff --git a/MAUI/Button/Images/customization-images/Button_border.png b/MAUI/Button/Images/customization-images/Button_border.png index a0d535367d..5e893641d4 100644 Binary files a/MAUI/Button/Images/customization-images/Button_border.png and b/MAUI/Button/Images/customization-images/Button_border.png differ diff --git a/MAUI/Button/Images/customization-images/Button_borderthickness.png b/MAUI/Button/Images/customization-images/Button_borderthickness.png index 5455c51d08..28183d3f2b 100644 Binary files a/MAUI/Button/Images/customization-images/Button_borderthickness.png and b/MAUI/Button/Images/customization-images/Button_borderthickness.png differ diff --git a/MAUI/Button/Images/customization-images/Button_cornerradius.png b/MAUI/Button/Images/customization-images/Button_cornerradius.png index f592125ceb..83a67a1d79 100644 Binary files a/MAUI/Button/Images/customization-images/Button_cornerradius.png and b/MAUI/Button/Images/customization-images/Button_cornerradius.png differ diff --git a/MAUI/Button/Images/customization-images/Button_fontattributes.png b/MAUI/Button/Images/customization-images/Button_fontattributes.png index e42dd3dd5f..c4453476d7 100644 Binary files a/MAUI/Button/Images/customization-images/Button_fontattributes.png and b/MAUI/Button/Images/customization-images/Button_fontattributes.png differ diff --git a/MAUI/Button/Images/customization-images/Button_fontsize.png b/MAUI/Button/Images/customization-images/Button_fontsize.png index 18d9895904..d7c2387601 100644 Binary files a/MAUI/Button/Images/customization-images/Button_fontsize.png and b/MAUI/Button/Images/customization-images/Button_fontsize.png differ diff --git a/MAUI/Button/Images/customization-images/Button_icon.png b/MAUI/Button/Images/customization-images/Button_icon.png index b9c1ddffb8..f37b513989 100644 Binary files a/MAUI/Button/Images/customization-images/Button_icon.png and b/MAUI/Button/Images/customization-images/Button_icon.png differ diff --git a/MAUI/Button/Images/customization-images/Button_textColor.png b/MAUI/Button/Images/customization-images/Button_textColor.png index a54988f447..4d490ba929 100644 Binary files a/MAUI/Button/Images/customization-images/Button_textColor.png and b/MAUI/Button/Images/customization-images/Button_textColor.png differ diff --git a/MAUI/Button/Images/getting-started/net-maui-button-with-icon.png b/MAUI/Button/Images/getting-started/net-maui-button-with-icon.png index b9c1ddffb8..6eb5508214 100644 Binary files a/MAUI/Button/Images/getting-started/net-maui-button-with-icon.png and b/MAUI/Button/Images/getting-started/net-maui-button-with-icon.png differ diff --git a/MAUI/Button/Images/overview/Overview.png b/MAUI/Button/Images/overview/Overview.png index 906613a037..4ad2c383f9 100644 Binary files a/MAUI/Button/Images/overview/Overview.png and b/MAUI/Button/Images/overview/Overview.png differ diff --git a/MAUI/Button/Images/right-to-left/RTL.png b/MAUI/Button/Images/right-to-left/RTL.png index 3114535e0a..6cb78d2bd0 100644 Binary files a/MAUI/Button/Images/right-to-left/RTL.png and b/MAUI/Button/Images/right-to-left/RTL.png differ diff --git a/MAUI/Button/Visual-States.md b/MAUI/Button/Visual-States.md index ef530f6628..16e24a4247 100644 --- a/MAUI/Button/Visual-States.md +++ b/MAUI/Button/Visual-States.md @@ -35,7 +35,7 @@ N> The visual states [Checked](https://help.syncfusion.com/cr/maui/Syncfusion.Ma - + @@ -83,7 +83,7 @@ N> The visual states [Checked](https://help.syncfusion.com/cr/maui/Syncfusion.Ma { Name = "Normal" }; - normalState.Setters.Add(new Setter { Property = SfButton.BackgroundProperty, Value = Colors.Orange }); + normalState.Setters.Add(new Setter { Property = SfButton.BackgroundProperty, Value = Color.FromRgba("#6A4C9C") }); VisualState checkedState = new VisualState { diff --git a/MAUI/Button/how-to/Add-the-custom-view-for-button.md b/MAUI/Button/how-to/Add-the-custom-view-for-button.md index 1d6e722c51..5b2a07e482 100644 --- a/MAUI/Button/how-to/Add-the-custom-view-for-button.md +++ b/MAUI/Button/how-to/Add-the-custom-view-for-button.md @@ -1,7 +1,7 @@ --- layout: post title: How to Add the Custom View for Syncfusion SfButton -description: How to add the custom view for SfButton. +description: Learn how to add and customize a custom view for the SfButton in .NET MAUI to enhance the user interface and functionality. platform: maui control: Sfbutton documentation: ug @@ -18,18 +18,17 @@ xmlns:busy="clr-namespace:Syncfusion.Maui.Core;assembly=Syncfusion.Maui.Core" . . . - - - - - - - - - + + {% endhighlight %} @@ -39,48 +38,44 @@ using Syncfusion.Maui.Core; . . . -SfButton button = new SfButton(); -var happyTemplate = new DataTemplate(() => +var customTemplate = new DataTemplate(() => { -// Create the HorizontalStackLayout. -var stackLayout = new Microsoft.Maui.Controls.StackLayout() -{ - Orientation = StackOrientation.Horizontal, - VerticalOptions = LayoutOptions.Center -}; - -// Create the SfBusyIndicator. -var busyIndicator = new SfBusyIndicator() + var activityIndicator = new ActivityIndicator + { + Color = Colors.White, + IsRunning = true, + }; + var label = new Label + { + Text = "Loading...", + TextColor = Colors.White, + VerticalOptions = LayoutOptions.Center + }; + var stackLayout = new HorizontalStackLayout + { + Spacing = 8, + Padding = new Thickness(5) + }; + stackLayout.Children.Add(activityIndicator); + stackLayout.Children.Add(label); + return stackLayout; +}); +SfButton button = new SfButton { - AnimationType = AnimationType.SingleCircle, - IsRunning = true, - TextColor = Colors.White, - WidthRequest = 80, - HeightRequest = 60, - IndicatorColor = Colors.Yellow, - VerticalOptions = LayoutOptions.Center, - HorizontalOptions = LayoutOptions.End + Text = "SfButton", + WidthRequest = 120, + HeightRequest = 50, + Background = Color.FromArgb("#4125BC"), + CornerRadius= 10, + Content = customTemplate }; -// Create the Label. -var label = new Label +Content = new VerticalStackLayout { - Text = "Loading...", - FontSize = 20, - HorizontalOptions = LayoutOptions.Start, - VerticalOptions = LayoutOptions.Center, - TextColor = Colors.White + Children = { button }, }; -// Add the busyIndicator and label to the stackLayout. -stackLayout.Children.Add(busyIndicator); -stackLayout.Children.Add(label); -// Return the constructed stackLayout as the root of the DataTemplate. -return stackLayout; - -}); -button.Content = happyTemplate; {% endhighlight %} {% endtabs %}