Skip to content

[Hotfix] 928065 - Revamp the UG documentation of .NET MAUI SfMaskedEntry. #3085

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: hotfix/hotfix-v28.2.3
Choose a base branch
from
Open

[Hotfix] 928065 - Revamp the UG documentation of .NET MAUI SfMaskedEntry. #3085

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b261d6f
Revamp UG content and Source for Masked-Entry in latest Hotfix
Hemalatha-SF4675 Feb 17, 2025
22f7ee9
Resolve CI failure in Masked Entry hotfix
Hemalatha-SF4675 Feb 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
97 changes: 61 additions & 36 deletions MAUI/Masked-Entry/Basic-Features.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,18 +16,19 @@ The ClearButtonVisibility of type [ClearButtonVisibility](https://help.syncfusio
{% tabs %}
{% highlight XAML %}

<syncfusion:SfMaskedEntry WidthRequest="200"
<editors:SfMaskedEntry WidthRequest="200"
MaskType="Simple"
Mask="(000) 000-0000"
Mask="(000) 000-0000" Value="1234"
ClearButtonVisibility = "WhileEditing" />

{% endhighlight %}
{% highlight C# %}

maskedEntry = new SfMaskedEntry();
maskedEntry.WidthRequest = "200";
SfMaskedEntry maskedEntry = new SfMaskedEntry();
maskedEntry.WidthRequest = 200;
maskedEntry.MaskType = MaskedEntryMaskType.Simple;
maskedEntry.Mask = "(000) 000-0000";
maskedEntry.Mask = "(000) 000-0000";
maskedEntry.Value = 1234;
maskedEntry.ClearButtonVisibility = ClearButtonVisibility.WhileEditing;

{% endhighlight %}
Expand All @@ -42,16 +43,22 @@ The clear button icon color can be changed by using the [ClearButtonColor](https
{% tabs %}
{% highlight xaml %}

<syncfusion:SfMaskedEntry x:Name="maskedEntry"
<editors:SfMaskedEntry x:Name="maskedEntry"
WidthRequest="200"
MaskType="Simple"
Mask="(000) 000-0000"
Mask="(000) 000-0000" Value="044"
ClearButtonVisibility = "WhileEditing"
ClearButtonColor="Red" />

{% endhighlight %}
{% highlight C# %}

SfMaskedEntry maskedEntry = new SfMaskedEntry();
maskedEntry.WidthRequest = 200;
maskedEntry.MaskType = MaskedEntryMaskType.Simple;
maskedEntry.Mask = "(000) 000-0000";
maskedEntry.Value = 044;
maskedEntry.ClearButtonVisibility = ClearButtonVisibility.WhileEditing;
maskedEntry.ClearButtonColor = Colors.Red;

{% endhighlight %}
Expand All @@ -71,16 +78,16 @@ The Masked Entry control allows the user to customize the font size of the text
{% tabs %}
{% highlight XAML %}

<syncfusion:SfMaskedEntry WidthRequest="200"
<editors:SfMaskedEntry WidthRequest="200"
MaskType="Simple"
Mask="(000) 000-0000" Value="1234"
FontSize="18"/>

{% endhighlight %}
{% highlight C# %}

maskedEntry = new SfMaskedEntry();
maskedEntry.WidthRequest = "200";
SfMaskedEntry maskedEntry = new SfMaskedEntry();
maskedEntry.WidthRequest = 200;
maskedEntry.MaskType = MaskedEntryMaskType.Simple;
maskedEntry.Mask = "(000) 000-0000";
maskedEntry.Value = 1234;
Expand All @@ -100,16 +107,16 @@ The Masked Entry control allows the user to customize the font attribute of the
{% tabs %}
{% highlight XAML %}

<syncfusion:SfMaskedEntry WidthRequest="200"
<editors:SfMaskedEntry WidthRequest="200"
MaskType="Simple"
Mask="(000) 000-0000" Value="1234"
FontAttributes="Bold"/>

{% endhighlight %}
{% highlight C# %}

maskedEntry = new SfMaskedEntry();
maskedEntry.WidthRequest = "200";
SfMaskedEntry maskedEntry = new SfMaskedEntry();
maskedEntry.WidthRequest = 200;
maskedEntry.MaskType = MaskedEntryMaskType.Simple;
maskedEntry.Mask = "(000) 000-0000";
maskedEntry.Value = 1234;
Expand All @@ -127,16 +134,16 @@ The Masked Entry control allows the user to customize the text's font family ins
{% tabs %}
{% highlight XAML %}

<syncfusion:SfMaskedEntry WidthRequest="200"
<editors:SfMaskedEntry WidthRequest="200"
MaskType="Simple"
Mask="(000) 000-0000" Value="1234"
FontFamily="Lobster-Regular"/>

{% endhighlight %}
{% highlight C# %}

maskedEntry = new SfMaskedEntry();
maskedEntry.WidthRequest = "200";
SfMaskedEntry maskedEntry = new SfMaskedEntry();
maskedEntry.WidthRequest = 200;
maskedEntry.MaskType = MaskedEntryMaskType.Simple;
maskedEntry.Mask = "(000) 000-0000";
maskedEntry.Value = 1234;
Expand All @@ -159,14 +166,14 @@ The Masked Entry control allows the user to define the text displayed when the M
{% tabs %}
{% highlight XAML %}

<syncfusion:SfMaskedEntry WidthRequest="200"
<editors:SfMaskedEntry WidthRequest="200"
Placeholder="Enter the value"/>

{% endhighlight %}
{% highlight C# %}

maskedEntry = new SfMaskedEntry();
maskedEntry.WidthRequest = "200";
SfMaskedEntry maskedEntry = new SfMaskedEntry();
maskedEntry.WidthRequest = 200;
maskedEntry.Placeholder = "Enter the value";

{% endhighlight %}
Expand All @@ -181,17 +188,17 @@ The [SfMaskedEntry](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.S
{% tabs %}
{% highlight XAML %}

<syncfusion:SfMaskedEntry WidthRequest="200"
<editors:SfMaskedEntry WidthRequest="200"
Placeholder="Enter the value"
PlaceholderColor="Green"/>

{% endhighlight %}
{% highlight C# %}

maskedEntry = new SfMaskedEntry();
maskedEntry.WidthRequest = "200";
SfMaskedEntry maskedEntry = new SfMaskedEntry();
maskedEntry.WidthRequest = 200;
maskedEntry.Placeholder = "Enter the value";
maskedEntry.PlaceholderColor = Colors.Green;
maskedEntry.PlaceholderColor = Colors.Green;

{% endhighlight %}
{% endtabs %}
Expand All @@ -205,20 +212,20 @@ The [SfMaskedEntry](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.S
{% tabs %}
{% highlight XAML %}

<syncfusion:SfMaskedEntry WidthRequest="200"
<editors:SfMaskedEntry WidthRequest="200"
MaskType="Simple"
Mask="(000) 000-0000" Value="1234"
TextColor="Green"/>

{% endhighlight %}
{% highlight C# %}

maskedEntry = new SfMaskedEntry();
maskedEntry.WidthRequest = "200";
SfMaskedEntry maskedEntry = new SfMaskedEntry();
maskedEntry.WidthRequest = 200;
maskedEntry.MaskType = MaskedEntryMaskType.Simple;
maskedEntry.Mask = "(000) 000-0000";
maskedEntry.Value = 1234;
maskedEntry.TextColor = Colors.Green;
maskedEntry.TextColor = Colors.Green;

{% endhighlight %}
{% endtabs %}
Expand All @@ -232,15 +239,17 @@ The [SfMaskedEntry](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.S
{% tabs %}
{% highlight XAML %}

<syncfusion:SfMaskedEntry WidthRequest="200"
<editors:SfMaskedEntry WidthRequest="200"
Mask="(000) 000-0000"
ClearButtonVisibility="WhileEditing"
Stroke="Red"/>
{% endhighlight %}
{% highlight C# %}

SfMaskedEntry maskedEntry = new SfMaskedEntry();
maskedEntry.WidthRequest = "200";
maskedEntry.WidthRequest = 200;
maskedEntry.Mask = "(000) 000-0000";
maskedEntry.ClearButtonVisibility = ClearButtonVisibility.WhileEditing;
maskedEntry.Stroke = Colors.Red;

{% endhighlight %}
Expand All @@ -257,15 +266,18 @@ The [ShowBorder](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.SfMa
{% tabs %}
{% highlight XAML %}

<syncfusion:SfMaskedEntry WidthRequest="200"
Mask="(000) 000-0000"
<editors:SfMaskedEntry WidthRequest="200"
Mask="00/00/0000" Value="15/03/2024"
ClearButtonVisibility="WhileEditing"
ShowBorder="False"/>
{% endhighlight %}
{% highlight C# %}

SfMaskedEntry maskedEntry = new SfMaskedEntry();
maskedEntry.WidthRequest = 200;
maskedEntry.Mask = "(000) 000-0000";
maskedEntry.Mask = "00/00/0000";
maskedEntry.Value= "15/03/2024";
maskedEntry.ClearButtonVisibility = ClearButtonVisibility.WhileEditing;
maskedEntry.ShowBorder = false;

{% endhighlight %}
Expand All @@ -282,8 +294,10 @@ The [SfMaskedEntry](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.S
{% tabs %}
{% highlight xaml %}

<syncfusion:SfMaskedEntry WidthRequest="200"
<editors:SfMaskedEntry WidthRequest="200"
HeightRequest="50"
Mask="00/00/0000" Value="22/11/2022"
ClearButtonVisibility="WhileEditing"
HorizontalTextAlignment="Center"
VerticalTextAlignment="Start"/>
{% endhighlight %}
Expand All @@ -292,6 +306,9 @@ The [SfMaskedEntry](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.S
SfMaskedEntry maskedEntry = new SfMaskedEntry();
maskedEntry.WidthRequest = 200;
maskedEntry.HeightRequest = 50;
maskedEntry.Mask = "00/00/0000";
maskedEntry.Value= "22/11/2022";
maskedEntry.ClearButtonVisibility = ClearButtonVisibility.WhileEditing;
maskedEntry.HorizontalTextAlignment = TextAlignment.Center;
maskedEntry.VerticalTextAlignment = TextAlignment.Start;

Expand All @@ -315,13 +332,19 @@ N> Default value of ReturnType is `Default`.

<editors:SfMaskedEntry x:Name="maskedentry"
WidthRequest="200"
Mask="00:00:0000" Value="120319"
ClearButtonVisibility="WhileEditing"
ReturnType="Next"/>

{% endhighlight %}
{% highlight C# %}

SfMaskedEntry sfMaskedEntry = new SfMaskedEntry();
sfMaskedEntry.ReturnType = ReturnType.Next;
SfMaskedEntry maskedEntry = new SfMaskedEntry();
maskedEntry.WidthRequest = 200;
maskedEntry.Mask = "00:00:0000";
maskedEntry.Value= 120319;
maskedEntry.ClearButtonVisibility = ClearButtonVisibility.WhileEditing;
maskedEntry.ReturnType = ReturnType.Next;

{% endhighlight %}
{% endtabs %}
Expand All @@ -336,6 +359,7 @@ The `ClearButtonPath` property allows users to set the path for customizing the
{% highlight xaml %}

<editors:SfMaskedEntry x:Name="maskedEntry"
WidthRequest="250"
MaskType="Simple"
Mask="(000) 000-0000"
ClearButtonVisibility="WhileEditing">
Expand All @@ -359,7 +383,8 @@ var path = new Path()
Stroke = Colors.Red
};

maskedEntry = new SfMaskedEntry();
SfMaskedEntry maskedEntry = new SfMaskedEntry();
maskedEntry.WidthRequest = 250;
maskedEntry.MaskType = MaskedEntryMaskType.Simple;
maskedEntry.Mask = "(000) 000-0000";
maskedEntry.ClearButtonVisibility = ClearButtonVisibility.WhileEditing;
Expand Down
4 changes: 2 additions & 2 deletions MAUI/Masked-Entry/Culture.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,8 +64,8 @@ The following example shows how to set the France culture for the currency symbo
{% tabs %}
{% highlight C# %}

maskedEntry = new SfMaskedEntry();
maskedEntry.WidthRequest = "200";
SfMaskedEntry maskedEntry = new SfMaskedEntry();
maskedEntry.WidthRequest = 200;
maskedEntry.MaskType = MaskedEntryMaskType.Simple;
maskedEntry.Mask = "$ 0,000.00";
maskedEntry.Culture = new CultureInfo("fr-FR");
Expand Down
6 changes: 3 additions & 3 deletions MAUI/Masked-Entry/Events.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,8 @@ The [ValueChanging](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.S
private void MaskedEntry_ValueChanging(object sender, MaskedEntryValueChangingEventArgs e)
{
// Access the new and old values
string newValue = e.NewValue;
string oldValue = e.OldValue;
string newValue = e.NewValue?.ToString();
string oldValue = e.OldValue?.ToString();

// Check the validity of the input
bool isValid = e.IsValid;
Expand All @@ -55,7 +55,7 @@ The [ValueChanged](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.Sf
{% tabs %}
{% highlight C# %}

private void MaskedEntry_ValueChanged(object sender, MaskedEntryValueChangedEventArgs e)
private async void MaskedEntry_ValueChanged(object sender, MaskedEntryValueChangedEventArgs e)
{
// Access the new and old values
string maskNewValue = e.NewValue?.ToString();
Expand Down
Loading