add entry and masked new features, 1 kb article for accordion

This commit is contained in:
PROGRESS\doyordan 2021-02-22 16:47:20 +02:00
Родитель 92cfa31eb6
Коммит 8d691e5a06
7 изменённых файлов: 105 добавлений и 5 удалений

Просмотреть файл

@ -36,6 +36,26 @@ RadEntry provides **IsPassword**(*bool*) property, which when set to True, repla
<snippet id='entry-features-password'/>
## Non-Editable State
With R1 2021 Service Pack, RadEntry control provides a feature which allows you to choose whether the control will be editable or not - Read-Only state.
* **IsReadOnly** *bool* property: Specifies whether the control will be in edit mode. The default value is `False`. If you want to restrict the control from editing, set the `IsReadOnly` to `True`
### Example
<snippet id='entry-features-read-only'/>
## Max Length
From r1 2021 Service Pack, the Radentry control has an additional feature, you can restrict the number of the symbols allowed to be entered in the input field.
* **MaxLength** (*int*) property: Specifies the maximum number of symbols allowed to be entered.
### Example with MaxLength set to 10
<snippet id='entry-features-maxlength'/>
## Keyboard
The **Keyboard** property of type *Xamarin.Forms.Keyboard* allows you to define the type of the keyboard that will be visualized by the device.

Просмотреть файл

@ -17,8 +17,10 @@ slug: entry-overview
* **Watermark**: RadEntry allows setting a placeholder text in the control, which could hint the users what is the input that is expected. For more details read [here]({% slug entry-key-features %}#watermark).
* **Password functionality**: You could hide the characters a user is typing for privacy reasons, check [here]({% slug entry-key-features %}#password) for more details.
* **Border styles**: RadEntry gives you the option to customize the look of the border around the input using the BorderStyle property, for more details read [here]({% slug entry-key-features %}#borderstyle).
* **Keyboard support**: You could specify the virtual keyboard to be used with RadEntry considering the expected input.
* **Non-ediatble state**: Using a single property - `IsReadOnly`, you can specify whether the RadEntry control can be edited or not. Example and explanation can be found in [Key Features - Read-Only State]({%slug entry-key-features%}#non-editable-state).
* You can define the **maximum number of symbols** allowed in the RadEntry control. For detailed explanation and example check the [Key Features - Max Length]({%slug entry-key-features%}#max-length) section.
* **Border styles**: RadEntry gives you the option to customize the look of the border around the input using the BorderStyle property, for more details read [here]({% slug entry-key-features %}#borderstyle).
## See Also

Двоичные данные
controls/maskedinput/images/maskedinput-telephone.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 14 KiB

Двоичный файл не отображается.

До

Ширина:  |  Высота:  |  Размер: 19 KiB

После

Ширина:  |  Высота:  |  Размер: 12 KiB

Просмотреть файл

@ -18,9 +18,10 @@ slug: maskedinput-overview
## Key features ##
* **Validation**: RadMaskedInput control uses a mask to distinguish between proper and improper user input. Validation mechanism can be based on custom regular expressions or built-in tokens. Read more about this in the [Tokens Validation]({% slug maskedinput-features-mask-tokens %}) and [RegEx Validation]({% slug maskedinput-features-mask-extensions %}) topics.
* **Mask Tokens**: You could choose from a set of predefined tokens in order to restrict users input. For more details on the available tokens go to [Tokens Validation]({% slug maskedinput-features-mask-tokens %}) topic.
* **Mask Tokens**: You can choose from a set of predefined tokens in order to restrict users input. For more details on the available tokens go to [Tokens Validation]({% slug maskedinput-features-mask-tokens %}) topic.
* **Commands**: MaskedInput allows you to attach commands that will be executed when certain actions, such as ApplyMaskStarted and ApplyMaskFinished occur. For detailed information on the matter go to [Commands]({% slug maskedinput-features-commands %}) article.
* **Customizable Validation UI**: With RadMaskedInput you could easily modify the appearance of the input-related errors, please refer to the [Validation UI]({% slug maskedinput-features-validation %}) topic for more details.
* **Customizable Validation UI**: With RadMaskedInput you can easily modify the appearance of the input-related errors, please refer to the [Validation UI]({% slug maskedinput-features-validation %}) topic for more details.
* **Keyboard support**: You can specify the virtual keyboard to be used with RadMaskedInput considering the expected input.
## See Also

Просмотреть файл

@ -25,7 +25,7 @@ Corresponding Regex | Usage
## Custom Regex Example
**MaskedInput with custom RegEx validation**
**MaskedInput with custom RegEx validation**. The `Keyboard` type is `Numeric`.
<snippet id='maskedinput-features-regex-custom-validation-xaml'/>
@ -38,7 +38,7 @@ The static class **Telerik.XamarinForms.Input.MaskedInput.MaskExtensions** conta
## Built-in Regex Example
**Validation using the MaskExtensions class**
**Validation using the MaskExtensions class**. The Masked type is Email. Note that the `Keyboard` type set is `Email`.
<snippet id='maskedinput-features-regex-extensions-validation-xaml'/>

Просмотреть файл

@ -0,0 +1,77 @@
---
title: Add Items Dynamically to Accordion control
description: How to add dynamically items to the accordion control
type: how-to
page_title: Add Items Dynamically to Accordion for Xamarin
slug: accordion-add-items-dynamically
position:
tags: xamarin, accordion, items, dynamically
ticketid: 1507547
res_type: kb
---
## Environment
<table>
<tbody>
<tr>
<td>Product Version</td>
<td>2021.1 216.1</td>
</tr>
<tr>
<td>Product</td>
<td>Accordion for Xamarin</td>
</tr>
</tbody>
</table>
## Description
The RadAccordion control supports adding multiple items dynamically. It provides `Children` property which is collection of `AccordionItem`.
The `AccrodionItem` class provides properties for customization some of them are: `Header`, `HeaderText`, `Content`, which you can use to create items for specific scenarios.
## Solution
Here is the Accorsion definition in XAML
```XAML
<StackLayout>
<primitives:RadAccordion x:Name="Accordion"/>
<Button Text="Add new item"
Clicked="AddNewItem_Clicked" />
</StackLayout>
```
you will need to add the following namespace:
```XAML
xmlns:primitives="clr-namespace:Telerik.XamarinForms.Primitives;assembly=Telerik.XamarinForms.Primitives"
```
### Add Items Dynamically to Accordion control
We will use the a Button and on its Click event we will add the items:
1. Create an instance of AccordionItem.
2. Set its HeaderText and Content properties.
3. Add the item to the accordion Children collection by using accordion.Children.Add().
Here is the implementation inside the Button Click event
```C#
private void AddNewItem_Clicked(object sender, EventArgs e)
{
Telerik.XamarinForms.Primitives.AccordionItem accordionItem = new Telerik.XamarinForms.Primitives.AccordionItem()
{
HeaderText = $"Item header {this.count}",
Content = new Label() { Text = $"Item content {this.count}" }
};
this.Accordion.Children.Add(accordionItem);
this.count++;
}
```