diff --git a/Xamarin-iOS/SfAutoComplete/Customizing-the-Suggestion-DropDown.md b/Xamarin-iOS/SfAutoComplete/Customizing-the-Suggestion-DropDown.md index 76f46bdd..3adf77c0 100644 --- a/Xamarin-iOS/SfAutoComplete/Customizing-the-Suggestion-DropDown.md +++ b/Xamarin-iOS/SfAutoComplete/Customizing-the-Suggestion-DropDown.md @@ -1,19 +1,19 @@ --- -layout : post -title : MaximumDropDownHeight for Syncfusion® AutoComplete control in Xamarin.iOS -description : Learn how to set the MaximumDropDownHeight in AutoComplete -platform : Xamarin.iOS -control : AutoComplete -documentation : ug +layout: post +title: DropDown Height Configuration in Syncfusion® AutoComplete +description: Learn how to set the MaximumDropDownHeight in AutoComplete control to customize the dropdown suggestion display. +platform: xamarin.ios +control: AutoComplete +documentation: ug --- # Customizing the Suggestion DropDown -The suggestion list displaying behavior can be customized based on the entered text and delays in displaying the items. +The suggestion list display behavior can be customized based on the entered text and delays in displaying the items. -## Set Minimum Prefix Character +## Set Minimum Prefix Characters -Instead of displaying suggestion list on every text entry, the most possible match can be filtered and displayed after few text entries. This can be done by modifying `MinimumPrefixCharacters`. +Instead of displaying the suggestion list on every text entry, the most relevant matches can be filtered and displayed after a few text entries. This can be achieved by modifying the `MinimumPrefixCharacters` property. N> The default property value is 1. @@ -32,9 +32,9 @@ countryAutocomplete.MinimumPrefixCharacters=2; ## Set Popup Delay -We can delay the time taken to display the dropdown with suggestion list by using the `PopUpDelay` property in SfAutoComplete . +You can delay the time taken to display the dropdown with the suggestion list by using the `PopUpDelay` property in SfAutoComplete. -N> The default value is 0. The property value is maintained in milliseconds. +N> The default value is 0. The property value is specified in milliseconds. {% tabs %} @@ -49,9 +49,9 @@ countryAutoComplete.PopUpDelay = 100; ## Set Maximum Height to the DropDown -The height of the drop-down portion of the SfAutocomplete control can be varied using `MaximumDropDownHeight` property. +The height of the dropdown portion of the SfAutoComplete control can be customized using the `MaximumDropDownHeight` property. -N> The `MaximumDropDownHeight` value can be any positive integer value +N> The `MaximumDropDownHeight` value can be any positive integer value. {% tabs %} @@ -65,9 +65,9 @@ countryAutoComplete.MaxDropDownHeight = 90; ![Maximum drop down height](images/maximumdropdownheight.png) -## Set border color to the DropDown +## Set Border Color to the DropDown -The DropDownBorderColor property is used to change the border color of DropDown. The following code example demonstrates how to change the border color of DropDown. +The `DropDownBorderColor` property is used to change the border color of the dropdown. The following code example demonstrates how to change the border color of the dropdown. {% tabs %} diff --git a/Xamarin-iOS/SfAutoComplete/Diacritic-Sensitivity.md b/Xamarin-iOS/SfAutoComplete/Diacritic-Sensitivity.md index c3d2efea..8fd646ee 100644 --- a/Xamarin-iOS/SfAutoComplete/Diacritic-Sensitivity.md +++ b/Xamarin-iOS/SfAutoComplete/Diacritic-Sensitivity.md @@ -1,15 +1,15 @@ --- -layout : post -title : Diacritic sensitivity in Syncfusion® SfAutoComplete control for Xamarin.iOS -description : Learn how to enable and disable Diacritic sensitivity in SfAutoComplete -platform : xamarin.ios -control : AutoComplete -documentation : ug +layout: post +title: Diacritic Sensitivity in Syncfusion® SfAutoComplete iOS +description: Learn how to enable and disable Diacritic sensitivity in SfAutoComplete control to handle accented characters. +platform: xamarin.ios +control: AutoComplete +documentation: ug --- # Diacritic Sensitivity -The control does not stick with one type of keyboard, so you can populate items from a language with letters containing diacritics, and search for them with English characters from an en-US keyboard. Users can enable or disable the diacritic sensitivity with the `IgnoreDiacritic` property. In the below code example we have illustrate how to enables the diacritic sensitivity so that items in the suggestion list get populated by entering any diacritic character of that alphabet. +The control is not restricted to one type of keyboard, so you can populate items from a language with letters containing diacritics and search for them with English characters from an en-US keyboard. Users can enable or disable diacritic sensitivity using the `IgnoreDiacritic` property. In the code example below, we demonstrate how to enable diacritic sensitivity so that items in the suggestion list are populated by entering any diacritic character of that alphabet. {% tabs %} @@ -34,5 +34,4 @@ countryAutoComplete.IgnoreDiacritic = false; {% endtabs %} -![](images/Diacritic.png) - +![Diacritic sensitivity example](images/Diacritic.png) diff --git a/Xamarin-iOS/SfAutoComplete/Events.md b/Xamarin-iOS/SfAutoComplete/Events.md index 18a1c6ed..af00391c 100644 --- a/Xamarin-iOS/SfAutoComplete/Events.md +++ b/Xamarin-iOS/SfAutoComplete/Events.md @@ -1,15 +1,15 @@ --- -layout : post -title : Events in Syncfusion® SfAutoComplete control for Xamarin.iOS -description : Learn how to handle the Events in SfAutoComplete -platform : xamarin.ios -control : AutoComplete -documentation : ug +layout: post +title: Events in Syncfusion® SfAutoComplete control for Xamarin.iOS +description: Learn how to handle various Events in SfAutoComplete control including selection, text changed, and suggestion events. +platform: xamarin.ios +control: AutoComplete +documentation: ug --- # Events -The Events in SfAutoComplete are: +The events in SfAutoComplete are: * FocusChanged @@ -23,7 +23,7 @@ The Events in SfAutoComplete are: ## FocusChanged -The `FocusChanged` event occurs when the control gets the focus and loses the focus. The argument contains the following information. +The `FocusChanged` event occurs when the control gains focus or loses focus. The event argument contains the following information: @@ -32,7 +32,7 @@ The `FocusChanged` event occurs when the control gets the focus and loses the fo - +
HasFocusIndicates whether the control is in focused state or not.Indicates whether the control is in a focused state or not.
@@ -62,7 +62,7 @@ The `FocusChanged` event occurs when the control gets the focus and loses the fo ## SelectionChanged -The `SelectionChanged` event is triggered after selecting an item among the filtered suggestions in SfAutoComplete. +The `SelectionChanged` event is triggered after selecting an item from the filtered suggestions in SfAutoComplete. The SelectionChanged event returns the following arguments: @@ -73,11 +73,11 @@ The SelectionChanged event returns the following arguments: AddedItems -Shows recently added item in AutoComplete. +Shows the recently added item in AutoComplete. RemovedItems -Shows recently removed items in AutoComplete. +Shows the recently removed items in AutoComplete. Value @@ -105,9 +105,9 @@ The SelectionChanged event returns the following arguments: ## SelectionChanging -The `SelectionChanging` event is triggered when you select an item among the filtered suggestions in SfAutoComplete. +The `SelectionChanging` event is triggered when you select an item from the filtered suggestions in SfAutoComplete. -The SelectionChanging event returns the following argument: +The SelectionChanging event returns the following arguments: @@ -120,7 +120,7 @@ The SelectionChanging event returns the following argument: - +
CancelRestricts the item to be selected.Restricts the item from being selected.
@@ -177,7 +177,7 @@ The TextChanged event returns the following argument: ## FilterCollectionChanged -The `FilterCollectionChanged` event is triggered whenever the items gets filtered in the suggestion. +The `FilterCollectionChanged` event is triggered whenever items are filtered in the suggestion list. The FilterCollectionChanged event returns the following argument: @@ -188,7 +188,7 @@ The FilterCollectionChanged event returns the following argument: Value -Holds the filtered items in the suggestion. +Holds the filtered items in the suggestion list. diff --git a/Xamarin-iOS/SfAutoComplete/Getting-Started.md b/Xamarin-iOS/SfAutoComplete/Getting-Started.md index 2c9321e9..211c73e1 100644 --- a/Xamarin-iOS/SfAutoComplete/Getting-Started.md +++ b/Xamarin-iOS/SfAutoComplete/Getting-Started.md @@ -1,15 +1,15 @@ --- -layout : post -title : Getting Started with Syncfusion® AutoComplete control for Xamarin.iOS -description : Learn here about getting started with Syncfusion® Essential® Xamarin.iOS AutoComplete Control, its elements, and more. -platform : xamarin.ios -control : AutoComplete -documentation : ug +layout: post +title: Getting Started with Syncfusion® AutoComplete for Xamarin.iOS +description: Learn here about getting started with Syncfusion® Essential® Xamarin.iOS AutoComplete Control, its elements, and more. +platform: xamarin.ios +control: AutoComplete +documentation: ug --- # Getting Started with Xamarin.iOS AutoComplete -This section explains you the steps to configure a SfAutoComplete control in a real-time scenario and also provides a walk-through on some of the customization features available in SfAutoComplete control. +This section explains the steps to configure an SfAutoComplete control in a real-time scenario and also provides a walk-through of some of the customization features available in the SfAutoComplete control. ## Referencing Essential Studio® Components in Your Solution @@ -17,13 +17,13 @@ After installing Essential Studio® for Xamarin, you can find all the {Syncfusion Installed location}\Essential Studio {version number}\lib -And below assembly reference to the iOS unified project. +Add the following assembly reference to the iOS unified project: iOS-unifed\Syncfusion.SfAutoComplete.iOS.dll ## Add SfAutoComplete -* Adding namespace for the added assemblies. +* Add the namespace for the added assemblies. {% tabs %} @@ -35,7 +35,7 @@ iOS-unifed\Syncfusion.SfAutoComplete.iOS.dll {% endtabs %} -* Now add the SfAutoComplete control with a required optimal name by using the included namespace. +* Now add the SfAutoComplete control with a required optimal name using the included namespace. {% tabs %} @@ -51,7 +51,7 @@ this.AddSubview(countryAutoComplete); ## Add Items -A list of string with country names are created and added to auto complete source. This list will be populated as suggestion list based on text entry. +A list of strings with country names is created and added to the AutoComplete source. This list will be populated as a suggestion list based on text entry. {% tabs %} @@ -71,9 +71,9 @@ countryAutoComplete.AutoCompleteSource= countryList; ## Set Filter Mode -Filters can be applied to the displayed items based on starting letter. We can also append the first item from the suggested list to the TextBox. This can be done by using the `SuggestionMode` and `AutoCompleteMode` properties in SfAutoComplete control. +Filters can be applied to the displayed items based on the starting letter. You can also append the first item from the suggested list to the TextBox. This can be achieved by using the `SuggestionMode` and `AutoCompleteMode` properties in the SfAutoComplete control. -The following example shows the SfAutoComplete control which suggest the country list starting with the letter U. +The following example shows the SfAutoComplete control which suggests countries from the list starting with the letter "U". {% tabs %} diff --git a/Xamarin-iOS/SfAutoComplete/Header-and-Footer.md b/Xamarin-iOS/SfAutoComplete/Header-and-Footer.md index fdebf672..11a1ac14 100644 --- a/Xamarin-iOS/SfAutoComplete/Header-and-Footer.md +++ b/Xamarin-iOS/SfAutoComplete/Header-and-Footer.md @@ -1,28 +1,28 @@ --- -layout : post -title : Header and Footer in Syncfusion® SfAutoComplete control for Xamarin.iOS -description : Learn how to enable Header and Footer in SfAutoComplete -platform : xamarin.ios -control : AutoComplete -documentation : ug +layout: post +title: Syncfusion® SfAutoComplete Header Footer for Xamarin.iOS +description: Learn how to enable and configure Header and Footer in SfAutoComplete control to enhance user interface. +platform: xamarin.ios +control: AutoComplete +documentation: ug --- # Header and Footer -We can provide Header and Footer view in the suggestion list in SfAutoComplete by enabling `ShowDropDownHeaderView` and `ShowDropDownFooterView`. +You can provide header and footer views in the suggestion list in SfAutoComplete by enabling `ShowDropDownHeaderView` and `ShowDropDownFooterView`. ## Header Content -We can provide Header Content at the top of the AutoComplete's Suggestion box. `DropDownHeaderView` property is used to set the content of the header. The following code example illustrate how to set Header content in SfAutoComplete. The height of the Header in the SfAutoComplete can be adjusted by the property `DropDownHeaderViewHeight`. +You can provide header content at the top of the AutoComplete's suggestion box. The `DropDownHeaderView` property is used to set the content of the header. The following code example illustrates how to set header content in SfAutoComplete. The height of the header in the SfAutoComplete can be adjusted using the `DropDownHeaderViewHeight` property. {% tabs %} {% highlight C# %} -//Shows the header view +// Shows the header view countryAutoComplete.ShowDropDownHeaderView = true; -//Set height of the Header view +// Set height of the header view countryAutoComplete.DropDownHeaderViewHeight = 50; UILabel label = new UILabel(); label.Text = "Search for U"; @@ -34,21 +34,20 @@ countryAutoComplete.DropDownHeaderView = label; {% endtabs %} -![](images/Header.png) - +![Header view in AutoComplete](images/Header.png) ## Footer Content -We can provide Footer Content at the bottom of the AutoComplete's Suggestion box. `DropDownFooterView` property is used to set the content of the footer. The following code example illustrate how to set Footer content in SfAutoComplete. The height of the Header in the SfAutoComplete can be adjusted by the property `DropDownFooterViewHeight`. +You can provide footer content at the bottom of the AutoComplete's suggestion box. The `DropDownFooterView` property is used to set the content of the footer. The following code example illustrates how to set footer content in SfAutoComplete. The height of the footer in the SfAutoComplete can be adjusted using the `DropDownFooterViewHeight` property. {% tabs %} {% highlight C# %} -//Shows the footer view +// Shows the footer view countryAutoComplete.ShowDropDownFooterView = true; -//Set height of the Footer view +// Set height of the footer view countryAutoComplete.DropDownFooterViewHeight = 50; UILabel label = new UILabel(); label.Text = "Add New"; @@ -59,4 +58,4 @@ countryAutoComplete.DropDownFooterView = label; {% endtabs %} -![](images/Footer.png) +![Footer view in AutoComplete](images/Footer.png) diff --git a/Xamarin-iOS/SfAutoComplete/Maximum-display-item-with-Expander.md b/Xamarin-iOS/SfAutoComplete/Maximum-display-item-with-Expander.md index 6e617a0e..88753f62 100644 --- a/Xamarin-iOS/SfAutoComplete/Maximum-display-item-with-Expander.md +++ b/Xamarin-iOS/SfAutoComplete/Maximum-display-item-with-Expander.md @@ -1,15 +1,15 @@ --- -layout : post -title : MatchHighlighting in Syncfusion® SfAutoComplete control for Xamarin.iOS -description : Learn how to highlight the matched text in SfAutoComplete -platform : xamarin.ios -control : AutoComplete -documentation : ug +layout: post +title: Syncfusion® SfAutoComplete Maximum Display Item with Expander +description: Learn how to restrict the number of suggestions displayed and load remaining items using LoadMore functionality in SfAutoComplete +platform: xamarin.ios +control: AutoComplete +documentation: ug --- # Maximum Display Item with Expander -Restrict the number of suggestions displayed and have the remaining items loaded by selecting LoadMore.We can restrict maximum suggestion to be displayed with the `MaximumSuggestion` property. We can set the desire text for the displaying the Load more text with the property `LoadMoreText`. +Restrict the number of suggestions displayed and load the remaining items by selecting LoadMore. You can restrict the maximum number of suggestions to be displayed using the `MaximumSuggestion` property. You can set the desired text for displaying the Load More option using the `LoadMoreText` property. {% tabs %} @@ -22,20 +22,20 @@ countryAutoComplete.SuggestionMode=SuggestionMode.StartsWith; {% endhighlight %} {% endtabs %} -### Restricting the maximum display of item dynamically +## Restricting the Maximum Display of Items Dynamically -We can restrict the maximum display of items dynamically by calling `LoadMore` method. The user can dynamically change the maximum suggestion count by calling LoadMore method by giving the maximum suggestion as the argument inside. +You can restrict the maximum display of items dynamically by calling the `LoadMore` method. The maximum suggestion count can be changed dynamically by calling the LoadMore method with the maximum suggestion count as an argument. {% tabs %} {% highlight c# %} -// without passing arguments +// Without passing arguments countryAutoComplete.LoadMore(); -// with passing arguments +// With passing arguments countryAutoComplete.LoadMore(5); {% endhighlight %} {% endtabs %} -![](images/loadmore.png) \ No newline at end of file +![Load More](images/loadmore.png) diff --git a/Xamarin-iOS/SfAutoComplete/Multiple-selection.md b/Xamarin-iOS/SfAutoComplete/Multiple-selection.md index 6a8f8ce1..ea90aade 100644 --- a/Xamarin-iOS/SfAutoComplete/Multiple-selection.md +++ b/Xamarin-iOS/SfAutoComplete/Multiple-selection.md @@ -1,15 +1,15 @@ --- -layout : post -title : Multi Selection in Syncfusion® SfAutoComplete control for Xamarin.iOS -description : Learn how to select multiple items in SfAutoComplete -platform : xamarin.ios -control : AutoComplete -documentation : ug +layout: post +title: Syncfusion® SfAutoComplete Multiple Selection for iOS +description: Learn how to enable and configure multiple item selection in SfAutoComplete control to allow users to choose several options. +platform: xamarin.ios +control: AutoComplete +documentation: ug --- # Multiple Selection -Select multiple items from a suggestion list. There are two ways to perform multi selection in autocomplete. +Select multiple items from a suggestion list. There are two ways to perform multiple selection in AutoComplete: * Token Representation @@ -17,7 +17,7 @@ Select multiple items from a suggestion list. There are two ways to perform mult ## Token Representation -Selected items will be displayed with a customizable token representation and the users can remove each tokenized item with the close button. +Selected items will be displayed with a customizable token representation, and users can remove each tokenized item using the close button. {% tabs %} @@ -32,11 +32,10 @@ countryAutoComplete.TokensWrapMode=TokensWrapMode.Wrap; ### Wrap Mode of Token -The selected item can be displayed as token inside SfAutoComplete in two ways. They are +The selected items can be displayed as tokens inside SfAutoComplete in two ways: -* `Wrap` - When `TokensWrapMode` is set to `Wrap` the selected items will be wrap to the next line of the SfAutoComplete. - -* `None` - When `TokensWrapMode` is set to `None` the selected item will be wrap in horizontal orientation. +* **Wrap** - When `TokensWrapMode` is set to `Wrap`, the selected items will wrap to the next line of the SfAutoComplete. +* **None** - When `TokensWrapMode` is set to `None`, the selected items will be arranged in horizontal orientation. {% tabs %} @@ -189,27 +188,19 @@ string[] CustomerNames2 = new string[] {% endtabs %} -![](images/TokenRepresentationWrap.png) +![Selected items wrapped to multiple lines](images/TokenRepresentationWrap.png) ### Token Customization -Customization can be done for Token. There are various ways to customize the tokens. They are as follows. - -* `TextColor` - sets the color of the text inside the token. - -* `FontSize` - sets the size of the Font inside the token. - -* `FontFamily` - sets the Font family for the text inside the token. - -* `BackgroundColor` - sets the background color of the token. - -* `SelectedBackgroundColor` - sets the background color of the token when it is selected. - -* `IsCloseButtonVisible` - Enables and disables the close button inside SfAutoComplete. - -* `DeleteButtonColor` - sets the color of the close button inside SfAutoComplete. - -* `CornerRadius` - sets the corner radius for the token. +Tokens can be customized in various ways using the following properties: +* **TextColor** - Sets the color of the text inside the token. +* **FontSize** - Sets the size of the font inside the token. +* **FontFamily** - Sets the font family for the text inside the token. +* **BackgroundColor** - Sets the background color of the token. +* **SelectedBackgroundColor** - Sets the background color of the token when it is selected. +* **IsCloseButtonVisible** - Enables and disables the close button inside the token. +* **DeleteButtonColor** - Sets the color of the close button inside the token. +* **CornerRadius** - Sets the corner radius for the token. {% tabs %} @@ -233,11 +224,11 @@ autoComplete.TokenSettings = token; {% endtabs %} -![](images/Token_iOS.png) +![Selected items on iOS](images/Token_iOS.png) ## Delimiter -When selecting the multiple items, the selected items can be divided with a desired character given for a delimiter. We can set delimiter character with the `Delimiter` property. +When selecting multiple items, the selected items can be separated with a desired character specified as a delimiter. You can set the delimiter character using the `Delimiter` property. {% tabs %} @@ -250,5 +241,5 @@ countryAutoComplete.Delimiter="#"; {% endtabs %} -![](images/Delimiter.png) +![Items separated by Delimiter Text](images/Delimiter.png) diff --git a/Xamarin-iOS/SfAutoComplete/No-Result-Found.md b/Xamarin-iOS/SfAutoComplete/No-Result-Found.md index a051f3a1..11d2642b 100644 --- a/Xamarin-iOS/SfAutoComplete/No-Result-Found.md +++ b/Xamarin-iOS/SfAutoComplete/No-Result-Found.md @@ -1,15 +1,16 @@ --- -layout : post -title : No Result Found Text in Syncfusion® SfAutoComplete control for Xamarin.iOS -description : Learn how to display the no result found text in SfAutoComplete -platform : xamarin.ios -control : AutoComplete -documentation : ug +layout: post +title: Syncfusion® SfAutoComplete No Results Found Text for iOS +description: Learn how to display the no results found text in SfAutoComplete control and customize the message for users. +description: Learn how to display the no results found text in SfAutoComplete control and customize the message for users. +platform: xamarin.ios +control: AutoComplete +documentation: ug --- # No Results Found -When the entered item is not in the suggestion list, SfAutoComplete displays a text indicating there is no search results found. We can set the desire text to be displayed for indicating no results found with the `NoResultsFoundText` property. +When the entered item is not in the suggestion list, SfAutoComplete displays text indicating that no search results were found. You can set the desired text to be displayed for indicating no results found using the `NoResultsFoundText` property. {% tabs %} @@ -26,7 +27,7 @@ countryAutoComplete.SuggestionMode = SuggestionMode.StartsWith; ## Customizing NoResultsFoundText -The `NoResultsFoundTextColor` and `NoResultsFoundFont` are the properties used to customize the foreground color and font of the NoResultsFoundText. +The `NoResultsFoundTextColor` and `NoResultsFoundFont` properties are used to customize the foreground color and font of the NoResultsFoundText. {% tabs %} diff --git a/Xamarin-iOS/SfAutoComplete/Overview.md b/Xamarin-iOS/SfAutoComplete/Overview.md index 7b3ecb01..4a9df9eb 100644 --- a/Xamarin-iOS/SfAutoComplete/Overview.md +++ b/Xamarin-iOS/SfAutoComplete/Overview.md @@ -9,32 +9,30 @@ documentation: ug # Xamarin.iOS AutoComplete Overview -The Essential® Xamarin.iOS AutoComplete widget provides the suggestions while typing. The suggested text can be appended to the original text or it can be displayed in a drop-down list. Also provides a gesture friendly UI to perform operations like Suggest, Append and SuggestAppend. +The Essential® Xamarin.iOS AutoComplete control provides suggestions while typing. The suggested text can be appended to the original text or displayed in a drop-down list. It also provides a gesture-friendly UI to perform operations like Suggest, Append, and SuggestAppend. -Essential® AutoComplete can be use in any search box. +Essential® AutoComplete can be used in any search box. ![Xamarin.iOS AutoComplete Overview](images/overview.png) ## Key Features -* `Watermark` - The control shows the watermark text. +* **Watermark** - The control displays watermark text. -* `Autocomplete Mode` - The control provides you with suggestions based on a predefined collection while typing. +* **AutoComplete Mode** - The control provides suggestions based on a predefined collection while typing. -* `Suggestion Mode` - The suggestions list can be displayed with 8 types of search pattern. +* **Suggestion Mode** - The suggestions list can be displayed with 8 types of search patterns. -* `AutoCompleteSource` - A list of strings can be loaded to the control for displaying suggestions. +* **AutoCompleteSource** - A list of strings can be loaded to the control for displaying suggestions. -* `Multiple Selection` - AutoComplete provides 2 different ways to select multiple items from the suggestion list. They are using Token representation and Delimiter. +* **Multiple Selection** - AutoComplete provides 2 different ways to select multiple items from the suggestion list using Token representation and Delimiter. -* `Load More` - Restrict the number of suggestions displayed and have the remaining items loaded by selecting LoadMore. +* **Load More** - Restrict the number of suggestions displayed and load the remaining items by selecting LoadMore. -* `Header and Footer` - Header and Footer content can be given in the top and bottom of the Suggestion list in SfAutoComplete. +* **Header and Footer** - Header and Footer content can be added to the top and bottom of the suggestion list in SfAutoComplete. -* `Diacritic Sense` - AutoComplete provides populating the items from a language with letters containing diacritics, and search for them with English characters from an en-US keyboard. - -* `Highlighting Text` - AutoComplete provides highlighting the matching text in the Suggestion list based on the input given in it. - -* `Custom filter` - AutoComplete provides the user to filter the item in the Suggestion list based on their filtering condition. +* **Diacritic Sensitivity** - AutoComplete supports populating items from languages with letters containing diacritics and allows searching for them with English characters from an en-US keyboard. +* **Text Highlighting** - AutoComplete provides highlighting of matching text in the suggestion list based on the input provided. +* **Custom Filter** - AutoComplete allows users to filter items in the suggestion list based on their custom filtering conditions. diff --git a/Xamarin-iOS/SfAutoComplete/Populating-Items.md b/Xamarin-iOS/SfAutoComplete/Populating-Items.md index d8d2670c..6af2d0c5 100644 --- a/Xamarin-iOS/SfAutoComplete/Populating-Items.md +++ b/Xamarin-iOS/SfAutoComplete/Populating-Items.md @@ -1,21 +1,21 @@ --- -layout : post -title : AutoCompleteSource mode for Syncfusion® AutoComplete control in Xamarin.iOS -description : Learn how to use AutoCompleteSource in AutoComplete -platform : xamarin.ios -control : AutoComplete -documentation : ug +layout: post +title: Syncfusion® AutoComplete Source Mode for Xamarin.iOS +description: Learn how to use AutoCompleteSource in AutoComplete control to populate items and configure data sources. +platform: xamarin.ios +control: AutoComplete +documentation: ug --- # Populating Items -SfAutoComplete control, supports binding to different data sources such as IList Data Source, Observable Collection Data Source. +The SfAutoComplete control supports binding to different data sources such as IList Data Source and Observable Collection Data Source. -## Through AutoComplete Source Item +## Through AutoCompleteSource Item -* The `AutoCompleteSource` property in the SfAutoComplete control is used to set the list of strings to the suggestions dropdown. +* The `AutoCompleteSource` property in the SfAutoComplete control is used to set the list of strings for the suggestions dropdown. -* To create a Text Box that automatically completes input strings by comparing the prefix being entered to the prefixes of all strings in a maintained source. This is useful for Text Box controls in which URLs, addresses, file names, or commands will be frequently entered. +* This creates a text box that automatically completes input strings by comparing the prefix being entered to the prefixes of all strings in a maintained source. This is useful for text box controls where URLs, addresses, file names, or commands will be frequently entered. {% tabs %} @@ -31,13 +31,13 @@ countryAutoComplete.AutoCompleteSource=countryList; {% endtabs %} -![](images/autocompletesource.png) +![Autocomplete source options](images/autocompletesource.png) -## Through Binding +## Through Data Binding -DataSource is a collection of SfAutoComplete items which is capable of holding any objects and displays the items based on the provided `DisplayMemberPath` value. +DataSource is a collection of SfAutoComplete items that can hold any objects and displays the items based on the provided `DisplayMemberPath` value. -To populate items using data source, create a model class with the properties that to be bound. +To populate items using a data source, create a model class with the properties to be bound. {% tabs %} @@ -66,7 +66,7 @@ return Age; {% endtabs %} -* Create Student collection using Student class and assign the collection to DataSource property of SfAutoComplete +* Create a Student collection using the Student class and assign the collection to the DataSource property of SfAutoComplete. {% tabs %} @@ -104,7 +104,7 @@ return NSDictionary.FromObjectsAndKeys(objects, keys); {% endtabs %} -* Here student collection has two properties so we should tell the control, by which property, it has to provide suggestions. In this case, let us make the control to provide suggestions based on Name. +* Since the student collection has two properties, you need to specify which property the control should use to provide suggestions. In this case, configure the control to provide suggestions based on the Name property. {% tabs %} @@ -119,6 +119,6 @@ studentAutoComplete.SelectedValuePath = "Age"; {% endtabs %} -* `DisplayMemberPath` decides the suggestions to be shown in dropdown. Setting the `SelectedValuePath` property will make `SelectedValue` property to return the value you have selected here. +* The `DisplayMemberPath` determines the suggestions to be shown in the dropdown. Setting the `SelectedValuePath` property will make the `SelectedValue` property return the value you have selected. -![](images/datasource.png) +![Data source options](images/datasource.png) diff --git a/Xamarin-iOS/SfAutoComplete/Suggestion-Display-Mode.md b/Xamarin-iOS/SfAutoComplete/Suggestion-Display-Mode.md index f46439d6..cdad843e 100644 --- a/Xamarin-iOS/SfAutoComplete/Suggestion-Display-Mode.md +++ b/Xamarin-iOS/SfAutoComplete/Suggestion-Display-Mode.md @@ -1,15 +1,15 @@ --- -layout : post -title : AutoComplete mode in Syncfusion® AutoComplete control in Xamarin.iOS -description : Learn how to change the AutoComplete mode in AutoComplete -platform : xamarin.ios -control : AutoComplete -documentation : ug +layout: post +title: AutoComplete mode in Syncfusion® AutoComplete control in Xamarin.iOS +description: Learn how to change the AutoComplete mode in AutoComplete control to customize suggestion display behavior. +platform: xamarin.ios +control: AutoComplete +documentation: ug --- # Suggestion Display Mode -The `AutocompleteMode` property is used to decide the suggestion pattern for displaying the filtered data according to the text entered. The different types of pattern are described below +The `AutoCompleteMode` property is used to determine the suggestion pattern for displaying the filtered data according to the text entered. The different types of patterns are described below: * Suggest @@ -17,11 +17,11 @@ The `AutocompleteMode` property is used to decide the suggestion pattern for dis * Suggest and Append -N> The default option is suggest mode. +N> The default option is Suggest mode. ## Append -Append - Appends the first matching string with the entered character. +**Append** - Appends the first matching string to the entered characters. {% tabs %} @@ -36,7 +36,7 @@ countryAutoComplete.AutoCompleteMode=SFAutoCompleteAutoCompleteMode.SFAutoComple ## Suggest in Dropdown -Suggest - Displays the suggestion in the dropdown. +**Suggest** - Displays the suggestions in the dropdown. {% tabs %} @@ -48,9 +48,9 @@ countryAutoComplete.AutoCompleteMode=SFAutoCompleteAutoCompleteMode.SFAutoComple {% endtabs %} -## Both Append and Suggest in DropDown +## Both Append and Suggest in Dropdown -SuggestAppend - Displays the suggestion in the dropdown along with appending the first matching string. +**SuggestAppend** - Displays the suggestions in the dropdown along with appending the first matching string. {% tabs %} @@ -61,5 +61,4 @@ countryAutoComplete.AutoCompleteMode=SFAutoCompleteAutoCompleteMode.SFAutoComple {% endhighlight %} {% endtabs %} - -![](images/autocompletemode.png) +![Autocomplete display modes](images/autocompletemode.png) diff --git a/Xamarin-iOS/SfAutoComplete/Various-Filter-options-for-Suggestion.md b/Xamarin-iOS/SfAutoComplete/Various-Filter-options-for-Suggestion.md index 1f18c5a5..8933ebf3 100644 --- a/Xamarin-iOS/SfAutoComplete/Various-Filter-options-for-Suggestion.md +++ b/Xamarin-iOS/SfAutoComplete/Various-Filter-options-for-Suggestion.md @@ -1,19 +1,19 @@ --- -layout : post -title : Suggestion mode for Syncfusion® AutoComplete control in Xamarin.iOS -description : Learn how to display suggestion mode in AutoComplete -platform : xamarin.ios -control : AutoComplete -documentation : ug +layout: post +title: Suggestion mode for Syncfusion® AutoComplete control in Xamarin.iOS +description: Learn how to display suggestion mode in AutoComplete control with various filter options for enhanced user experience. +platform: xamarin.ios +control: AutoComplete +documentation: ug --- -# Various Filter options for Suggestion +# Various Filter Options for Suggestion -By default, the items that matches with the starting letter will be displayed as suggestion. This phenomenon can be changed using `SuggestionMode` property, which provides various option to filter the data according to the text entered. There are eight types of suggestion modes and are described as follows. +By default, items that match the starting letter will be displayed as suggestions. This behavior can be changed using the `SuggestionMode` property, which provides various options to filter the data according to the text entered. There are eight types of suggestion modes described as follows: -## Words that Starts with Input Text +## Words that Start with Input Text -Displays the list of suggestions based on starting letter. +Displays the list of suggestions based on the starting letter. {% tabs %} @@ -25,11 +25,11 @@ countryAutoComplete.SuggestionMode=SFAutoCompleteSuggestionMode.SFAutoCompleteSu {% endtabs %} -![](images/startswith.png) +![Filter results starting with typed text](images/startswith.png) ### Filter with Character Casing -Displays the list of suggestions based on starting letter with case sensitive. +Displays the list of suggestions based on the starting letter with case sensitivity. {% tabs %} @@ -41,11 +41,11 @@ countryAutoComplete.SuggestionMode=SFAutoCompleteSuggestionMode.SFAutoCompleteSu {% endtabs %} -![](images/startswithcasesensitive.png) +![Filter results starting with typed text case sensitive](images/startswithcasesensitive.png) -## Words that Contains the Input Text +## Words that Contain the Input Text -Displays the list of suggestions, if autocomplete list contains that words. +Displays the list of suggestions if the AutoComplete list contains those words. {% tabs %} @@ -57,11 +57,11 @@ countryAutoComplete.SuggestionMode=SFAutoCompleteSuggestionMode.SFAutoCompleteSu {% endtabs %} -![](images/contains.png) +![Filter results containing typed text](images/contains.png) ### Filter with Character Casing -Displays the list of suggestions, if autocomplete list contains that words with case sensitive. +Displays the list of suggestions if the AutoComplete list contains those words with case sensitivity. {% tabs %} @@ -73,11 +73,11 @@ Displays the list of suggestions, if autocomplete list contains that words with {% endtabs %} -![](images/containswithcasesensitive.png) +![Filter results containing typed text case sensitive](images/containswithcasesensitive.png) -## Words that Equals to the Input Text +## Words that Equal the Input Text -Displays the word that matches. +Displays the word that matches exactly. {% tabs %} @@ -89,11 +89,11 @@ Displays the word that matches. {% endtabs %} -![](images/equals.png) +![Filter results matching exact text](images/equals.png) ### Filter with Character Casing -Displays the word that matches with case sensitive. +Displays the word that matches exactly with case sensitivity. {% tabs %} @@ -105,11 +105,11 @@ Displays the word that matches with case sensitive. {% endtabs %} -![](images/equalswithcasesensitive.png) +![Filter results matching exact text case sensitive](images/equalswithcasesensitive.png) -## Words that Ends with Input Text +## Words that End with Input Text -Displays the list of suggestions based on ending word. +Displays the list of suggestions based on the ending characters. {% tabs %} @@ -121,11 +121,11 @@ Displays the list of suggestions based on ending word. {% endtabs %} -![](images/endswith.png) +![Filter results ending with typed text](images/endswith.png) ### Filter with Character Casing -Displays the list of suggestions based on the ending word with case sensitive. +Displays the list of suggestions based on the ending characters with case sensitivity. {% tabs %} @@ -137,11 +137,11 @@ Displays the list of suggestions based on the ending word with case sensitive. {% endtabs %} -![](images/endswithcasesensitive.png) +![Filter results ending with typed text case sensitive](images/endswithcasesensitive.png) ## Custom Filtering -Displays the suggestion based on the custom words in SfAutoComplete Control. +Displays suggestions based on custom filtering logic in the SfAutoComplete control. {% tabs %} @@ -153,4 +153,4 @@ Displays the suggestion based on the custom words in SfAutoComplete Control. {% endtabs %} -![](images/custom.png) +![Custom filter results](images/custom.png) diff --git a/Xamarin-iOS/SfAutoComplete/Watermark.md b/Xamarin-iOS/SfAutoComplete/Watermark.md index fd23d945..55206b15 100644 --- a/Xamarin-iOS/SfAutoComplete/Watermark.md +++ b/Xamarin-iOS/SfAutoComplete/Watermark.md @@ -1,15 +1,15 @@ --- -layout : post -title : WaterMark in Syncfusion® Autocomplete control for Xamarin.iOS -description : Learn how to set the Watermark in AutoComplete -platform : xamarin.ios -control : AutoComplete -documentation : ug +layout: post +title: Watermark in Syncfusion® AutoComplete control for Xamarin.iOS +description: Learn how to set the watermark in AutoComplete control to provide helpful placeholder text for users. +platform: xamarin.ios +control: AutoComplete +documentation: ug --- # Watermark -The `watermark` text is used to display some information regarding the SfAutoComplete. This watermark is visible when textbox is empty or null. The watermark text disappears when the user begin to type in the SfAutoComplete control. +The `Watermark` property is used to display placeholder information in the SfAutoComplete control. This watermark is visible when the text box is empty or null. The watermark text disappears when the user begins to type in the SfAutoComplete control. {% highlight C# %} @@ -17,4 +17,4 @@ countryAutoComplete.Watermark=(NSString)"Enter a country name"; {% endhighlight %} -![](images/watermark.png) +![Input field with watermark text](images/watermark.png) diff --git a/Xamarin-iOS/SfAutoComplete/highlighting-matched-text.md b/Xamarin-iOS/SfAutoComplete/highlighting-matched-text.md index 3c78b07d..0537a193 100644 --- a/Xamarin-iOS/SfAutoComplete/highlighting-matched-text.md +++ b/Xamarin-iOS/SfAutoComplete/highlighting-matched-text.md @@ -1,13 +1,13 @@ --- -layout : post -title : MatchHighlighting in Syncfusion® SfAutoComplete control for Xamarin.iOS -description : Learn how to highlight the matched text in SfAutoComplete -platform : xamarin.ios -control : AutoComplete -documentation : ug +layout: post +title: Syncfusion® SfAutoComplete Match Highlighting for iOS +description: Learn how to enable and customize text highlighting for matched text in SfAutoComplete control to enhance user search experience. +platform: xamarin.ios +control: AutoComplete +documentation: ug --- -# Highlighting matched text +# Highlighting Matched Text Highlight matching characters in a suggestion list to pick an item with more clarity. There are two ways to highlight the matching text: @@ -16,17 +16,16 @@ Highlight matching characters in a suggestion list to pick an item with more cla * MultipleOccurrence -The text highlight can be indicated with various customizing styles by enabling the below properties. They are +The text highlight can be customized with various styling options by configuring the following properties: -* HighlightedTextColor - sets the color of the highlighted text for differentiating the highlighted characters. +* **HighlightedTextColor** - Sets the color of the highlighted text for differentiating the highlighted characters. +* **HighlightTextFontAttributes** - Sets the FontAttributes of the highlighted text. -* HighlightTextFontAttributes - sets the FontAttributes of the highlighted text. - -N> The default Color of HighlightedTextColor is Blue and default FontAttribute of HighlightTextFontAttributes is None. +N> The default color of HighlightedTextColor is Blue and the default FontAttribute of HighlightTextFontAttributes is None. ## FirstOccurrence -It highlights the first position of the matching characters in the suggestion list. +This mode highlights the first position of the matching characters in the suggestion list. {% tabs %} @@ -41,11 +40,11 @@ countryAutoComplete.AutoCompleteSource=countryList; {% endtabs %} -![](images/FirstOccurrence.png) +![First occurrence of matched text highlighted](images/FirstOccurrence.png) ## MultipleOccurrence -It highlights the matching character that are present everywhere in the suggestion list for Contains case in SuggestionMode. +This mode highlights all matching characters that are present throughout the suggestion list when using the Contains mode in SuggestionMode. {% tabs %} @@ -60,5 +59,5 @@ countryAutoComplete.AutoCompleteSource=countryList; {% endtabs %} -![](images/MultipleOccurrence.png) +![Multiple occurrences of matched text highlighted](images/MultipleOccurrence.png) diff --git a/Xamarin-iOS/SfBusyIndicator/AnimationType.md b/Xamarin-iOS/SfBusyIndicator/AnimationType.md index a909da6d..060a4182 100644 --- a/Xamarin-iOS/SfBusyIndicator/AnimationType.md +++ b/Xamarin-iOS/SfBusyIndicator/AnimationType.md @@ -1,16 +1,19 @@ --- layout: post -title: AnimationTypes in Syncfusion® BusyIndicator control for Xamarin.iOS -description: This section provides the details about the various animation types in Syncfusion® BusyIndicator for Xamarin.iOS +title: Animation Types in Syncfusion® BusyIndicator control for Xamarin.iOS +description: This section provides details about the various animation types available in Syncfusion® BusyIndicator for Xamarin.iOS platform: xamarin.ios control: SfBusyIndicator documentation: ug --- +# BusyIndicator Animation Types -# BusyIndicator Animation Type +The `AnimationType` property for the SfBusyIndicator allows you to set one of the built-in animations available in the control. Each animation type provides a different visual style to indicate busy or loading states in your application. -The `AnimationType` property for the SfBusyIndicator allows you to set any one of the built-in animations available in the SfBusyIndicator. +## Setting Animation Type + +You can set the animation type using the `AnimationType` property as shown below: {% tabs %} diff --git a/Xamarin-iOS/SfBusyIndicator/Getting-Started.md b/Xamarin-iOS/SfBusyIndicator/Getting-Started.md index 8350422d..daf2e6de 100644 --- a/Xamarin-iOS/SfBusyIndicator/Getting-Started.md +++ b/Xamarin-iOS/SfBusyIndicator/Getting-Started.md @@ -1,7 +1,7 @@ --- layout: post title: Getting Started with Syncfusion® BusyIndicator control for Xamarin.iOS -description: This section provides the details about the initial users on Syncfusion® busyIndicator control for Xamarin.iOS platform +description: This section provides details for new users getting started with Syncfusion® BusyIndicator control for Xamarin.iOS platform platform: xamarin.ios control: SfBusyIndicator documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Getting Started with BusyIndicator -This section explains you the steps to configure a SfBusyIndicator control in a real-time scenario and also provides a walk-through on some of the customization features available in SfBusyIndicator control. +This section explains the steps to configure an SfBusyIndicator control in a real-time scenario and provides a walkthrough of the customization features available in the SfBusyIndicator control. ## Referencing Essential Studio® Components in Your Solution @@ -17,13 +17,14 @@ After installing Essential Studio® for Xamarin, you can find all the {Syncfusion Installed location}\Essential Studio {version number}\lib -And below assembly reference to the iOS unified project. +Add the following assembly reference to the iOS unified project: iOS-unified\Syncfusion.SfBusyIndicator.iOS.dll ## Add BusyIndicator -* Adding namespace for the added assemblies. +### Adding Namespace +Add the namespace for the referenced assemblies: {% tabs %} @@ -50,9 +51,9 @@ iOS-unified\Syncfusion.SfBusyIndicator.iOS.dll ## Set Animation Type -SfBusyIndicator provides 10 predefined animation types like Ball, Battery, Globe and so on. User can select any one of the animation types using `AnimationType`property. +SfBusyIndicator provides 10+ predefined animation types such as Ball, Battery, Globe, and more. You can select one of the animation types using the `AnimationType` property. -Following example depicts the battery type animation for SfBusyIndicator. +The following example shows how to set the battery animation type for SfBusyIndicator: {% tabs %} @@ -64,7 +65,7 @@ Following example depicts the battery type animation for SfBusyIndicator. {% endtabs %} -## Configure the Properties for SFBusyIndicator +## Configure Properties for SFBusyIndicator Size and color can be customized in SfBusyIndicator as follows. diff --git a/Xamarin-iOS/SfBusyIndicator/Make-Busy-Animation-Idle.md b/Xamarin-iOS/SfBusyIndicator/Make-Busy-Animation-Idle.md index 58323075..f901a838 100644 --- a/Xamarin-iOS/SfBusyIndicator/Make-Busy-Animation-Idle.md +++ b/Xamarin-iOS/SfBusyIndicator/Make-Busy-Animation-Idle.md @@ -1,15 +1,22 @@ --- layout: post title: IsBusy support in Syncfusion® BusyIndicator control for Xamarin.iOS -description: This section provides the details about how to enable and disable animation in BusyIndicator for Xamarin.iOS +description: This section provides details about how to enable and disable animations in BusyIndicator for Xamarin.iOS platform: xamarin.ios control: SfBusyIndicator documentation: ug --- -# Make Busy Animation Idle +# Control Busy Animation State -SfBusyIndicator control provides support to determine whether an animation needs to be executed or not. Setting the `IsBusy` property to false will stop the animation and removes the control from view. +The SfBusyIndicator control allows you to control whether animations are active or inactive using the `IsBusy` property. This property determines the visibility and animation state of the busy indicator. + +## IsBusy Property + +The `IsBusy` property is a boolean value that controls the animation state: + +- **true**: Shows the busy indicator and starts the animation +- **false**: Hides the busy indicator and stops the animation {% tabs %} diff --git a/Xamarin-iOS/SfBusyIndicator/Overview.md b/Xamarin-iOS/SfBusyIndicator/Overview.md index b859ad97..eff2e715 100644 --- a/Xamarin-iOS/SfBusyIndicator/Overview.md +++ b/Xamarin-iOS/SfBusyIndicator/Overview.md @@ -1,17 +1,18 @@ --- layout: post title: Overview of Syncfusion® BusyIndicator control for Xamarin.iOS -description: Overview and key features of BusyIndicator control +description: Overview and key features of Syncfusion® BusyIndicator control for Xamarin.iOS platform including customization options and implementation details. platform: xamarin.ios control: SfBusyIndicator documentation: ug --- -# SfBusyIndicator +# SfBusyIndicator Overview -SfBusyIndicator makes it easy to let the user know when an application is busy. Simply wrap the relevant content in an instance of the SfBusyIndicator control and toggle its `IsBusy` property to True during any long-running process. The SfBusyIndicator should be used to indicate activity while content is being loaded or the UI is blocked waiting for a resource to become available. +The SfBusyIndicator control provides an elegant way to indicate when your application is performing time-consuming operations. It displays animated visual feedback to users, letting them know that the application is actively working and hasn't frozen or become unresponsive. +Simply wrap the relevant content in an instance of the SfBusyIndicator control and toggle its `IsBusy` property to `true` during any long-running process. The SfBusyIndicator should be used to indicate activity while content is being loaded, data is being processed, or the UI is blocked waiting for a resource to become available. -![](images/overview.png) +![Overview of SfBusyIndicator](images/overview.png) ## Key Features diff --git a/Xamarin-iOS/SfBusyIndicator/Set-Header.md b/Xamarin-iOS/SfBusyIndicator/Set-Header.md index 80ff6d85..b5adbc93 100644 --- a/Xamarin-iOS/SfBusyIndicator/Set-Header.md +++ b/Xamarin-iOS/SfBusyIndicator/Set-Header.md @@ -1,7 +1,7 @@ --- layout: post title: Set title to the Syncfusion® BusyIndicator control for Xamarin.iOS -description: This section provides the details about how to set title and fontface to BusyIndicator control for Xamarin.iOS +description: This section provides details about how to set title and font properties for BusyIndicator control in Xamarin.iOS platform: xamarin.ios control: SfBusyIndicator documentation: ug @@ -9,7 +9,8 @@ documentation: ug # Set BusyIndicator Header -SfBusyIndicator provides option to set the text that indicates the information related to loading. This can be done using `Title` property. +The SfBusyIndicator provides an option to set descriptive text that provides information about the current loading operation. This can be accomplished using the `Title` property, which displays text beneath the animation. + {% tabs %} @@ -50,3 +51,4 @@ BusyIndicator with title BusyIndicator with font face {:.caption} + diff --git a/Xamarin-iOS/SfBusyIndicator/Sizing.md b/Xamarin-iOS/SfBusyIndicator/Sizing.md index 4114e918..5c2fb071 100644 --- a/Xamarin-iOS/SfBusyIndicator/Sizing.md +++ b/Xamarin-iOS/SfBusyIndicator/Sizing.md @@ -1,15 +1,15 @@ --- layout: post title: Sizing support in Syncfusion® BusyIndicator control for Xamarin.iOS -description: This section provides the details about how to customize the size of the animation type for Xamarin.iOS +description: This section provides details about how to customize the size of the animation for BusyIndicator in Xamarin.iOS platform: xamarin.ios control: SfBusyIndicator documentation: ug --- -# BusyIndicator ViewBox Size +# BusyIndicator ViewBox Sizing -Drawing size can be customized in SfBusyIndicator. `ViewBoxHeight` and `ViewBoxWidth` properties can be used to set height and width of the Indicator. +The drawing size of the SfBusyIndicator animation can be customized to fit your application's design requirements. The `ViewBoxHeight` and `ViewBoxWidth` properties allow you to set the height and width of the animation area, giving you precise control over the indicator's appearance. {% tabs %} diff --git a/Xamarin-iOS/SfCarousel/Linear-Arrangement.md b/Xamarin-iOS/SfCarousel/Linear-Arrangement.md index 871b30f9..1ecf797c 100644 --- a/Xamarin-iOS/SfCarousel/Linear-Arrangement.md +++ b/Xamarin-iOS/SfCarousel/Linear-Arrangement.md @@ -7,9 +7,9 @@ control: Carousel documentation: ug --- -# The Carousel Linear Arrangement +# Carousel Linear Arrangement -The Carousel items can be populated in the view in a stacked linear layout by setting the `ViewMode` property to Linear. The present option is `Default`. +Carousel items can be displayed in a stacked linear layout by setting the `ViewMode` property to `Linear`. The default option is `Default`, which displays items in the standard carousel view. {% highlight C# %} diff --git a/Xamarin-iOS/SfCarousel/animation.md b/Xamarin-iOS/SfCarousel/animation.md index f661d27f..c06121b6 100644 --- a/Xamarin-iOS/SfCarousel/animation.md +++ b/Xamarin-iOS/SfCarousel/animation.md @@ -1,16 +1,19 @@ --- layout: post -title: AnimationDuration in Syncfusion® Carousel control in Xamarin.iOS -description: This section provides the details about how to set the Duration in Carousel animation for Xamarin.iOS +title: Animation duration in Syncfusion® Carousel control for Xamarin.iOS +description: Learn how to configure animation duration for smooth transitions in Carousel control for Xamarin.iOS applications. platform: xamarin.ios control: Carousel documentation: ug --- -# The Carousel Animation +# Animation Duration -The `Duration` property of the SfCarousel control is used to specify the time taken to move an item to the selected item position. The duration is specified in seconds. The default value is 300 ms. +The `Duration` property of the SfCarousel control specifies the time required for an item to animate to the selected position during carousel transitions. This property controls the speed of the animation when users navigate between carousel items. +## Configuring Animation Duration + +The duration value is specified in milliseconds, with a default value of 300 milliseconds. You can customize this value to create faster or slower transitions based on your application's requirements. {% highlight C# %} SfCarousel carousel = new SfCarousel(); diff --git a/Xamarin-iOS/SfCarousel/getting-started.md b/Xamarin-iOS/SfCarousel/getting-started.md index a8db6c8f..d985ab29 100644 --- a/Xamarin-iOS/SfCarousel/getting-started.md +++ b/Xamarin-iOS/SfCarousel/getting-started.md @@ -1,7 +1,7 @@ --- layout: post title: Getting Started with Syncfusion® Carousel control for Xamarin.iOS -description: This section provides the details about the tour to initial users on Syncfusion® carousel control for Xamarin.iOS platform +description: This section provides details for new users getting started with Syncfusion® carousel control for Xamarin.iOS platform platform: xamarin.ios control: Carousel documentation: ug @@ -9,20 +9,20 @@ documentation: ug # Getting Started with Carousel -This section provides a quick overview for working with Essential® Carousel for Xamarin.iOS. It guides you to the entire process of creating a SfCarousel in your Application. +This section provides a quick overview for working with Essential® Carousel for Xamarin.iOS. It guides you through the entire process of creating an SfCarousel in your application. ## Referencing Essential Studio® components in your solution After installing Essential Studio® for Xamarin, you can find all the required assemblies in the installation folders, typically: {Syncfusion Installed location}\Essential Studio {version number}\lib -And below assembly reference to the iOS unified project. +Add the following assembly reference to the iOS unified project: iOS-unified\Syncfusion.SfCarousel.iOS.dll ## Add SfCarousel -* Adding namespace for the added assemblies. +* Add the namespace for the referenced assemblies: {% highlight C# %} @@ -31,8 +31,7 @@ using Syncfusion.SfCarousel.iOS; {% endhighlight %} - -* Now add the SfCarousel control with a required optimal name by using the included namespace. +* Now add the SfCarousel control using the included namespace: {% highlight C# %} @@ -43,7 +42,7 @@ this.AddSubview(carousel); ## Add Carousel Items -SfCarousel items can be populated with a collection of image data. An example to populate image collection as carousel items as follows +SfCarousel items can be populated with a collection of image data. The following example shows how to populate an image collection as carousel items: {% highlight c# %} @@ -60,7 +59,7 @@ carousel.DataSource = carouselItemCollection; ## Set Gap between Items -SfCarousel provides option to set the distance between the items in the panel. This can be done by using the `Offset` property in SfCarousel control. +SfCarousel provides an option to set the distance between items in the panel. This can be done using the `Offset` property in the SfCarousel control. {% highlight C# %} @@ -70,9 +69,9 @@ carousel.Offset = 20; {% endhighlight %} -## Setting the height and width of carousel's Item +## Setting the Height and Width of Carousel Items -`ItemHeight` and `ItemWidth` properties are used to change the height and width of carouselItem in carousel panel. +The `ItemHeight` and `ItemWidth` properties are used to change the height and width of carousel items in the carousel panel. {% highlight C# %} @@ -82,10 +81,9 @@ carousel.ItemHeight = 170; {% endhighlight %} +## Tilt Non-Selected Items -## Tilt Non Selected Items - -Items in the SfCarousel control can be rotated in user defined angle. `RotationAngle` property is used to decide the angle in which items should be rotated +Items in the SfCarousel control can be rotated at a user-defined angle. The `RotationAngle` property is used to specify the angle at which items should be rotated. {% highlight C# %} diff --git a/Xamarin-iOS/SfCarousel/how-to.md b/Xamarin-iOS/SfCarousel/how-to.md index c4b01abf..4add8d58 100644 --- a/Xamarin-iOS/SfCarousel/how-to.md +++ b/Xamarin-iOS/SfCarousel/how-to.md @@ -1,19 +1,19 @@ --- layout: post -title: Interaction in Syncfusion® Carousel Control in Xamarin.iOS. -description: Learn how to perform an operation while changing the carouselItem or Collection in Carousel for Xamarin.Android. +title: Interaction in Syncfusion® Carousel Control in Xamarin.iOS +description: Learn how to perform operations while changing the carouselItem or Collection in Carousel for Xamarin.iOS. platform: xamarin.ios control: Carousel documentation: ug --- -# How to perform an operation while changing the carouselItem? +# How to perform operations while changing the carouselItem? -We can perform operation while changing the carouselItem using `DidSelectItem` event. DidSelectItem event returns the index changed SfCarouselItem. +You can perform operations while changing the carouselItem using the `DidSelectItem` event. The `DidSelectItem` event returns the SfCarouselItem with the changed index. -### Delegate Definition: +## Delegate Definition -For getting carousel event, need to inherits SfCarouselDelegate class as like below. All events definitions are mentioned only DelegateClass. +To receive carousel events, you need to inherit from the `SfCarouselDelegate` class as shown below. All event definitions are mentioned in the delegate class. {% highlight C# %} @@ -27,9 +27,9 @@ public class DelegateClass : SfCarouselDelegate {% endhighlight %} -### Delegate initialization +## Delegate Initialization -By initializing the CarouselDelegate with inherited class of SfCarouselDelegate, we can access the events on SfCarousel control. +By initializing the `CarouselDelegate` with an inherited class of `SfCarouselDelegate`, you can access the events on the SfCarousel control. {% highlight C# %} diff --git a/Xamarin-iOS/SfCarousel/overview.md b/Xamarin-iOS/SfCarousel/overview.md index d6016870..bdf61047 100644 --- a/Xamarin-iOS/SfCarousel/overview.md +++ b/Xamarin-iOS/SfCarousel/overview.md @@ -1,21 +1,26 @@ --- layout: post title: Overview of Syncfusion® Carousel control for Xamarin.iOS -description: This section provides the details about the Overview of the Carousel control key features for Xamarin.iOS +description: This section provides an overview of the key features of the Syncfusion® Carousel control for Xamarin.iOS platform: xamarin.ios control: Carousel documentation: ug --- -# Overview With SfCarousel - -SfCarousel control is one of the patterns for browsing a small collection of featured products. The viewer is able to view several images of products across a row, and they can swipe horizontally across the row to navigate to the next set of products. They provide a 2-D interface for displaying objects with interactive navigation. It also works for a wide variety of device sizes and screen resolutions. +# SfCarousel Overview +The SfCarousel control is a versatile pattern for browsing small collections of featured content. Users can view multiple images or items arranged in a row and swipe horizontally to navigate through different sets of content. The control provides a 2D interface for displaying objects with smooth, interactive navigation that adapts to various device sizes and screen resolutions. ![The Carousel](images/carousel.png) -Key Features: +## Key Features + +The SfCarousel control offers the following key features: + +### Offset +Specifies the spacing between unselected items in the carousel. This property allows you to control the visual separation between carousel items for better presentation. -* `Offset` - It is used to specify the space between the un selected items in SfCarousel. -* `Rotation Angle` - It is used to rotate all the items to a specified angle. -* `Duration` - It is used to specify the time taken to move an item to the selected item position. +### Rotation Angle +Allows rotation of all items to a specified angle, enhancing the visual effect of the carousel. +### Duration +Determines the time taken for an item to move to the selected position, enabling you to adjust the transition speed for carousel interactions. diff --git a/Xamarin-iOS/SfCarousel/populating-data.md b/Xamarin-iOS/SfCarousel/populating-data.md index e0471a57..33ff6e51 100644 --- a/Xamarin-iOS/SfCarousel/populating-data.md +++ b/Xamarin-iOS/SfCarousel/populating-data.md @@ -1,17 +1,18 @@ --- layout: post title: Data source in Syncfusion® Carousel control in Xamarin.iOS -description: This section provides the details about the populating the data source with Carousel control for Xamarin.iOS +description: This section provides details about populating the data source with Carousel control for Xamarin.iOS platform: xamarin.ios control: Carousel documentation: ug --- -# Populating DataSource +# Populating Data Source -## DataSource with Collection of Images +The SfCarousel control supports multiple ways to populate data, allowing you to display collections of images or custom views based on your application requirements. +## Data Source with Collection of Images -SfCarousel items can be populated with a collection of business objects. For example, a user may wants to create a SfCarousel control which will display a list of images. +SfCarousel items can be populated with a collection of business objects. For example, you may want to create an SfCarousel control that displays a list of images. {% highlight c# %} @@ -26,9 +27,9 @@ carousel.DataSource = carouselItemCollection; {% endhighlight %} -## DataSource with Collection of custom view +## Data Source with Collection of Custom Views -SfCarousel items can be populated with a collection of business objects. It can be achieved by passing the custom view into View property in SfCarouselItem +SfCarousel items can also be populated with custom views for more complex layouts. This can be achieved by passing a custom view to the `View` property in `SfCarouselItem`. {% highlight c# %} diff --git a/Xamarin-iOS/SfCarousel/transformation.md b/Xamarin-iOS/SfCarousel/transformation.md index 9d46d47e..81bccfed 100644 --- a/Xamarin-iOS/SfCarousel/transformation.md +++ b/Xamarin-iOS/SfCarousel/transformation.md @@ -1,21 +1,20 @@ --- layout: post title: Transformation in Syncfusion® Carousel control in Xamarin.iOS -description: This section provides the details about how to set the Transformation for Carousel Items in Carousel for Xamarin.iOS -platform: xamarin.ioss +description: This section provides details about how to set transformations for Carousel items in Carousel for Xamarin.iOS +platform: xamarin.ios control: Carousel documentation: ug --- # Carousel Transformation -The Offset between selected and unselected item can be customized in SfCarousel control. And also the items can be scaled to the specified value. +The SfCarousel control provides various transformation options to customize the appearance and positioning of carousel items. You can adjust the offset between selected and unselected items, apply scaling effects, and control rotation angles for enhanced visual presentation. +## Tilt Non-Selected Items -## Tilt Non Selected Items +The `RotationAngle` property in the SfCarousel control is used to tilt all unselected items at a specified angle, creating a dynamic visual effect. -The `RotationAngle` property in the SfCarousel control is used to tilt all the unselected items in a specified angle. - -N> If the angle value is positive, then the rotation is in the clockwise direction. If the angle value is negative, the rotation is in the counterclockwise direction. +> **Note:** If the angle value is positive, the rotation is clockwise. If the angle value is negative, the rotation is counterclockwise. {% highlight C# %} @@ -26,9 +25,9 @@ carousel.RotationAngle = 40; ![The rotationangle](images/rotationangle.png) -## Set Gap between Unselected Items +## Set Gap Between Unselected Items -The `Offset` property is used to specify the accurate distance between unselected items in SfCarousel panel. +The `Offset` property is used to specify the distance between unselected items in the SfCarousel panel, allowing you to control the spacing for optimal visual presentation. N> The default value is 20. @@ -41,9 +40,9 @@ carousel.Offset = 30; ![The image](images/offset.png) -## Set Gap between Selected Item +## Set Gap Between Selected Item and Others -Distance between the selected item and other items can be customized by using `SelectedItemOffset` property of the SfCarousel control. +The distance between the selected item and other items can be customized using the `SelectedItemOffset` property of the SfCarousel control. This helps emphasize the selected item by creating additional space around it. {% highlight C# %} @@ -54,7 +53,7 @@ carousel.SelectedItemOffset = 6; ## Set Scaling for Carousel Items -The `ScaleOffset` property in the SfCarousel control is used to scale all the items to the specified scale value. +The `ScaleOffset` property in the SfCarousel control is used to scale all items to a specified scale value, creating size variations that enhance the visual hierarchy. {% highlight C# %} @@ -65,9 +64,10 @@ carousel.ScaleOffset = (nfloat)0.7; ![The ScaleOffset](images/scaleoffset.png) -## Spacing of Items in Linear mode +## Spacing of Items in Linear Mode -Spacing of all the items in Linear mode can be determined by using `ItemSpacing` property. +When using Linear view mode, the spacing between all items can be controlled using the `ItemSpacing` property. This provides precise control over item arrangement in linear layouts. +> **Note:** The default value is 5. N> The default value is 5. diff --git a/Xamarin-iOS/SfComboBox/ComboBoxModes.md b/Xamarin-iOS/SfComboBox/ComboBoxModes.md index c4c6d1a6..00345710 100644 --- a/Xamarin-iOS/SfComboBox/ComboBoxModes.md +++ b/Xamarin-iOS/SfComboBox/ComboBoxModes.md @@ -1,15 +1,15 @@ --- layout : post -title: ComboBoxModes in Syncfusion® ComboBox control for Xamarin.iOS -description: Learn here about ComboBoxModes in Syncfusion® Essential® Xamarin.iOS ComboBox control, its elements, and more. +title: ComboBox Modes in Syncfusion® ComboBox control for Xamarin.iOS +description: Learn here about ComboBox modes in Syncfusion® Essential® Xamarin.iOS ComboBox control, its elements, and more. platform: xamarin.ios control: ComboBox documentation: ug --- -# ComboBoxModes in Xamarin.iOS ComboBox +# ComboBox Modes in Xamarin.iOS ComboBox -The control provides you an option to show or select the dropdown items either by editing or non-editing the combobox textbox. The two combo box modes are, +The control provides an option to show or select the dropdown items either by editing or non-editing the ComboBox text box. The two ComboBox modes are: * Editable @@ -17,7 +17,7 @@ The control provides you an option to show or select the dropdown items either b ## Editable -In editable mode the user can select an item from the dropdown list by either typing any string or clicking the dropdown button. +In editable mode, the user can select an item from the dropdown list by either typing any string or clicking the dropdown button. {% highlight C# %} @@ -27,11 +27,11 @@ combobox.IsEditable = true; ![Xamarin.iOS ComboBox Editable](images/editable.png) -## Non-editable +## Non-Editable -In non-editable mode users can select an item from the dropdown list only by clicking the drop-down button. +In non-editable mode, users can select an item from the dropdown list only by clicking the dropdown button. -N> The default ComboBoxModes is Non-Editable +N> The default ComboBox mode is Non-Editable. {% highlight C# %} diff --git a/Xamarin-iOS/SfComboBox/Customizing-the-Suggestion-DropDown.md b/Xamarin-iOS/SfComboBox/Customizing-the-Suggestion-DropDown.md index bf3816a9..f335ffcd 100644 --- a/Xamarin-iOS/SfComboBox/Customizing-the-Suggestion-DropDown.md +++ b/Xamarin-iOS/SfComboBox/Customizing-the-Suggestion-DropDown.md @@ -1,23 +1,23 @@ --- -layout : post -title : Customizing the Syncfusion® ComboBox control in Xamarin.iOS -description : Learn how to Customizing the ComboBox -platform : xamarin.ios -control : ComboBox -documentation : ug +layout: post +title: Customizing the Syncfusion® ComboBox control in Xamarin.iOS +description: Learn how to customize the ComboBox suggestion dropdown appearance, styling, and behavior in Syncfusion® SfComboBox for enhanced user experience. +platform: xamarin.ios +control: ComboBox +documentation: ug --- # Customization -The combobox control provides multiple customization options. The below topics deals with different forms of customization in the SfComboBox Control. +The ComboBox control provides multiple customization options. The following topics deal with different forms of customization in the SfComboBox control. -## Drop-down items customization +## Dropdown Items Customization The dropdown list displaying behavior can be customized based on the entered text and delays in displaying the items. -## Selected drop-down item color +## Selected Dropdown Item Color -you can set color for the selected item in the drop-down item using the property `SelectedDropDownItemColor` property. +You can set the color for the selected item in the dropdown using the `SelectedDropDownItemColor` property. {% tabs %} @@ -29,13 +29,13 @@ combobox.SelectedDropDownItemColor = UIColor.FromRGB(0, 173, 255); {% endtabs %} -![Selected drop down item color](images/selecteddropdownitemcolor.png) +![Selected dropdown item color](images/selecteddropdownitemcolor.png) -## Set maximum height to the drop-down +## Set Maximum Height to the Dropdown -The height of the drop-down portion of the combo box control can be varied using the `MaximumDropDownHeight` property. +The height of the dropdown portion of the ComboBox control can be adjusted using the `MaximumDropDownHeight` property. -N> The value of `MaximumDropDownHeight` property can be any positive integer value. +N> The value of the `MaximumDropDownHeight` property can be any positive integer value. {% tabs %} @@ -47,11 +47,11 @@ combobox.MaxDropDownHeight = 60; {% endtabs %} -![Maximum drop down height](images/maximumdropdownheight.png) +![Maximum dropdown height](images/maximumdropdownheight.png) -## Set border color to the DropDown +## Set Border Color to the Dropdown -The DropDownBorderColor property is used to change the border color of DropDown. The following code example demonstrates how to change the border color of DropDown. +The `DropDownBorderColor` property is used to change the border color of the dropdown. The following code example demonstrates how to change the border color of the dropdown. {% tabs %} @@ -71,33 +71,23 @@ this.View.AddSubview(countryComboBox); {% endtabs %} -![Drop down border color](images/drop-down-border-color.png) +![Dropdown border color](images/drop-down-border-color.png) -## DropDown Button Customization +## Dropdown Button Customization -The dropdown button can be customized using the DropDownButtonSettings property in the following ways: +The dropdown button can be customized using the `DropDownButtonSettings` property in the following ways: -`Width` – Sets the width for the dropdown button. - -`Height` - Sets the height for the dropdown button. - -`FontIcon` - Sets different FontIcon for the dropdown button. - -`FontColor` - Sets different FontColor for the dropdown button. - -`FontSize` - Sets different FontSize for the dropdown button. - -`FontFamily` - Sets the different FontFamily for the dropdown button. - -`BackgroundColor` - Sets the background color for the dropdown button. - -`HighlightedBackgroundColor` - Sets the background color for the dropdown button when it is pressed. - -`HighlightedFontColor` - Sets the font color for the dropdown button when it is pressed. - -`Image` - Sets the image to the dropdown button. - -`View` – Sets a custom view to the dropdown button. +* **Width** – Sets the width for the dropdown button. +* **Height** - Sets the height for the dropdown button. +* **FontIcon** - Sets different FontIcon for the dropdown button. +* **FontColor** - Sets different FontColor for the dropdown button. +* **FontSize** - Sets different FontSize for the dropdown button. +* **FontFamily** - Sets the different FontFamily for the dropdown button. +* **BackgroundColor** - Sets the background color for the dropdown button. +* **HighlightedBackgroundColor** - Sets the background color for the dropdown button when it is pressed. +* **HighlightedFontColor** - Sets the font color for the dropdown button when it is pressed. +* **Image** - Sets the image to the dropdown button. +* **View** – Sets a custom view to the dropdown button. {% tabs %} @@ -111,11 +101,11 @@ combobox.DropDownButtonSettings = dropDownButtonSettings; {% endtabs %} -![Drop down button customization](images/buttoncustomization.png) +![Dropdown button customization](images/buttoncustomization.png) ## Watermark -The watermark text is used to display some information regarding the combo box. This watermark is visible only when the textbox is empty or null. The watermark text disappears when users begins to type or select any item from the dropdown list in the combo box control. +The watermark text is used to display placeholder information regarding the ComboBox. This watermark is visible only when the text box is empty or null. The watermark text disappears when users begin to type or select any item from the dropdown list in the ComboBox control. {% tabs %} diff --git a/Xamarin-iOS/SfComboBox/Dealing-with-SuggestionBox.md b/Xamarin-iOS/SfComboBox/Dealing-with-SuggestionBox.md index 26562ac1..7c69779d 100644 --- a/Xamarin-iOS/SfComboBox/Dealing-with-SuggestionBox.md +++ b/Xamarin-iOS/SfComboBox/Dealing-with-SuggestionBox.md @@ -1,24 +1,24 @@ --- -layout : post -title : Suggestionbox Placement in Syncfusion® SfComboBox control for Xamarin.iOS -description : Learn how to place the Suggestion Box in SfComboBox -platform : xamarin.ios -control : ComboBox -documentation : ug +layout: post +title: Syncfusion® SfComboBox Suggestion Box Placement +description: Learn how to configure and customize the suggestion box placement in Syncfusion® SfComboBox for Xamarin.iOS applications with various positioning options. +platform: xamarin.ios +control: ComboBox +documentation: ug --- -# Dealing with suggestion box -In the combobox control, the DropDown Box can placed in the following two positions: +# Dealing with Suggestion Box +In the ComboBox control, the dropdown box can be placed in the following two positions: * Bottom * Top -Using the Suggestion box placement property, you can place the suggestion box at the top or bottom. +Using the `SuggestionBoxPlacement` property, you can place the suggestion box at the top or bottom. -## SuggestionBox placement at bottom +## Suggestion Box Placement at Bottom -Displays the suggestion box at the bottom of the combo box control. +Displays the suggestion box at the bottom of the ComboBox control. {% tabs %} {% highlight c# %} @@ -28,11 +28,11 @@ combobox.SuggestionBoxPlacement = SuggestionBoxPlacement.Bottom; {% endhighlight %} {% endtabs %} -![](images/bottom.png) +![Suggestion box positioned at bottom](images/bottom.png) -## SuggestionBox placement at top +## Suggestion Box Placement at Top -Displays the suggestion box at the top of the combo box control. +Displays the suggestion box at the top of the ComboBox control. {% tabs %} {% highlight c# %} @@ -42,4 +42,4 @@ combobox.SuggestionBoxPlacement = SuggestionBoxPlacement.Top; {% endhighlight %} {% endtabs %} -![](images/top.png) \ No newline at end of file +![Suggestion box positioned at top](images/top.png) \ No newline at end of file diff --git a/Xamarin-iOS/SfComboBox/Filtering-Option.md b/Xamarin-iOS/SfComboBox/Filtering-Option.md index cdc4deac..d6d125e3 100644 --- a/Xamarin-iOS/SfComboBox/Filtering-Option.md +++ b/Xamarin-iOS/SfComboBox/Filtering-Option.md @@ -9,9 +9,9 @@ documentation : ug # Filtering Option -The combo box control provides an option to filter the dropdown list based on the text typed. You can set filter option by setting the `AllowFiltering` boolean property to true. +The ComboBox control provides an option to filter the dropdown list based on the text typed. You can enable the filter option by setting the `AllowFiltering` boolean property to `true`. -N> The Allow-Filtering property works only when the IsEditable property is set to true. +N> The `AllowFiltering` property works only when the `IsEditable` property is set to `true`. {% tabs %} diff --git a/Xamarin-iOS/SfComboBox/Getting-Started.md b/Xamarin-iOS/SfComboBox/Getting-Started.md index 5642a5e8..5bda679d 100644 --- a/Xamarin-iOS/SfComboBox/Getting-Started.md +++ b/Xamarin-iOS/SfComboBox/Getting-Started.md @@ -1,23 +1,23 @@ --- layout : post title : Getting Started with Syncfusion® ComboBox control for Xamarin.iOS -description : A quick tour to initial users on Syncfusion® combobox control for Xamarin.iOS platform +description : A quick tour to initial users on Syncfusion® ComboBox control for Xamarin.iOS platform platform : xamarin.ios control : ComboBox documentation : ug --- -# Getting started +# Getting Started -This section explains the steps required to create combo box, populate it with data, and filter suggestions. Here, we create a simple sample is created for changing the resolution. and this This section covers only the minimal features that are needed to get started with the ComboBox combo box. +This section explains the steps required to create a ComboBox, populate it with data, and filter suggestions. Here, we create a simple sample for changing the resolution. This section covers only the minimal features that are needed to get started with the ComboBox. -## Referencing Essential Studio® components in your solution +## Referencing Essential Studio® Components in Your Solution -After installing Essential Studio® for Xamarin, find all the required assemblies in the installation folders, +After installing Essential Studio® for Xamarin, find all the required assemblies in the installation folders: {Syncfusion Installed location}\Essential Studio {version number}\lib -The assembly reference to the iOS unified project is as follows. +The assembly reference to the iOS unified project is as follows: iOS-unifed\Syncfusion.SfComboBox.iOS.dll @@ -47,10 +47,9 @@ SfComboBox combobox = new SfComboBox(); {% endtabs %} +## Adding Items -## Adding items - -A NSMutableArray of string with resolution list is created and added to the combo box source. This list is populated as suggestion list by setting the ComboBoxSource property based on text entry. +An NSMutableArray of strings with a resolution list is created and added to the ComboBox source. This list is populated as a suggestion list by setting the `ComboBoxSource` property based on text entry. {% tabs %} @@ -88,15 +87,15 @@ this.Add(combobox); ![](images/gettingstarted.png) -## Combo box modes +## ComboBox Modes -The SfComboBox supports both editable and non-editable text boxes to choose selected items in given data source. Users can select an item from the suggestion box. +The SfComboBox supports both editable and non-editable text boxes to choose selected items in the given data source. Users can select an item from the suggestion box. -N > The default value of the IsEditableMode property is false +N> The default value of the `IsEditable` property is `false`. -## Non-editable combo box +## Non-Editable ComboBox -Non-editable mode is used to prevents users from typing and allows them to select items from the drop-down list. If the `IsEditable` property is set to false, the combo box is non-editable mode. In non-editable mode, the suggestion box can be displayed by clicking the control or drop-down button. +Non-editable mode prevents users from typing and allows them to select items from the dropdown list. If the `IsEditable` property is set to `false`, the ComboBox is in non-editable mode. In non-editable mode, the suggestion box can be displayed by clicking the control or dropdown button. {% tabs %} @@ -113,22 +112,22 @@ combobox.IsEditable = false; //Add the items NSMutableArray resolutionList = new NSMutableArray(); -resolutionList .Add((NSString)" 1920 x 1080"); -resolutionList .Add((NSString)" 1680 x 1050"); -resolutionList .Add((NSString)" 1600 x 900"); -resolutionList .Add((NSString)" 1440 x 900"); -resolutionList .Add((NSString)" 1400 x 1050"); -resolutionList .Add((NSString)" 1366 x 768"); -resolutionList .Add((NSString)" 1280 x 1024"); -resolutionList .Add((NSString)" 1280 x 960"); -resolutionList .Add((NSString)" 1280 x 720"); -resolutionList .Add((NSString)" 854 x 480"); -resolutionList .Add((NSString)" 800 x 480"); -resolutionList .Add((NSString)" 480 X 640"); -resolutionList .Add((NSString)" 480 x 320"); -resolutionList .Add((NSString)" 432 x 240"); -resolutionList .Add((NSString)" 360 X 640"); -resolutionList .Add((NSString)" 320 x 240"); +resolutionList.Add((NSString)"1920 x 1080"); +resolutionList.Add((NSString)"1680 x 1050"); +resolutionList.Add((NSString)"1600 x 900"); +resolutionList.Add((NSString)"1440 x 900"); +resolutionList.Add((NSString)"1400 x 1050"); +resolutionList.Add((NSString)"1366 x 768"); +resolutionList.Add((NSString)"1280 x 1024"); +resolutionList.Add((NSString)"1280 x 960"); +resolutionList.Add((NSString)"1280 x 720"); +resolutionList.Add((NSString)"854 x 480"); +resolutionList.Add((NSString)"800 x 480"); +resolutionList.Add((NSString)"480 x 640"); +resolutionList.Add((NSString)"480 x 320"); +resolutionList.Add((NSString)"432 x 240"); +resolutionList.Add((NSString)"360 x 640"); +resolutionList.Add((NSString)"320 x 240"); combobox.ComboBoxSource = resolutionList; this.Add(combobox); @@ -138,9 +137,9 @@ this.Add(combobox); ![](images/gettingstartednoneditable.png) -## Editable combo box +## Editable ComboBox -In editable mode, the combo box allows users to edit in the text box that shows suggestions in the drop-down list based on the input. With the previous codes, the `IsEditableMode` property is set to true. This helps users to edit the SfComboBox control. +In editable mode, the ComboBox allows users to edit in the text box that shows suggestions in the dropdown list based on the input. With the previous code, the `IsEditable` property is set to `true`. This helps users to edit the SfComboBox control. {% tabs %} @@ -182,9 +181,9 @@ this.Add(combobox); ![](images/gettingstartededitable.png) -## Selecting an item +## Selecting an Item -When selecting an item from the drop-down list, the selection changed event will be called. Using the following code snippet, a dialogue box will be displayed when a new item is selected from the suggestion box. +When selecting an item from the dropdown list, the selection changed event will be called. Using the following code snippet, a dialog box will be displayed when a new item is selected from the suggestion box. {% tabs %} diff --git a/Xamarin-iOS/SfComboBox/Header-and-Footer.md b/Xamarin-iOS/SfComboBox/Header-and-Footer.md index 01d8576d..5a90ac34 100644 --- a/Xamarin-iOS/SfComboBox/Header-and-Footer.md +++ b/Xamarin-iOS/SfComboBox/Header-and-Footer.md @@ -1,7 +1,7 @@ --- layout : post title : Header and Footer in Syncfusion® SfComboBox control for Xamarin.iOS -description : Learn how to enable Header and Footer in SfComboBox +description : Learn how to enable Header and Footer in SfComboBox platform : xamarin.ios control : ComboBox documentation : ug @@ -9,20 +9,20 @@ documentation : ug # Header and Footer -You can add header and footer views to the suggestion list in the combo box control by enabling the `ShowDropDownHeaderView` and `ShowDropDownFooterView` properties. +You can add header and footer views to the suggestion list in the ComboBox control by enabling the `ShowDropDownHeaderView` and `ShowDropDownFooterView` properties. -## Header content +## Header Content -The header content can be added at the top of the combo box control's suggestion box using the `DropDownHeaderView` property. The following code example shows how to set the header content in the combo box. The height of the header in the combo box can be adjusted using the `DropDownHeaderViewHeight` property. +The header content can be added at the top of the ComboBox control's suggestion box using the `DropDownHeaderView` property. The following code example shows how to set the header content in the ComboBox. The height of the header in the ComboBox can be adjusted using the `DropDownHeaderViewHeight` property. {% tabs %} {% highlight C# %} -//Shows the header view +// Shows the header view combobox.ShowDropDownHeaderView = true; -//Set height of the Header view +// Set height of the Header view combobox.DropDownHeaderViewHeight = 50; UILabel label = new UILabel(); label.Text = "Country Options"; @@ -39,14 +39,14 @@ combobox.DropDownHeaderView = label; ## Footer Content -The footer content can be added at the bottom of the combo box control's suggestion box using the `DropDownFooterView` property. The following code example shows how to set the footer content in the combo box. The height of the footer in the combo box can be adjusted using the `DropDownFooterViewHeight` property. +The footer content can be added at the bottom of the ComboBox control's suggestion box using the `DropDownFooterView` property. The following code example shows how to set the footer content in the ComboBox. The height of the footer in the ComboBox can be adjusted using the `DropDownFooterViewHeight` property. {% tabs %} {% highlight C# %} -//Shows the footer view +// Shows the footer view combobox.ShowDropDownFooterView = true; //Set height of the footer view diff --git a/Xamarin-iOS/SfComboBox/Multiple-selection.md b/Xamarin-iOS/SfComboBox/Multiple-selection.md index c9ccbb28..8667848d 100644 --- a/Xamarin-iOS/SfComboBox/Multiple-selection.md +++ b/Xamarin-iOS/SfComboBox/Multiple-selection.md @@ -1,23 +1,22 @@ --- -layout : post -title : Multi Selection in Syncfusion® SfComboBox control for Xamarin.iOS -description : Learn how to select multiple items in SfComboBox -platform : xamarin.ios -control : ComboBox -documentation : ug +layout: post +title: Multiple Selection in Syncfusion® SfComboBox control for Xamarin.iOS +description: Learn how to select multiple items in SfComboBox +platform: xamarin.ios +control: ComboBox +documentation: ug --- # Multiple Selection -You can select multiple items from a drop-down list by following two ways. +You can select multiple items from a dropdown list in the following two ways: -* Token representation - +* Token Representation * Delimiter -## Token representation +## Token Representation -Selected items will be displayed with a customizable token representation and the users can remove each tokenized item with the close button. +Selected items will be displayed with a customizable token representation, and users can remove each tokenized item using the close button. {% tabs %} @@ -29,13 +28,12 @@ combobox.MultiSelectMode = MultiSelectMode.Token; {% endtabs %} -### Wrap mode of token - -The selected item can be displayed as token inside the combo box in the following two ways. +### Wrap Mode of Token -* `Wrap` - When the `TokensWrapMode` is set to `Wrap` the selected items will be wrapped to the next line of the combo box. +The selected items can be displayed as tokens inside the ComboBox in the following two ways: -* `None` - When the `TokensWrapMode` is set to `None` the selected item will be wrapped in horizontal orientation. +* **Wrap** - When the `TokensWrapMode` is set to `Wrap`, the selected items will be wrapped to the next line of the ComboBox. +* **None** - When the `TokensWrapMode` is set to `None`, the selected items will be arranged in horizontal orientation. {% tabs %} @@ -157,25 +155,18 @@ public Employee(string name, string image) ![](images/TokenRepresentationWrap.png) -### Token customization - -Token can be customized in the following ways. - -* `TextColor` - Sets the color of the text inside the token. - -* `FontSize` - Sets the size of the font inside the token. +### Token Customization -* `FontFamily` - Sets the font family for the text inside the token. +Tokens can be customized in the following ways: -* `BackgroundColor` - Sets the background color of the token. - -* `SelectedBackgroundColor` - Sets the background color of the token when it is selected. - -* `IsCloseButtonVisible` - Enables and disables the close button inside the combo Box. - -* `DeleteButtonColor` - Sets the color of the close button inside the combo box. - -* `CornerRadius` - Sets the corner radius for the token. +* **TextColor** - Sets the color of the text inside the token. +* **FontSize** - Sets the size of the font inside the token. +* **FontFamily** - Sets the font family for the text inside the token. +* **BackgroundColor** - Sets the background color of the token. +* **SelectedBackgroundColor** - Sets the background color of the token when it is selected. +* **IsCloseButtonVisible** - Enables and disables the close button inside the token. +* **DeleteButtonColor** - Sets the color of the close button inside the token. +* **CornerRadius** - Sets the corner radius for the token. {% tabs %} @@ -203,9 +194,9 @@ combobox.TokenSettings = token; ## Delimiter -When selecting the multiple items, the selected items can be divided with a desired character given for a delimiter. You can set delimiter character using the `Delimiter` property. +When selecting multiple items, the selected items can be separated with a desired character specified as a delimiter. You can set the delimiter character using the `Delimiter` property. -N> The default delimiter character is “,”. +N> The default delimiter character is ",". {% tabs %} @@ -219,8 +210,7 @@ combobox.MultiSelectMode = MultiSelectMode.Delimiter; ![](images/Delimiter.png) - -We can add the custom delimiter character by using `Delimiter` property. +You can add a custom delimiter character by using the `Delimiter` property. {% tabs %} diff --git a/Xamarin-iOS/SfComboBox/NoResultsFound.md b/Xamarin-iOS/SfComboBox/NoResultsFound.md index 145b6945..0ff8e9b4 100644 --- a/Xamarin-iOS/SfComboBox/NoResultsFound.md +++ b/Xamarin-iOS/SfComboBox/NoResultsFound.md @@ -1,7 +1,7 @@ --- layout : post -title : No Result Found Text in Syncfusion® SfComboBox control for Xamarin.iOS -description : Learn how to display the no result found text in SfComboBox +title : No Results Found Text in Syncfusion® SfComboBox control for Xamarin.iOS +description : Learn how to display the no results found text in SfComboBox platform : xamarin.ios control : ComboBox documentation : ug @@ -9,7 +9,7 @@ documentation : ug # No Results Found -When the entered item is not in the suggestion list, SfComboBox displays a text indicating there is no search results found. We can set the desire text to be displayed for indicating no results found with the `NoResultsFoundText` property. +When the entered item is not in the suggestion list, SfComboBox displays text indicating that no search results were found. You can set the desired text to be displayed for indicating no results found using the `NoResultsFoundText` property. {% tabs %} @@ -26,7 +26,7 @@ comboBox.SuggestionMode = SuggestionMode.StartsWith; ## Customizing NoResultsFoundText -The `NoResultsFoundTextColor` and `NoResultsFoundFont` are the properties used to customize the foreground color and font of the NoResultsFoundText. +The `NoResultsFoundTextColor` and `NoResultsFoundFont` properties are used to customize the foreground color and font of the NoResultsFoundText. {% tabs %} diff --git a/Xamarin-iOS/SfComboBox/Overview.md b/Xamarin-iOS/SfComboBox/Overview.md index fbcaf674..82585757 100644 --- a/Xamarin-iOS/SfComboBox/Overview.md +++ b/Xamarin-iOS/SfComboBox/Overview.md @@ -1,7 +1,7 @@ --- layout: post title: Overview of Syncfusion® ComboBox control for Xamarin.iOS -description: Overview and key features of combobox control +description: Overview and key features of ComboBox control platform: xamarin.ios control: ComboBox documentation: ug @@ -9,26 +9,24 @@ documentation: ug # Overview -The combo box control allows users to choose an option from the list of predefined options. When the arrow icon accompanied with this component is pressed, the drop-down displays a list of values, from which users can select an option. +The ComboBox control allows users to choose an option from a list of predefined options. When the arrow icon accompanying this component is pressed, the dropdown displays a list of values from which users can select an option. ![](images/overview.png) ## Key Features -* `ComboBox Mode` - Provides an option to select an item from the drop-down list by either editing or non-editing the combobox textbox. +* **ComboBox Mode** - Provides an option to select an item from the dropdown list by either editing or non-editing the ComboBox text box. -* `Suggestion Mode` - Suggestions can be displayed in eight different modes, such as StartsWith, EndWith, Contains, Equals, etc. +* **Suggestion Mode** - Suggestions can be displayed in eight different modes, such as StartsWith, EndsWith, Contains, Equals, etc. -* `Multiple Selection` - Provides two different ways to select multiple items from the dropdown list using token representation and delimiter. +* **Multiple Selection** - Provides two different ways to select multiple items from the dropdown list using token representation and delimiter. -* `Filtering` - Provides options to support both filtering and non-filtering suggestion list. The combo box provides three different ways to display the filtered suggestions. They displays suggestions using the drop-down list, appends the first suggestion to text and both of these. +* **Filtering** - Provides options to support both filtering and non-filtering suggestion lists. The ComboBox provides three different ways to display the filtered suggestions: displaying suggestions using the dropdown list, appending the first suggestion to text, and both of these combined. -* `Header and Footer` - Header and footer content can be given in the top and bottom of the dropdown list. +* **Header and Footer** - Header and footer content can be added to the top and bottom of the dropdown list. -* `Highlighting Text` - Highlights the matching text in the dropdown list based on the input. - -* `Customization support` - Provides options to customize both the Entry and dropdown. - -* `Watermark` – Supports explanatory text inside the combo box control until users inputs the text. Watermark is restored again if user clears the text. +* **Text Highlighting** - Highlights the matching text in the dropdown list based on the input. +* **Customization Support** - Provides options to customize both the entry field and dropdown. +* **Watermark** – Supports explanatory text inside the ComboBox control until users input text. The watermark is restored if the user clears the text. diff --git a/Xamarin-iOS/SfComboBox/Populating-Items.md b/Xamarin-iOS/SfComboBox/Populating-Items.md index 1e92c42b..14da754b 100644 --- a/Xamarin-iOS/SfComboBox/Populating-Items.md +++ b/Xamarin-iOS/SfComboBox/Populating-Items.md @@ -7,13 +7,13 @@ control : ComboBox documentation : ug --- -# Populating items +# Populating Items -The combo box control, supports binding to different data sources such as IList Data Source and Observable Collection Data Source. +The ComboBox control supports binding to different data sources such as IList Data Source and Observable Collection Data Source. -## Using combo box source item +## Using ComboBox Source Item -* The ComboBoxSource property in the SfComboBox control is used to set the list of strings to the dropdown list. +* The `ComboBoxSource` property in the SfComboBox control is used to set the list of strings for the dropdown list. {% tabs %} @@ -36,11 +36,11 @@ combobox.ComboBoxSource = countryList; ![](images/ComboBoxsource.png) -## Using binding +## Using Data Binding -DataSource is a collection of SfComboBox items which is capable of holding any objects and displaying the items based on the provided `DisplayMemberPath` value. +DataSource is a collection of SfComboBox items that can hold any objects and display the items based on the provided `DisplayMemberPath` value. -To populate items using data source, create a model class with the properties that to be bound. +To populate items using a data source, create a model class with the properties to be bound. {% tabs %} @@ -95,7 +95,7 @@ public string getEmployee_ID() {% endtabs %} -* Create student collection using student class and assign the collection to the DataSource property of SfComboBox +* Create an Employee collection using the Employee class and assign the collection to the DataSource property of SfComboBox. {% tabs %} @@ -124,7 +124,7 @@ void GetEmployeeData() {% endtabs %} -* Here student collection has two properties. So you should intimate by which property it should filter suggestions, it must provide the drop-down list. In this case, make the control to provide suggestions based on Name. +* Since the Employee collection has two properties, you need to specify which property should be used to filter suggestions and provide the dropdown list. In this case, configure the control to provide suggestions based on the Name property. {% tabs %} @@ -140,6 +140,6 @@ combobox.DataSource = EmployeeDetails; {% endtabs %} -* `DisplayMemberPath` decides the suggestions to be shown in dropdown. Setting the `SelectedValuePath` property makes the `SelectedValue` property to return the value you have selected here. +* The `DisplayMemberPath` determines the suggestions to be shown in the dropdown. Setting the `SelectedValuePath` property makes the `SelectedValue` property return the value you have selected. ![](images/datasource.png) diff --git a/Xamarin-iOS/SfComboBox/Suggestion-Display-Mode.md b/Xamarin-iOS/SfComboBox/Suggestion-Display-Mode.md index c767b27d..e52d244f 100644 --- a/Xamarin-iOS/SfComboBox/Suggestion-Display-Mode.md +++ b/Xamarin-iOS/SfComboBox/Suggestion-Display-Mode.md @@ -1,15 +1,15 @@ --- layout : post -title : ComboBoxMode mode for Syncfusion® ComboBox control in Xamarin.iOS -description : Learn how to change the ComboBoxMode in SfComboBox +title : ComboBoxMode for Syncfusion® ComboBox control in Xamarin.iOS +description : Learn how to change the ComboBoxMode in SfComboBox for different suggestion display patterns platform : xamarin.ios control : SfComboBox documentation : ug --- -# Suggestion display mode +# Suggestion Display Mode -The `ComboBoxMode` property is used to decide the suggestion pattern for displaying the dropdown list according to the text entered. The different types of patterns are, described below +The `ComboBoxMode` property determines how suggestions are displayed in the dropdown list based on the text entered by the user. The different types of patterns are described below: * Suggest @@ -19,9 +19,9 @@ The `ComboBoxMode` property is used to decide the suggestion pattern for display N> The default option is suggest mode. -## Suggest in drop-down +## Suggest Mode -* Suggest - Displays suggestions in the drop-down. +The **Suggest** mode displays matching suggestions in the dropdown list. {% tabs %} @@ -33,11 +33,11 @@ combobox.ComboBoxMode = ComboBoxMode.Suggest; {% endtabs %} -![](images/suggest.png) +![Suggest mode example](images/suggest.png) -## Append +## Append Mode -* Append - Appends the first matching string with the entered character. +The **Append** mode automatically appends the first matching string to the entered text. {% tabs %} @@ -49,12 +49,11 @@ combobox.ComboBoxMode = ComboBoxMode.Append; {% endtabs %} -![](images/append.png) +![Append mode example](images/append.png) -## Both append and suggest in drop-down - -* SuggestAppend - Displays suggestions in the drop-down along with appending the first matching string. +## Suggest and Append Mode +The **SuggestAppend** mode combines both behaviors: it displays suggestions in the dropdown while also appending the first matching string to the entered text. {% tabs %} {% highlight C# %} @@ -65,5 +64,4 @@ combobox.ComboBoxMode = ComboBoxMode.SuggestAppend; {% endtabs %} -![](images/suggestappend.png) - +![SuggestAppend mode example](images/suggestappend.png) diff --git a/Xamarin-iOS/SfComboBox/Various-Filter-Options-for-Suggestion.md b/Xamarin-iOS/SfComboBox/Various-Filter-Options-for-Suggestion.md index 466a0ded..459dd926 100644 --- a/Xamarin-iOS/SfComboBox/Various-Filter-Options-for-Suggestion.md +++ b/Xamarin-iOS/SfComboBox/Various-Filter-Options-for-Suggestion.md @@ -1,15 +1,15 @@ --- layout : post -title : Suggestion mode for Syncfusion® SfComboBox Control in Xamarin.iOS -description : Learn how to display suggestion mode in ComboBox +title : Filtering options for Syncfusion® SfComboBox Control in Xamarin.iOS +description : Learn how to configure various filter options for suggestions in ComboBox platform : xamarin.ios control : SfComboBox documentation : ug --- -# Various filter options for suggestion +# Various Filter Options for Suggestions -The combo box enables filer option for filtering the suggestions in the drop-down. +The ComboBox control provides filtering options to filter suggestions displayed in the dropdown list. {% tabs %} @@ -22,32 +22,25 @@ The combo box enables filer option for filtering the suggestions in the drop-dow {% endtabs %} -## Types Of filtering +## Types of Filtering -The phenomenon of string comparison for filtering suggestions can be changed using the `SuggestionMode `property. The default filtering strategy is `StartsWith` and it is case insensitive. The available filtering modes are, +The string comparison method for filtering suggestions can be configured using the `SuggestionMode` property. The default filtering strategy is `StartsWith` and it is case insensitive. The available filtering modes are: -* StartsWith +* StartsWith +* StartsWithCaseSensitive +* Contains +* ContainsWithCaseSensitive +* Equals +* EqualsWithCaseSensitive +* EndsWith +* EndsWithCaseSensitive +* Custom -* StartsWithCaseSensitive +## StartsWith Mode -* Contains +### Words that start with input text -* ContainsWithCaseSensitive - -* Equals - -* EqualsWithCaseSensitive - -* EndsWith - -* EndsWithCaseSensitive - -* Custom - - -## Words that starts with input text - -Displays a list of suggestions based on the starting letter. +Displays a list of suggestions based on items that start with the entered text. {% tabs %} @@ -59,12 +52,11 @@ Displays a list of suggestions based on the starting letter. {% endtabs %} -![](images/startswith.png) - -### Filter with character casing +![StartsWith filtering example](images/startswith.png) -Displays a list of suggestions based on the starting letter with case sensitive. +### Case-sensitive filtering +Displays a list of suggestions based on items that start with the entered text, with case-sensitive matching. {% tabs %} {% highlight C# %} @@ -75,11 +67,12 @@ Displays a list of suggestions based on the starting letter with case sensitive. {% endtabs %} -![](images/startswithcasesensitive.png) +![StartsWith case-sensitive filtering example](images/startswithcasesensitive.png) -## Words that contain the input text +## Contains Mode +### Words that contain the input text -Displays a list of suggestions if the combo box list contains that words. +Displays a list of suggestions if the ComboBox items contain the entered text. {% tabs %} @@ -91,12 +84,11 @@ Displays a list of suggestions if the combo box list contains that words. {% endtabs %} -![](images/contains.png) +![Contains filtering example](images/contains.png) -### Filter with character casing - -Displays a list of suggestions if the combo box list contains that words with case sensitive. +### Case-sensitive filtering +Displays a list of suggestions if the ComboBox items contain the entered text, with case-sensitive matching. {% tabs %} {% highlight C# %} @@ -107,11 +99,12 @@ Displays a list of suggestions if the combo box list contains that words with ca {% endtabs %} -![](images/containswithcasesensitive.png) +![Contains case-sensitive filtering example](images/containswithcasesensitive.png) -## Words that equals to input text +## Equals Mode +### Words that equal the input text -Displays the word that matches the input text. +Displays suggestions that exactly match the entered text. {% tabs %} @@ -123,12 +116,11 @@ Displays the word that matches the input text. {% endtabs %} -![](images/equals.png) - -### Filter with character casing +![Equals filtering example](images/equals.png) -Displays the word that matches the input text with case sensitive. +### Case-sensitive filtering +Displays suggestions that exactly match the entered text, with case-sensitive matching. {% tabs %} {% highlight C# %} @@ -139,11 +131,12 @@ Displays the word that matches the input text with case sensitive. {% endtabs %} -![](images/equalswithcasesensitive.png) +![Equals case-sensitive filtering example](images/equalswithcasesensitive.png) -## Words that ends with input text +## EndsWith Mode +### Words that end with input text -Displays a list of suggestions based on the ending word. +Displays a list of suggestions based on items that end with the entered text. {% tabs %} @@ -155,12 +148,11 @@ Displays a list of suggestions based on the ending word. {% endtabs %} -![](images/endswith.png) +![EndsWith filtering example](images/endswith.png) -### Filter with character casing - -Displays a list of suggestions based on the ending word with case sensitive. +### Case-sensitive filtering +Displays a list of suggestions based on items that end with the entered text, with case-sensitive matching. {% tabs %} {% highlight C# %} @@ -171,12 +163,11 @@ combobox.SuggestionMode = SuggestionMode.EndsWithCaseSensitive; {% endtabs %} -![](images/endswithcasesensitive.png) - +![EndsWith case-sensitive filtering example](images/endswithcasesensitive.png) -### Custom filter +## Custom Filter Mode -Displays a list of suggestions based on the custom words in the combo box. +Enables custom filtering logic for displaying suggestions based on your specific requirements. {% tabs %} {% highlight C# %} @@ -190,3 +181,4 @@ combobox.SuggestionMode = SuggestionMode.Custom; + diff --git a/Xamarin-iOS/SfComboBox/highlighting-matched-text.md b/Xamarin-iOS/SfComboBox/highlighting-matched-text.md index bbdda6e2..9c3542e7 100644 --- a/Xamarin-iOS/SfComboBox/highlighting-matched-text.md +++ b/Xamarin-iOS/SfComboBox/highlighting-matched-text.md @@ -1,27 +1,26 @@ --- layout : post -title : MatchHighlighting in Syncfusion® SfComboBox control for Xamarin.iOS +title : Match Highlighting in Syncfusion® SfComboBox control for Xamarin.iOS description : Learn how to highlight the matched text in SfComboBox platform : xamarin.ios control : SfComboBox documentation : ug --- -# Highlighting matched text +# Highlighting Matched Text -An item can be picked with more clarity by highlight the matching characters in a suggestion list using the following two ways: +An item can be picked with more clarity by highlighting the matching characters in a suggestion list using the following two ways: -* First occurrence +* First Occurrence +* Multiple Occurrence -* Multiple occurrence +Text highlighting can be customized with various styles by configuring the following properties: -Highlighting the text can be indicated with various customizing styles by enabling the following properties: +* **HighlightedTextColor** - Sets the color of the highlighted text for differentiating the highlighted characters. -* `HighlightedTextColor` - sets the color of the highlighted text for differentiating the highlighted characters. +N> The dropdown text can be highlighted only when the `AllowFiltering` property is set to `true`. -N> The drop-down text can be highlighted only when the AllowFiltering is set to true. - -## First occurrence +## First Occurrence Highlights the first position of the matching characters in the suggestion list. @@ -38,14 +37,12 @@ combobox.HighlightedTextColor = Color.Red; {% endtabs %} -N> The default Color of HighlightedTextColor is Red. - The default FontTypeFace of HighlightedTextFontTypeFace is None. - +N> The default color of `HighlightedTextColor` is Red. ![](images/FirstOccurrence.png) ## Multiple Occurrence -Highlights the matching character that occurs everywhere in the suggestion list for Contains case in SuggestionMode. +Highlights all matching characters that occur throughout the suggestion list when using the Contains mode in `SuggestionMode`. {% tabs %} diff --git a/Xamarin-iOS/SfNavigationDrawer/Animation.md b/Xamarin-iOS/SfNavigationDrawer/Animation.md index 8af3f5ac..5d6e53c7 100644 --- a/Xamarin-iOS/SfNavigationDrawer/Animation.md +++ b/Xamarin-iOS/SfNavigationDrawer/Animation.md @@ -1,14 +1,14 @@ --- layout: post -title: Transition of drawer in Syncfusion® NavigationDrawer control for Xamarin.iOS -description: Learn how to set Transition of the DrawerView panel. +title: Transition animations for Syncfusion® NavigationDrawer control in Xamarin.iOS +description: Learn how to configure transition animations for the DrawerView panel in NavigationDrawer. platform: xamarin.ios control: NavigationDrawer documentation: ug --- # Drawer Opening Animation -The `Transition` property specifies the sliding animations for the DrawerView panel. The `Transition` property has the following three options: +The `Transition` property specifies the sliding animations for the DrawerView panel. The `Transition` property provides the following three animation options: * SlideOnTop * Push @@ -18,7 +18,7 @@ N> The default transition is SlideOnTop. ## SlideOnTop -Slides the DrawerContent on top of the main content. +Slides the drawer content on top of the main content, overlaying it during the transition. {% tabs %} @@ -30,11 +30,10 @@ Slides the DrawerContent on top of the main content. {% endtabs %} -![](images/Slide-on-top.png) - +![SlideOnTop transition animation example](images/Slide-on-top.png) ## Push -This transition slides the Drawer and main content simultaneously. +This transition slides both the drawer and main content simultaneously, pushing the main content aside as the drawer opens. {% tabs %} @@ -46,11 +45,10 @@ This transition slides the Drawer and main content simultaneously. {% endtabs %} -![](images/push.png) - +![Push transition animation example](images/push.png) ## Reveal -The Drawer content is in fixed position and the main content will slide to reveal the drawer content. +The drawer content remains in a fixed position while the main content slides away to reveal the drawer underneath. {% tabs %} @@ -62,4 +60,4 @@ The Drawer content is in fixed position and the main content will slide to revea {% endtabs %} -![](images/Reveal.png) +![Reveal transition animation example](images/Reveal.png) diff --git a/Xamarin-iOS/SfNavigationDrawer/Drawer-Content.md b/Xamarin-iOS/SfNavigationDrawer/Drawer-Content.md index 70aebed1..74ef2023 100644 --- a/Xamarin-iOS/SfNavigationDrawer/Drawer-Content.md +++ b/Xamarin-iOS/SfNavigationDrawer/Drawer-Content.md @@ -1,7 +1,7 @@ --- layout: post -title: Various features of Syncfusion® NavigationDrawer control for iOS. -description: Learn how to set content view, drawer content view, footer view, header view, drawer size in NavigationDrawer. +title: Content configuration for Syncfusion® NavigationDrawer control in Xamarin.iOS +description: Learn how to configure content view, drawer content view, footer view, header view, and drawer size in NavigationDrawer. platform: xamarin.ios control: NavigationDrawer documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Sliding Panel Contents -The sliding panel contents are divided into three parts and they are as follows +The sliding panel contents are divided into three main parts: * [Drawer Content](#drawer-main-content) * [Header Content](#drawer-header-content) @@ -17,7 +17,7 @@ The sliding panel contents are divided into three parts and they are as follows ## Drawer Main Content -The sliding main content of the SfNavigationDrawer can be set with any view using `DrawerContentView`. This part mostly holds the list of menus that has to be selected to display the Main content. +The sliding main content of the SfNavigationDrawer can be configured with any view using the `DrawerContentView` property. This section typically contains the list of menu items that users can select to display different main content. {% tabs %} @@ -106,11 +106,11 @@ The sliding main content of the SfNavigationDrawer can be set with any view usin {% endtabs %} -![Drawercontentview](images/Drawercontentview.png) +![Drawer content view example](images/Drawercontentview.png) ## Drawer Header Content -Instead of providing everything in the drawer content view, `DrawerHeaderView` property can be used to display certain information like user id or names in the header part. +Instead of including everything in the drawer content view, the `DrawerHeaderView` property can be used to display specific information such as user ID or names in the header section. {% tabs %} @@ -177,12 +177,12 @@ namespace NavigationDrawerTest {% endtabs %} -![Drawerheadview](images/Drawerheadview.png) +![Drawer header view example](images/Drawerheadview.png) ## Drawer Footer Content -Similar to drawer header view, the `DrawerFooterView` property can be used to set footer content. For ex: Logout option or Exit option can be placed at Footer part. +Similar to the drawer header view, the `DrawerFooterView` property can be used to set footer content. For example, logout or exit options can be placed in the footer section. {% tabs %} @@ -234,11 +234,11 @@ namespace NavigationDrawerTest {% endtabs %} -![Drawerfooterview](images/Drawerfooterview.png) +![Drawer footer view example](images/Drawerfooterview.png) ## Drawer Size -Gets or sets the height and width of the DrawerView panel in the NavigationDrawer control using `DrawerHeight` and `DrawerWidth` properties. +Configure the height and width of the DrawerView panel in the NavigationDrawer control using the `DrawerHeight` and `DrawerWidth` properties. {% tabs %} @@ -251,17 +251,19 @@ Gets or sets the height and width of the DrawerView panel in the NavigationDrawe {% endtabs %} -## Multiple drawers +## Multiple Drawers + +The NavigationDrawer allows users to open drawers on multiple sides with different toggle methods. The `DrawerSettings` class and its properties are used when implementing multiple drawers. Multiple drawers can be configured using the following drawer settings: -The Navigation Drawer allows users to open the drawer on multiple sides with different toggle methods. The DrawerSettings class and its properties need to be used when users need to provide multiple drawers. The multiple drawers can be implemented using the following drawer settings: * Default drawer settings * Secondary drawer settings N> The header and footer content are optional, but the drawer content is mandatory to allocate space for the drawer. -## Default drawer settings +## Default Drawer Settings + +Implement the default drawer using the `DrawerSettings` class. The following code sample demonstrates how to configure the properties of default drawer settings. -Implement the default drawer using the default drawer settings class. The following code sample demonstrates how to set the properties of default drawer settings inside the DrawerSettings class. {% tabs %} {% highlight c# %} @@ -281,9 +283,9 @@ defaultDrawerSettings.DrawerFooterHeight = 150; N> The Navigation Drawer works with the value given for the properties inside the DrawerSettings class when using the default drawer settings. -### Header view of the default drawer +### Header View of the Default Drawer -The header content can be provided to the default drawer using the `DrawerHeaderView` property inside the DrawerSettings class of DefaultDrawerSettings. The following code sample demonstrates how to set header content to the default drawer. +The header content can be provided to the default drawer using the `DrawerHeaderView` property inside the `DrawerSettings` class. The following code sample demonstrates how to set header content for the default drawer. {% tabs %} @@ -306,9 +308,9 @@ navigation.DefaultDrawerSettings = defaultDrawerSettings; {% endtabs %} -### Content view of the default drawer +### Content View of the Default Drawer -The drawer content can be provided to the default drawer using the `DrawerContentView` property inside the DrawerSettings class. The following code sample demonstrates how to set drawer content to the default drawer. +The drawer content can be provided to the default drawer using the `DrawerContentView` property inside the `DrawerSettings` class. The following code sample demonstrates how to set drawer content for the default drawer. {% tabs %} @@ -334,9 +336,9 @@ SetContentView(navigationDrawer); {% endtabs %} -### Footer view of the default drawer +### Footer View of the Default Drawer -The footer content can be provided to the default drawer using the `DrawerFooterView` property inside the DrawerSettings class of DefaultDrawerSettings. The following code sample demonstrates how to set footer content to the default drawer. +The footer content can be provided to the default drawer using the `DrawerFooterView` property inside the `DrawerSettings` class. The following code sample demonstrates how to set footer content for the default drawer. {% tabs %} @@ -359,9 +361,9 @@ navigation.DefaultDrawerSettings = defaultDrawerSettings; {% endtabs %} -## Secondary drawer settings +## Secondary Drawer Settings -Implement the secondary drawer using the secondary drawer settings class. Its properties and functionalities are same as the default drawer. The secondary drawer can be set to different positions similar to the default drawer. The following code sample demonstrates how to set the properties of secondary drawer settings inside the DrawerSettings class. +Implement the secondary drawer using the secondary drawer settings class. Its properties and functionalities are the same as the default drawer. The secondary drawer can be positioned differently from the default drawer. The following code sample demonstrates how to configure the properties of secondary drawer settings. {% tabs %} @@ -383,9 +385,9 @@ secondaryDrawerSettings.DrawerFooterHeight = 150; N> When the default drawer and the secondary drawer are set to the same position, the default drawer will open on swiping. -### Header view of the secondary drawer +### Header View of the Secondary Drawer -The header content can be provided to the secondary drawer using the `DrawerHeaderView` property inside the DrawerSettings class of SecondaryDrawerSettings. The following code sample demonstrates how to set the header content to the secondary drawer. +The header content can be provided to the secondary drawer using the `DrawerHeaderView` property inside the `DrawerSettings` class. The following code sample demonstrates how to set header content for the secondary drawer. {% tabs %} @@ -408,9 +410,9 @@ navigation.SecondaryDrawerSettings=secondaryDrawerSettings; {% endtabs %} -### Content view of the secondary drawer +### Content View of the Secondary Drawer -The drawer content can be provided to the secondary drawer using the `DrawerContentView` property inside the DrawerSettings class of SecondaryDrawerSettings. The following code sample demonstrates how to set the drawer content to the secondary drawer. +The drawer content can be provided to the secondary drawer using the `DrawerContentView` property inside the `DrawerSettings` class. The following code sample demonstrates how to set drawer content for the secondary drawer. {% tabs %} @@ -435,9 +437,9 @@ SetContentView(navigationDrawer); {% endtabs %} -### Footer view of the secondary drawer +### Footer View of the Secondary Drawer -The footer content can be provided to the secondary drawer using the `DrawerFooterView` property inside the DrawerSettings class of SecondaryDrawerSettings. The following code sample demonstrates how to set footer content to the secondary drawer. +The footer content can be provided to the secondary drawer using the `DrawerFooterView` property inside the `DrawerSettings` class. The following code sample demonstrates how to set footer content for the secondary drawer. {% tabs %} @@ -460,7 +462,7 @@ navigation.SecondaryDrawerSettings = secondaryDrawerSettings; {% endtabs %} -## Toggling method +## Toggling Methods Users can toggle the secondary drawer using the `ToggleSecondaryDrawer` method. @@ -470,8 +472,8 @@ navigationDrawer.ToggleSecondaryDrawer(); {% endhighlight %} -### Opening the drawer programmatically +### Opening Drawer Programmatically -The `IsOpen` property in the DrawerSettings of SecondaryDrawerSettings is used to open or close the drawer programmatically. +The `IsOpen` property in the `DrawerSettings` can be used to open or close the drawer programmatically. N> Users can open only one drawer at a time. diff --git a/Xamarin-iOS/SfNavigationDrawer/Main-Content.md b/Xamarin-iOS/SfNavigationDrawer/Main-Content.md index dab3c4ec..fd3f6549 100644 --- a/Xamarin-iOS/SfNavigationDrawer/Main-Content.md +++ b/Xamarin-iOS/SfNavigationDrawer/Main-Content.md @@ -1,7 +1,7 @@ --- layout: post -title: Various features of Syncfusion® NavigationDrawer control for Xamarin.iOS -description: Learn how to set content view, drawer content view, footer view, header view, drawer size in NavigationDrawer. +title: Main content configuration for Syncfusion® NavigationDrawer control in Xamarin.iOS +description: Learn how to configure the main content view in NavigationDrawer control for Xamarin.iOS applications. platform: xamarin.ios control: NavigationDrawer documentation: ug @@ -9,11 +9,11 @@ documentation: ug # Setting Main Content -The SfNavigationDrawer is mainly divided into two parts, such as [Main Content](#main-content) and [Drawer Panel Content](/Xamarin-iOS/SfNavigationDrawer/Drawer-Content "Sliding Panel Contents") +The SfNavigationDrawer is primarily divided into two main parts: [Main Content](#main-content) and [Drawer Panel Content](/xamarin-ios/navigationdrawer/drawer-content "Sliding Panel Contents"). ## Main Content -The main display view that displays our various content of the app can be set using `ContentView` property with desired views. +The main content view displays the primary content of your application and can be configured using the `ContentView` property with your desired views. {% tabs %} @@ -61,4 +61,4 @@ The main display view that displays our various content of the app can be set us {% endtabs %} -![](images/content-view.png) \ No newline at end of file +![Main content view](images/content-view.png) diff --git a/Xamarin-iOS/SfNavigationDrawer/getting-started.md b/Xamarin-iOS/SfNavigationDrawer/getting-started.md index 69184193..0bb6ba15 100644 --- a/Xamarin-iOS/SfNavigationDrawer/getting-started.md +++ b/Xamarin-iOS/SfNavigationDrawer/getting-started.md @@ -1,6 +1,6 @@ --- layout: post -title: Getting Started with Xamarin.iOS NavigationDrawer control| Syncfusion® +title: Getting Started with Xamarin.iOS NavigationDrawer control | Syncfusion® description: Learn here about getting started with Syncfusion® Essential Studio® Xamarin.iOS NavigationDrawer control, its elements, and more. platform: xamarin.ios control: NavigationDrawer @@ -9,21 +9,21 @@ documentation: ug # Getting Started with Xamarin.iOS NavigationDrawer -This section provides overview for working with Essential® NavigationDrawer for Xamarin.iOS. You can walk through the entire process of creating an NavigationDrawer. +This section provides an overview for working with Essential® NavigationDrawer for Xamarin.iOS. You can walk through the entire process of creating a NavigationDrawer control. -## Referencing Essential Studio® Components in Your Solution - -After installing Essential Studio® for Xamarin, you can find all the required assemblies in the installation folders, +## Assembly References +After installing Essential Studio® for Xamarin, you can find all the required assemblies in the installation folders: {Syncfusion Installed location}\Essential Studio {version number}\lib -Add the following assembly references to the iOS project, +Add the following assembly reference to the iOS project: android\Syncfusion.SfNavigationDrawer.iOS.dll ## Add SfNavigationDrawer -* Adding namespace for the added assemblies. +### Adding Namespace +Add the namespace for the included assemblies: {% tabs %} @@ -111,8 +111,7 @@ The main view of the NavigationDrawer can be set using `ContentView` property wi ## Add Drawer Content -The sliding main content of the NavigationDrawer which is a part of DrawerPanel can be set using `DrawerContentView` property with desired views. - +The sliding drawer content of the NavigationDrawer can be configured using the `DrawerContentView` property. This typically contains navigation menu items. {% tabs %} {% highlight c# %} diff --git a/Xamarin-iOS/SfNavigationDrawer/overview.md b/Xamarin-iOS/SfNavigationDrawer/overview.md index 76ac9725..49144cb9 100644 --- a/Xamarin-iOS/SfNavigationDrawer/overview.md +++ b/Xamarin-iOS/SfNavigationDrawer/overview.md @@ -1,7 +1,7 @@ --- layout: post title: Overview of Syncfusion® NavigationDrawer control for Xamarin.iOS -description: Overview and key features of NavigationDrawer control +description: Overview and key features of NavigationDrawer control for Xamarin.iOS applications platform: xamarin.ios control: NavigationDrawer documentation: ug @@ -9,10 +9,9 @@ documentation: ug # Overview -The NavigationDrawer is a sliding panel menu that comes out from the edge of the window and allows to have the contents in a hidden panel. It can be shown by swiping from any of the four screen edges or by demand. - -![](images/overview.png) +The NavigationDrawer is a sliding panel menu that slides out from the screen edge, allowing you to organize content in a hidden panel. The drawer can be revealed by swiping from any of the four screen edges or programmatically on demand, providing an intuitive navigation experience for mobile applications. +![NavigationDrawer overview example](images/overview.png) ## Key Features * `Position` - Specifies various sliding positions of the drawer content in Navigation Drawer. @@ -21,3 +20,33 @@ The NavigationDrawer is a sliding panel menu that comes out from the edge of the + +* **Position** - Configure the drawer to slide from any of the four screen edges (left, right, top, or bottom) to suit your application's layout requirements. + +* **Transition** - Choose from multiple transition animations including SlideOnTop, Push, and Reveal to create smooth and engaging drawer opening effects. + +* **Multiple Drawers** - Support for implementing multiple drawers with different positions and configurations using default and secondary drawer settings. + +* **Flexible Content** - Customize drawer content with header, main content, and footer sections to organize navigation elements effectively. + +* **Gesture Support** - Built-in swipe gesture recognition for intuitive drawer interaction, with options to enable or disable gestures as needed. + +* **Programmatic Control** - Methods to open, close, and toggle drawer state programmatically, providing full control over drawer behavior. + +* **Customizable Appearance** - Extensive styling options including drawer size, background colors, and content layout customization. + +* **Touch Threshold** - Configurable touch sensitivity for gesture-based drawer activation to optimize user experience. + +## Use Cases + +The NavigationDrawer is ideal for: + +* **Mobile Navigation Menus** - Primary navigation for mobile applications with multiple sections +* **Settings Panels** - Quick access to application settings and preferences +* **User Profiles** - Display user information and account-related options +* **Filter Options** - Contextual filtering controls for data-heavy applications +* **Secondary Actions** - Additional actions and tools that don't fit in the main interface + +## Getting Started + +To begin using the NavigationDrawer in your Xamarin.iOS application, refer to the [Getting Started](getting-started) guide for step-by-step implementation instructions. diff --git a/Xamarin-iOS/SfNavigationDrawer/position.md b/Xamarin-iOS/SfNavigationDrawer/position.md index 81d43f6a..8e0a826c 100644 --- a/Xamarin-iOS/SfNavigationDrawer/position.md +++ b/Xamarin-iOS/SfNavigationDrawer/position.md @@ -1,15 +1,15 @@ --- layout: post -title: Position of Drawer in Syncfusion® NavigationDrawer control for Xamarin.iOS -description: Learn how to set position of the DrawerView panel. +title: Drawer position configuration for Syncfusion® NavigationDrawer control in Xamarin.iOS +description: Learn how to configure the position of the DrawerView panel in NavigationDrawer control. platform: xamarin.ios control: NavigationDrawer documentation: ug --- -# Configuring The Drawer In Different Sides -The `Position` property specifies the sliding position of the DrawerView panel. The `Position` property has the following four options. +# Drawer Position Configuration +The `Position` property specifies the sliding position of the DrawerView panel. The drawer can be positioned to slide from any of the four screen edges. The `Position` property supports the following four options: * Left * Right @@ -20,10 +20,9 @@ The `Position` property specifies the sliding position of the DrawerView panel. N> The default option is Left. -## Left - -Sets the NavigationDrawer sliding position to the left. +## Left Position +Configures the NavigationDrawer to slide from the left edge of the screen. {% tabs %} {% highlight c# %} @@ -34,12 +33,11 @@ navigation.Position = SFNavigationDrawerPosition.SFNavigationDrawerPositionLeft; {% endtabs %} -![](images/left.png) - -## Right +![Left position drawer example](images/left.png) -Sets the NavigationDrawer sliding position to the right. +## Right Position +Configures the NavigationDrawer to slide from the right edge of the screen. {% tabs %} {% highlight c# %} @@ -50,12 +48,11 @@ navigation.Position = SFNavigationDrawerPosition.SFNavigationDrawerPositionRight {% endtabs %} -![](images/Right.png) - -## Top +![Right position drawer example](images/Right.png) -Sets the NavigationDrawer sliding position to the top. +## Top Position +Configures the NavigationDrawer to slide from the top edge of the screen. {% tabs %} {% highlight c# %} @@ -66,12 +63,11 @@ navigation.Position = SFNavigationDrawerPosition.SFNavigationDrawerPositionTop; {% endtabs %} -![](images/Top.png) +![Top position drawer example](images/Top.png) -## Bottom - -Sets the NavigationDrawer sliding position to the bottom. +## Bottom Position +Configures the NavigationDrawer to slide from the bottom edge of the screen. {% tabs %} {% highlight c# %} @@ -82,10 +78,5 @@ navigation.Position = SFNavigationDrawerPosition.SFNavigationDrawerPositionBotto {% endtabs %} -![](images/bottom.png) - - - - - +![Bottom position drawer example](images/bottom.png) diff --git a/Xamarin-iOS/SfRadialMenu/CenterButtonCustomization.md b/Xamarin-iOS/SfRadialMenu/CenterButtonCustomization.md index 7d5743ce..833a1cca 100644 --- a/Xamarin-iOS/SfRadialMenu/CenterButtonCustomization.md +++ b/Xamarin-iOS/SfRadialMenu/CenterButtonCustomization.md @@ -1,19 +1,18 @@ --- layout: post -title: Center button with Syncfusion® RadialMenu control in Xamarin.iOS -description: Working with customization options available in the SfRadialMenuItems for CenterButton and BackButton in Xamarin.iOS +title: Center button customization with Syncfusion® RadialMenu control in Xamarin.iOS +description: Learn about customization options available for CenterButton and BackButton in SfRadialMenu for Xamarin.iOS platform: xamarin.ios control: SfRadialMenu documentation: ug --- -# Dealing with CenterButton and BackButton - -The CenterButton or BackButton in the radial menu can be viewed in the center of the radial menu. It performs operations such as opening and closing the rim and navigating to next level items. The radial menu allows you to customize the CenterButton/BackButton with `FontIcon`, `Custom View`, and `Caption`. +# Center Button and Back Button Customization +The center button and back button in the radial menu are displayed at the center of the control. These buttons perform essential operations such as opening and closing the rim and navigating between menu levels. The SfRadialMenu allows you to customize the center button and back button with various options including font icons, custom views, and captions. ## CenterButtonText and CenterButtonBackText -The [CenterButtonText](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfRadialMenu.iOS.SfRadialMenu.html#Syncfusion_SfRadialMenu_iOS_SfRadialMenu_CenterButtonText) changes the text of the center button in `SfRadialMenu`, and the [CenterButtonBackText](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfRadialMenu.iOS.SfRadialMenu.html#Syncfusion_SfRadialMenu_iOS_SfRadialMenu_CenterButtonBackText) changes the text of the center back button in [SfRadialMenu](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfRadialMenu.iOS.SfRadialMenu.html). +The [CenterButtonText](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfRadialMenu.iOS.SfRadialMenu.html#Syncfusion_SfRadialMenu_iOS_SfRadialMenu_CenterButtonText) property sets the text or icon for the center button in SfRadialMenu, while the [CenterButtonBackText](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfRadialMenu.iOS.SfRadialMenu.html#Syncfusion_SfRadialMenu_iOS_SfRadialMenu_CenterButtonBackText) property sets the text or icon for the center back button. {% tabs %} {% highlight C# %} @@ -70,12 +69,10 @@ namespace RadialMenuNative {% endhighlight %} {% endtabs %} -![CenterButtonText](images/CenterButtonText.png) - +![Center button text customization example](images/CenterButtonText.png) ## CenterButtonTextColor and CenterButtonBackTextColor -The [CenterButtonTextColor](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfRadialMenu.iOS.SfRadialMenu.html#Syncfusion_SfRadialMenu_iOS_SfRadialMenu_CenterButtonTextColor) changes the text color of the center button in `SfRadialMenu`, and the 'CenterButtonBackTextColor' changes the text color of the center back button in [SfRadialMenu](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfRadialMenu.iOS.SfRadialMenu.html). - +The [CenterButtonTextColor](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfRadialMenu.iOS.SfRadialMenu.html#Syncfusion_SfRadialMenu_iOS_SfRadialMenu_CenterButtonTextColor) property changes the text color of the center button, while the [CenterButtonBackTextColor](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfRadialMenu.iOS.SfRadialMenu.html#Syncfusion_SfRadialMenu_iOS_SfRadialMenu_CenterButtonBackTextColor) property changes the text color of the center back button in SfRadialMenu. {% tabs %} {% highlight C# %} @@ -558,3 +555,4 @@ namespace RadialMenuNative {% endhighlight %} {% endtabs %} + diff --git a/Xamarin-iOS/SfRadialMenu/Events.md b/Xamarin-iOS/SfRadialMenu/Events.md index a7e6193f..08264e51 100644 --- a/Xamarin-iOS/SfRadialMenu/Events.md +++ b/Xamarin-iOS/SfRadialMenu/Events.md @@ -1,7 +1,7 @@ --- layout: post title: Events in Syncfusion® RadialMenu control for Xamarin.iOS -description: Learn how to perform events like navigating, opening, navigated, opened, center button tapped, and when the center button back has been tapped in SfRadialMenu +description: Learn how to handle events like navigating, opening, closing, center button tapped, and center button back tapped in SfRadialMenu platform: xamarin.ios control: SfRadialMenu documentation: ug @@ -11,8 +11,7 @@ documentation: ug ## Perform an action when navigating to the next level -In a radial menu, you can perform actions when navigating from one level to another. The `Navigating` event occurs when navigating from one level to another, and the `Navigated` event occurs after navigating to another level. - +You can perform actions when navigating between different levels in the radial menu. The `Navigating` event occurs before navigating from one level to another, while the `Navigated` event occurs after the navigation is completed. {% tabs %} {% highlight c# %} @@ -93,7 +92,7 @@ N> You can cancel navigation using the `Cancel` event argument. ## Perform an action when opening the radial menu -You can perform an action when opening the radial menu. The `Opening` event occurs when opening the radial menu, and the `Opened` event occurs after the radial menu is opened. +You can perform actions when the radial menu is being opened. The `Opening` event occurs before the radial menu opens, while the `Opened` event occurs after the menu is fully opened. {% tabs %} {% highlight c# %} @@ -320,4 +319,4 @@ namespace RadialMenuNative } {% endhighlight %} -{% endtabs %} \ No newline at end of file +{% endtabs %} diff --git a/Xamarin-iOS/SfRadialMenu/GettingStarted.md b/Xamarin-iOS/SfRadialMenu/GettingStarted.md index c9ffe45b..04d2b9e8 100644 --- a/Xamarin-iOS/SfRadialMenu/GettingStarted.md +++ b/Xamarin-iOS/SfRadialMenu/GettingStarted.md @@ -1,7 +1,7 @@ --- layout: post -title: Getting Started with Syncfusion® RadialMenu control for Xamarin.Android -description: A quick tour to the new users of Syncfusion® RadialMenu control to get familiar with the control for Xamarin.iOS platform. +title: Getting Started with Syncfusion® RadialMenu control for Xamarin.iOS +description: A quick tour for new users of Syncfusion® RadialMenu control to get familiar with the control for Xamarin.iOS platform. platform: xamarin.ios control: RadialMenu documentation: ug @@ -9,21 +9,21 @@ documentation: ug # Getting Started -This section explains the steps required to configure the SfRadialMenu control in a real-time scenario and provides a walk-through on some of the customization features available. +This section explains the steps required to configure the SfRadialMenu control in a real-time scenario and provides a walk-through of some of the customization features available in Xamarin.iOS applications. -## Referencing Essential Studio® components in your solution +## Assembly References +After installing Essential Studio® for Xamarin, you can find all the required assemblies in the installation folders: -After installing Essential Studio® for Xamarin, you can find all the required assemblies in the installation folders. +{Syncfusion Installed location}\Essential Studio\{Version}\lib -{Syncfusion Installed location}\Essential Studio\14.XXXX.X.XX\lib - -Add the following assembly references to the Android project. +Add the following assembly reference to the iOS project: ios-unified\Syncfusion.SfRadialMenu.iOS.dll -## Add SfRadialMenu +## Initialize SfRadialMenu -* Adding namespace to the added assemblies. +### Adding Namespace +Add the namespace for the included assemblies: {% tabs %} {% highlight c# %} @@ -70,10 +70,17 @@ using Syncfusion.SfRadialMenu.iOS; {% endhighlight %} {% endtabs %} -## Adding RadialMenu items +## Adding RadialMenu Items + +The SfRadialMenu provides options to add multiple radial menu items with hierarchical structure. You can use font icons by adding an external font file to your iOS project bundle and referencing it through Unicode characters. + +### Font Setup -SfRadialMenu provides the option to add a number of radial menu items. Add an external font icon typeface into the `Asset` folder, and then set its build action to Android assets. The Unicode can be passed as text to display icons in the SfRadialMenu item. +1. Add your custom font file to the iOS project bundle +2. Ensure the font is properly registered in your iOS application +3. Use Unicode characters to display icons in RadialMenu items +### Adding Items with Sub-Items {% tabs %} {% highlight c# %} diff --git a/Xamarin-iOS/SfRadialMenu/Overview.md b/Xamarin-iOS/SfRadialMenu/Overview.md index 3153130c..2032de96 100644 --- a/Xamarin-iOS/SfRadialMenu/Overview.md +++ b/Xamarin-iOS/SfRadialMenu/Overview.md @@ -1,7 +1,7 @@ --- layout: post -title: Overview of Syncfusion® RadialMenu control for Xamarin.iOS. -description: Overview and key features of Syncfusion® RadialMenu control to know more about the control in Xamarin.iOS. +title: Overview of Syncfusion® RadialMenu control for Xamarin.iOS +description: Overview and key features of Syncfusion® RadialMenu control for Xamarin.iOS applications platform: xamarin.ios control: SfRadialMenu documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Overview -The SfRadialMenu control for Xamarin.iOS displays a hierarchical menu in a circular layout, which is optimized for touch-enabled devices. Typically, it is used as a context menu, and it can expose more menu items in the same space than traditional menus. +The SfRadialMenu control for Xamarin.iOS displays a hierarchical menu in a circular layout, optimized for touch-enabled devices. This control is typically used as a context menu and can expose more menu items in the same space than traditional linear menus, providing an intuitive and space-efficient navigation experience. ## Key features @@ -23,4 +23,4 @@ Key features in SfRadialMenu * Allows you to provide a built-in icon font option that helps users to add vector images that prevent the control from experiencing image glitches that are often faced with traditional image icons. * Provides complete customization options for the menu and its items, such as coloring, size, placement, and shapes using the segmentation option. -![OverView of SfRadialMenu](images/overview.png) \ No newline at end of file +![OverView of SfRadialMenu](images/overview.png) diff --git a/Xamarin-iOS/SfRadialMenu/PlaceAndDragRadialMenu.md b/Xamarin-iOS/SfRadialMenu/PlaceAndDragRadialMenu.md index 3d92730a..4ea967a5 100644 --- a/Xamarin-iOS/SfRadialMenu/PlaceAndDragRadialMenu.md +++ b/Xamarin-iOS/SfRadialMenu/PlaceAndDragRadialMenu.md @@ -1,19 +1,19 @@ --- layout: post -title: Placing and Dragging Syncfusion® RadialMenu control in Xamarin.iOS -description: Positioning and dragging of Syncfusion® RadialMenu control using Point, DragBegin, and DragEnd in Xamarin.iOS respectively. +title: Placing and dragging Syncfusion® RadialMenu control in Xamarin.iOS +description: Learn how to position and enable dragging functionality for Syncfusion® RadialMenu control using Position, DragBegin, and DragEnd properties in Xamarin.iOS. platform: xamarin.ios control: SfRadialMenu documentation: ug --- -# Placing and dragging RadialMenu +# Placing and Dragging RadialMenu -You can place the radial menu anywhere on its parent layout and drag it with in the parent layout. +You can place the radial menu anywhere within its parent layout and enable dragging functionality to allow users to reposition the menu interactively. ## Dragging RadialMenu -You can enable or disable dragging using the [IsDragEnabled](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfRadialMenu.iOS.SfRadialMenu.html#Syncfusion_SfRadialMenu_iOS_SfRadialMenu_IsDragEnabled) property. +You can enable or disable the dragging functionality using the [IsDragEnabled](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfRadialMenu.iOS.SfRadialMenu.html#Syncfusion_SfRadialMenu_iOS_SfRadialMenu_IsDragEnabled) property. {% tabs %} {% highlight c# %} @@ -69,20 +69,18 @@ namespace RadialMenuNative {% endhighlight %} {% endtabs %} -## DragEvents +## Drag Events -SfRadialMenu provides the DragBegin and DragEnd events that occur when the RadialMenu is dragged. +The SfRadialMenu provides `DragBegin` and `DragEnd` events that occur when the RadialMenu is being dragged, allowing you to handle drag operations and implement custom logic. -### DragBegin +### DragBegin Event -This event occurs when you start dragging RadialMenu with `DragBeginEventArgs`. +This event occurs when you start dragging the RadialMenu. The event provides `DragBeginEventArgs` with the following properties: -* `Position`: Gets the start position of the RadialMenu. - -* `Handled`: Gets or sets the Boolean value for enabling and disabling the dragging of RadialMenu. - -To hook the [DragBegin](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfRadialMenu.iOS.SfRadialMenu.html#Syncfusion_SfRadialMenu_iOS_SfRadialMenu_DragBegin) event and to get the start position and restrict dragging, refer to the following code example. +* **Position** - Gets the starting position of the RadialMenu +* **Handled** - Gets or sets a Boolean value to enable or disable the dragging operation +To handle the [DragBegin](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfRadialMenu.iOS.SfRadialMenu.html#Syncfusion_SfRadialMenu_iOS_SfRadialMenu_DragBegin) event and access the start position or restrict dragging, refer to the following code example: {% tabs %} {% highlight c# %} @@ -339,3 +337,4 @@ namespace RadialMenuNative {% endtabs %} ![Image for position](images/position.png) + diff --git a/Xamarin-iOS/SfRadialMenu/PopulatingItems.md b/Xamarin-iOS/SfRadialMenu/PopulatingItems.md index cd848f3e..74f703a8 100644 --- a/Xamarin-iOS/SfRadialMenu/PopulatingItems.md +++ b/Xamarin-iOS/SfRadialMenu/PopulatingItems.md @@ -1,7 +1,7 @@ --- layout: post -title: Data binding in Syncfusion® RadialMenu control for Xamarin.iOS -description: Learn how to perform DataBinding, adding outer rim items, nested items, duration of the animation, and other property usages in SfRadialMenu. +title: Populating items in Syncfusion® RadialMenu control for Xamarin.iOS +description: Learn how to populate items, add nested items, configure animation duration, and customize appearance properties in SfRadialMenu. platform: xamarin.ios control: SfRadialMenu documentation: ug @@ -9,16 +9,15 @@ documentation: ug # Populating Items -This section explains how to populate items using the radial menu item and item source. +This section explains how to populate items in the RadialMenu using different approaches and customize their appearance and behavior. -## Through radial menu items +## Adding Items Through RadialMenuItem Collection -By passing a collection of [SfRadialMenuItem](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfRadialMenu.iOS.SfRadialMenuItem.html), you can get the view of the `SfRadialMenu` control. The radial menu item class provides various options such as custom views, font icons, and images to customize the items. You can also add radial menu items by hierarchy. +You can populate the SfRadialMenu by passing a collection of [SfRadialMenuItem](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfRadialMenu.iOS.SfRadialMenuItem.html) objects. The RadialMenuItem class provides various customization options including custom views, font icons, and images. You can also create hierarchical menu structures with nested items. -### Adding outer rim items of radial menu - -The following code sample shows how to add the outer rim items of the radial menu. +### Adding Outer Rim Items +The following code sample demonstrates how to add items to the outer rim of the radial menu: {% tabs %} {% highlight c# %} @@ -67,12 +66,9 @@ namespace RadialMenuNative {% endhighlight %} {% endtabs %} -### Adding nested items of a radial menu - -You can populate the nested levels of items within a menu to group similar actions. For example, you can group the clipboard operations by adding clipboard as the main menu and cut, copy, and paste as its children. - -The following code sample shows how to add the nested items of the radial menu. +### Adding Nested Items +You can create hierarchical menu structures by adding nested items within main menu items. This is useful for grouping related actions together. For example, you can group clipboard operations by adding clipboard as the main menu item and cut, copy, and paste as its sub-items. {% tabs %} {% highlight c# %} @@ -425,3 +421,4 @@ namespace RadialMenuNative {% endtabs %} ![RimRadius](images/RimRadius.png) + diff --git a/Xamarin-iOS/SfRadialMenu/SegmentingAndPlacingItem.md b/Xamarin-iOS/SfRadialMenu/SegmentingAndPlacingItem.md index 98cf7887..750fedfb 100644 --- a/Xamarin-iOS/SfRadialMenu/SegmentingAndPlacingItem.md +++ b/Xamarin-iOS/SfRadialMenu/SegmentingAndPlacingItem.md @@ -9,17 +9,16 @@ documentation: ug # Layout Types -The following two different [LayoutTypes](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfRadialMenu.iOS.SfRadialMenu.html#Syncfusion_SfRadialMenu_iOS_SfRadialMenu_LayoutType) available available in the radial menu are: +The SfRadialMenu provides two different [LayoutTypes](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfRadialMenu.iOS.SfRadialMenu.html#Syncfusion_SfRadialMenu_iOS_SfRadialMenu_LayoutType) for organizing menu items: -* Default -* Custom +* **Default** - Automatic arrangement based on item count +* **Custom** - Manual control over item positioning and segments -Both the layout types divide the available space equally among all the children in the circular panel. +Both layout types divide the available circular space among all the menu items, but they differ in how the segmentation and positioning are handled. -## Default - -The number of segments in the panel is determined by the children count in a level. As the segment count in each hierarchical level differs, radial menu items are arranged in a sequential order as added to the radial menu. +## Default Layout +In the default layout, the number of segments in the circular panel is automatically determined by the number of child items at each hierarchical level. Since the segment count can vary between different levels, radial menu items are arranged in sequential order as they are added to the menu. {% tabs %} {% highlight c# %} @@ -74,10 +73,9 @@ namespace RadialMenuNative {% endhighlight %} {% endtabs %} -## Custom - -The number of segments in the panel is determined using the [VisibleItemCount](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfRadialMenu.iOS.SfRadialMenu.html#Syncfusion_SfRadialMenu_iOS_SfRadialMenu_VisibleItemCount) property. As the segment count in all the hierarchical levels is the same, radial menu items are arranged in any order based on the [SlottedIndex](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfRadialMenu.iOS.SfRadialMenuItem.html#Syncfusion_SfRadialMenu_iOS_SfRadialMenuItem_SlottedIndex) property. +## Custom Layout +In the custom layout, the number of segments in the circular panel is determined by the [VisibleItemCount](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfRadialMenu.iOS.SfRadialMenu.html#Syncfusion_SfRadialMenu_iOS_SfRadialMenu_VisibleItemCount) property. This ensures that all hierarchical levels have the same segment count, and menu items can be arranged in any order based on their [SlottedIndex](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfRadialMenu.iOS.SfRadialMenuItem.html#Syncfusion_SfRadialMenu_iOS_SfRadialMenuItem_SlottedIndex) property. {% tabs %} {% highlight c# %} @@ -307,3 +305,4 @@ namespace RadialMenuNative {% endtabs %} ![images](images/StartAngle.png) + diff --git a/Xamarin-iOS/SfRadialMenu/SfRadialMenuItemCustomization.md b/Xamarin-iOS/SfRadialMenu/SfRadialMenuItemCustomization.md index df0e2fd7..0f73d9a3 100644 --- a/Xamarin-iOS/SfRadialMenu/SfRadialMenuItemCustomization.md +++ b/Xamarin-iOS/SfRadialMenu/SfRadialMenuItemCustomization.md @@ -1,7 +1,7 @@ --- layout: post -title: Syncfusion® RadialMenu item customization in Xamarin.iOS -description: Working with Syncfusion® RadialMenu customization of items, text, text color, background color, and view in Xamarin.iOS. +title: RadialMenuItem customization in Syncfusion® RadialMenu control for Xamarin.iOS +description: Learn how to customize RadialMenu items including text, colors, fonts, images, and dimensions in Xamarin.iOS applications. platform: xamarin.ios control: SfRadialMenu documentation: ug @@ -9,11 +9,12 @@ documentation: ug # SfRadialMenuItem Customization -The [SfRadialMenuItem](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfRadialMenu.iOS.SfRadialMenuItem.html) class provides various options such as `Custom Views`, `FontIcons`, and `Images` to customize the items. You can add radial menu items by hierarchy. To add a SfRadialMenuItem with SfRadialMenu, create an instance of SfRadialMenuItem, and add it to the [Items](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfRadialMenu.iOS.SfRadialMenu.html#Syncfusion_SfRadialMenu_iOS_SfRadialMenu_Items) property that is available in SfRadialMenu. +The [SfRadialMenuItem](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfRadialMenu.iOS.SfRadialMenuItem.html) class provides extensive customization options including custom views, font icons, images, and text styling. You can create hierarchical menu structures by adding items to the [Items](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfRadialMenu.iOS.SfRadialMenu.html#Syncfusion_SfRadialMenu_iOS_SfRadialMenu_Items) collection of the SfRadialMenu. -## Items +## Hierarchical Item Structure -The [Items](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfRadialMenu.iOS.SfRadialMenu.html#Syncfusion_SfRadialMenu_iOS_SfRadialMenu_Items) ) property populates the items of an inner rim in `SfRadialMenu` when the items of an outer rim are tapped. +### Items Collection +The [Items](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfRadialMenu.iOS.SfRadialMenu.html#Syncfusion_SfRadialMenu_iOS_SfRadialMenu_Items) property allows you to create nested menu structures. When an outer rim item is tapped, its child items are displayed in the inner rim. {% tabs %} {% highlight C# %} @@ -55,9 +56,10 @@ namespace RadialMenuNative {% endhighlight %} {% endtabs %} -## Text +## Text Customization -The [Text](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfRadialMenu.iOS.SfRadialMenuItem.html#Syncfusion_SfRadialMenu_iOS_SfRadialMenuItem_Text) property provides text to the [SfRadialMenuItem](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfRadialMenu.iOS.SfRadialMenuItem.html). +### Text Property +The [Text](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfRadialMenu.iOS.SfRadialMenuItem.html#Syncfusion_SfRadialMenu_iOS_SfRadialMenuItem_Text) property allows you to display text labels on RadialMenu items. {% tabs %} {% highlight C# %}