diff --git a/xamarin-android/SfCheckBox/Event.md b/xamarin-android/SfCheckBox/Event.md index d6a0b168..33f1c710 100644 --- a/xamarin-android/SfCheckBox/Event.md +++ b/xamarin-android/SfCheckBox/Event.md @@ -1,20 +1,20 @@ --- layout: post title: Event | SfCheckBox | Syncfusion® | Xamarin.Android -description: Learn how to get the notification of StateChanged event in Xamarin.Android CheckBox(SfCheckBox) control -platform: Xamarin.Android +description: Learn how to get the notification of StateChanged event in Xamarin.Android CheckBox (SfCheckBox) control +platform: xamarin.android control: SfCheckBox documentation: ug keywords: button, SfCheckBox, CheckBox --- -# Event in Xamarin.Android Chart(SfChart) +# Event in Xamarin.Android CheckBox (SfCheckBox) -## StateChanged event -Occurs when the value(state) of the [`Checked`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfCheckBox.html#Syncfusion_Android_Buttons_SfCheckBox_Checked) property is changed by either touching the check box or setting the value to the [`Checked`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfCheckBox.html#Syncfusion_Android_Buttons_SfCheckBox_Checked) property using C# code. The event arguments are of type [`StateChangedEventArgs`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.StateChangedEventArgs.html) and expose the following property: +## StateChanged Event +Occurs when the value (state) of the [`Checked`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfCheckBox.html#Syncfusion_Android_Buttons_SfCheckBox_Checked) property is changed by either touching the check box or setting the value to the [`Checked`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfCheckBox.html#Syncfusion_Android_Buttons_SfCheckBox_Checked) property using C# code. The event arguments are of type [`StateChangedEventArgs`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.StateChangedEventArgs.html) and expose the following property: -* [`IsChecked`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.StateChangedEventArgs.html#Syncfusion_Android_Buttons_StateChangedEventArgs_IsChecked): The new value(state) of the [`Checked`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfCheckBox.html#Syncfusion_Android_Buttons_SfCheckBox_Checked) property. +* [`IsChecked`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.StateChangedEventArgs.html#Syncfusion_Android_Buttons_StateChangedEventArgs_IsChecked): The new value (state) of the [`Checked`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfCheckBox.html#Syncfusion_Android_Buttons_SfCheckBox_Checked) property. {% tabs %} {% highlight c# %} diff --git a/xamarin-android/SfCheckBox/Getting-Started.md b/xamarin-android/SfCheckBox/Getting-Started.md index 5b543570..5f231657 100644 --- a/xamarin-android/SfCheckBox/Getting-Started.md +++ b/xamarin-android/SfCheckBox/Getting-Started.md @@ -1,6 +1,6 @@ --- layout: post -title: Getting started in Syncfusion® CheckBox for Xamarin.Android platform +title: Getting Started with Syncfusion® CheckBox for Xamarin.Android Platform description: Learn how to create a simple CheckBox and their customization options with the available basic features in Xamarin.Android platform: xamarin.android control: SfCheckBox @@ -9,20 +9,20 @@ keywords: button, SfCheckBox, CheckBox --- -# Getting Started Xamarin.Android Checkbox (SfCheckbox) -This section explains the steps required to configure the [`SfCheckBox`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfCheckBox.html) control in a real-time scenario and provides a walk-through on some of the customization features available in [`SfCheckBox`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfCheckBox.html) control. +# Getting Started with Xamarin.Android CheckBox (SfCheckBox) +This section explains the steps required to configure the [`SfCheckBox`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfCheckBox.html) control in a real-time scenario and provides a walk-through on some of the customization features available in the [`SfCheckBox`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfCheckBox.html) control. -## Add SfCheckBox reference -Syncfusion® Xamarin components are available in [nuget.org](https://www.nuget.org/). To add checkbox to your project, open the NuGet package manager in Visual Studio, and search for "[syncfusion.xamarin.buttons.android](https://www.nuget.org/packages/Syncfusion.Xamarin.Buttons.Android)", and then install it. +## Add SfCheckBox Reference +Syncfusion® Xamarin components are available in [nuget.org](https://www.nuget.org/). To add CheckBox to your project, open the NuGet package manager in Visual Studio, search for "[Syncfusion.Xamarin.Buttons.Android](https://www.nuget.org/packages/Syncfusion.Xamarin.Buttons.Android)", and then install it. ![Xamarin.Android CheckBox NuGet](Images/nuget.png) -N>Starting with v16.2.0.x, if you reference Syncfusion® assemblies from trial setup or from the NuGet feed, you also have to include a license key in your projects. Please refer to this [link](https://help.syncfusion.com/common/essential-studio/licensing/license-key) to know about registering Syncfusion® license key in your Xamarin application to use our components. +N> Starting with v16.2.0.x, if you reference Syncfusion® assemblies from trial setup or from the NuGet feed, you also have to include a license key in your projects. Please refer to this [link](https://help.syncfusion.com/common/essential-studio/licensing/license-key) to know about registering Syncfusion® license key in your Xamarin application to use our components. ## Create a Simple SfCheckBox The [`SfCheckBox`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfCheckBox.html) control is configured entirely in C# code. The following steps explain how to create a [`SfCheckBox`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfCheckBox.html) and configure its elements. -### Add namespace for referred assemblies +### Add Namespace for Referenced Assemblies {% tabs %} {% highlight c# %} @@ -30,7 +30,7 @@ using Syncfusion.XForms.Buttons; {% endhighlight %} {% endtabs %} -### Refer SfCheckBox control with declared suffix name for Namespace +### Refer SfCheckBox Control with Declared Suffix Name for Namespace {% tabs %} {% highlight c# %} @@ -58,8 +58,8 @@ namespace SfCheckBox_Sample {% endhighlight %} {% endtabs %} -## Setting caption -The check box caption can be defined using the `Text` property of [`SfCheckBox`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfCheckBox.html). This caption normally describes the meaning of the check box and it displays next to check box. +## Setting Caption +The CheckBox caption can be defined using the `Text` property of [`SfCheckBox`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfCheckBox.html). This caption normally describes the meaning of the CheckBox and displays next to the CheckBox. {% tabs %} {% highlight c# %} @@ -71,7 +71,8 @@ checkBox.Text = "CheckBox"; ![Xamarin.Android CheckBox caption](Images/Caption.png) -## Change the check box state +## Change the CheckBox State + The three visual states of [`SfCheckBox`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfCheckBox.html) are: * Checked @@ -80,7 +81,7 @@ The three visual states of [`SfCheckBox`](https://help.syncfusion.com/cr/xamarin ![Xamarin.Android CheckBox states](Images/States.png) -You can change the state of the check box using the [`Checked`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfCheckBox.html#Syncfusion_Android_Buttons_SfCheckBox_Checked) property of [`SfCheckBox`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfCheckBox.html). In checked state, a tick mark is added to the visualization of check box. +You can change the state of the CheckBox using the [`Checked`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfCheckBox.html#Syncfusion_Android_Buttons_SfCheckBox_Checked) property of [`SfCheckBox`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfCheckBox.html). In the checked state, a tick mark is added to the visualization of the CheckBox. @@ -96,7 +97,7 @@ You can change the state of the check box using the [`Checked`](https://help.syn
-checked +Checked Checked @@ -107,7 +108,7 @@ true
-unchecked +Unchecked Checked @@ -118,7 +119,7 @@ false
-indeterminate +Indeterminate Checked @@ -129,9 +130,9 @@ null
-N>For the check box, to report the indeterminate state, set the [`IsThreeState`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfCheckBox.html#Syncfusion_Android_Buttons_SfCheckBox_IsThreeState) property to true. +N> For the CheckBox to report the indeterminate state, set the [`IsThreeState`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfCheckBox.html#Syncfusion_Android_Buttons_SfCheckBox_IsThreeState) property to `true`. -Check box can be used as a single or as a group. A single check box mostly used for a binary yes/no choice, such as "Remember me?", login scenario, or a terms of service agreement. +CheckBox can be used as a single control or as a group. A single CheckBox is mostly used for a binary yes/no choice, such as "Remember me?", login scenario, or a terms of service agreement. {% tabs %} {% highlight c# %} @@ -143,7 +144,7 @@ checkBox.Checked = true; ![Xamarin.Android CheckBox tri-state](Images/Agree.png) -Multiple check boxes can be used as a group for multi-select scenarios in which a user chooses one or more items from the group of choices that are not mutually exclusive. +Multiple CheckBoxes can be used as a group for multi-select scenarios in which a user chooses one or more items from the group of choices that are not mutually exclusive. {% tabs %} {% highlight c# %} @@ -166,11 +167,11 @@ onion.Checked = true; ## Indeterminate -The [`SfCheckBox`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfCheckBox.html) allows an indeterminate state in addition to the checked and unchecked state. The indeterminate state of the check box is enabled by setting the [`IsThreeState`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfCheckBox.html#Syncfusion_Android_Buttons_SfCheckBox_IsThreeState) property of the control to `True`. +The [`SfCheckBox`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfCheckBox.html) allows an indeterminate state in addition to the checked and unchecked states. The indeterminate state of the CheckBox is enabled by setting the [`IsThreeState`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfCheckBox.html#Syncfusion_Android_Buttons_SfCheckBox_IsThreeState) property of the control to `true`. -N>When the [`IsThreeState`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfCheckBox.html#Syncfusion_Android_Buttons_SfCheckBox_IsThreeState) property is set to `False` and [`Checked`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfCheckBox.html#Syncfusion_Android_Buttons_SfCheckBox_Checked) property is set to `null` then the check box will be in unchecked state. +N> When the [`IsThreeState`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfCheckBox.html#Syncfusion_Android_Buttons_SfCheckBox_IsThreeState) property is set to `false` and [`Checked`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfCheckBox.html#Syncfusion_Android_Buttons_SfCheckBox_Checked) property is set to `null`, then the CheckBox will be in unchecked state. -The indeterminate state is used when a group of sub-choices has both checked and unchecked states. In the following example, the "Select all" checkbox has the [`IsThreeState`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfCheckBox.html#Syncfusion_Android_Buttons_SfCheckBox_IsThreeState) property set to `true`. The "Select all" checkbox is checked if all child elements are checked, unchecked if all the child elements are unchecked, and indeterminate otherwise. +The indeterminate state is used when a group of sub-choices has both checked and unchecked states. In the following example, the "Select all" CheckBox has the [`IsThreeState`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfCheckBox.html#Syncfusion_Android_Buttons_SfCheckBox_IsThreeState) property set to `true`. The "Select all" CheckBox is checked if all child elements are checked, unchecked if all the child elements are unchecked, and indeterminate otherwise. {% tabs %} {% highlight c# %} @@ -222,6 +223,6 @@ private void CheckBox_StateChanged(object sender, StateChangedEventArgs e) {% endhighlight %} {% endtabs %} -![Xamarin.Android CheckBox intermediate state](Images/Inter1.jpg) ![](Images/Inter2.jpg) +![Xamarin.Android CheckBox intermediate state](Images/Inter1.jpg) ![Xamarin.Android CheckBox intermediate state](Images/Inter2.jpg) -This demo can be downloaded from this [link](https://github.com/SyncfusionExamples/GettingStarted-Sample-in--CheckBox-Android). +N> This demo can be downloaded from this [link](https://github.com/SyncfusionExamples/GettingStarted-Sample-in--CheckBox-Android). diff --git a/xamarin-android/SfCheckBox/Overview.md b/xamarin-android/SfCheckBox/Overview.md index 1775f90a..49ca4040 100644 --- a/xamarin-android/SfCheckBox/Overview.md +++ b/xamarin-android/SfCheckBox/Overview.md @@ -1,8 +1,8 @@ --- layout: post -title: Overview in SfCheckBox for Xamarin.Android platform -description: Learn how to customize the basic features of SfCheckBox -platform: Xamarin.Android +title: Overview of Syncfusion® SfCheckBox for Xamarin.Android Platform +description: Learn how to customize and configure the basic features of Syncfusion SfCheckBox control for enhanced user interface in Xamarin.Android applications. +platform: xamarin.android control: SfCheckBox documentation: ug keywords: button, SfCheckBox, CheckBox @@ -10,12 +10,12 @@ keywords: button, SfCheckBox, CheckBox --- # Overview -The check box is a selection control that allows users to select one or more options from a set. The three states of check box are checked, unchecked and indeterminate. +The CheckBox is a selection control that allows users to select one or more options from a set. The three states of CheckBox are checked, unchecked, and indeterminate. -## Key features +## Key Features * Supports three states. -* Allow users to select and clear the control by tapping. -* Supports check box color, shape and label text customization. +* Allows users to select and clear the control by tapping. +* Supports CheckBox color, shape, and label text customization. -![](Images/CheckBox_Overview.png) \ No newline at end of file +![Xamarin.Android CheckBox Overview](Images/CheckBox_Overview.png) diff --git a/xamarin-android/SfCheckBox/Visual-Customization.md b/xamarin-android/SfCheckBox/Visual-Customization.md index 5c1edee6..dfd4e318 100644 --- a/xamarin-android/SfCheckBox/Visual-Customization.md +++ b/xamarin-android/SfCheckBox/Visual-Customization.md @@ -1,8 +1,8 @@ --- layout: post -title: Visual customization | SfCheckBox | Syncfusion® | Xamarin.Android +title: Visual Customization | SfCheckBox | Syncfusion® | Xamarin.Android description: Learn how to customize the SfCheckBox CornerRadius, CheckedColor, UncheckedColor, BorderWidth, and Text. -platform: Xamarin.Android +platform: xamarin.android control: SfCheckBox documentation: ug keywords: button, SfCheckBox, CheckBox @@ -11,8 +11,8 @@ keywords: button, SfCheckBox, CheckBox # Visual Customization -## Customizing shape -The check box shape can be customized using the [`CornerRadius`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfCheckBox.html#Syncfusion_Android_Buttons_SfCheckBox_CornerRadius) property. This property specifies uniform radius value for every corner of the check box. +## Customizing Shape +The CheckBox shape can be customized using the [`CornerRadius`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfCheckBox.html#Syncfusion_Android_Buttons_SfCheckBox_CornerRadius) property. This property specifies a uniform radius value for every corner of the CheckBox. {% tabs %} {% highlight c# %} @@ -25,7 +25,8 @@ checkBox.CornerRadius = 5.0f; ![CheckBox CornerRadius](Images/Radius.png) -## Customizing state color +## Customizing State Color + The default state colors can be customized using the [`ButtonTintList`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfCheckBox.html) property. The checked/unchecked/indeterminate state color is updated with `ColorStateList` to the [`ButtonTintList`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfCheckBox.html). {% tabs %} {% highlight c# %} @@ -49,14 +50,14 @@ indeterminate.ButtonTintList = new ColorStateList(states, colors); {% endhighlight %} {% endtabs %} -![CheckedColor and UncheckedColor in Checkbox](Images/StateColor.png) +![CheckedColor and UncheckedColor in CheckBox](Images/StateColor.png) -## BorderWidth -The border thickness of the tick box in the checkbox can be customized with the [`BorderWidth`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfCheckBox.html#Syncfusion_Android_Buttons_SfCheckBox_BorderWidth) property. +## Border Width +The border thickness of the tick box in the CheckBox can be customized with the [`BorderWidth`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfCheckBox.html#Syncfusion_Android_Buttons_SfCheckBox_BorderWidth) property. {% tabs %} {% highlight c# %} -//unchecked state and its color +// Unchecked state and its color int[][] states = { new int[] { -Android.Resource.Attribute.StateChecked } }; int[] colors = { Color.Blue}; @@ -89,13 +90,14 @@ ButtonTintList = new Android.Content.Res.ColorStateList(states, colors) ![CheckBox BorderWidth](Images/BorderWidth.png) -## Setting caption text appearance +## Setting Caption Text Appearance + You can customize the display text appearance of the [`SfCheckBox`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfCheckBox.html) control using the following properties: * [`SetTextColor`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfCheckBox.html): Changes the color of the text. * [`TextAlignment`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfCheckBox.html): Changes the horizontal alignment of the caption text. -* [`Typeface`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfCheckBox.html): Changes the font family of the text and sets font attributes(bold/italic/none) of the caption text. -* [`TextSize`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfCheckBox.html): Sets font size of the caption text. +* [`Typeface`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfCheckBox.html): Changes the font family of the text and sets font attributes (bold/italic/none) of the caption text. +* [`TextSize`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfCheckBox.html): Sets the font size of the caption text. {% tabs %} {% highlight c# %} diff --git a/xamarin-android/SfRangeSlider/Getting-Started.md b/xamarin-android/SfRangeSlider/Getting-Started.md index 01ed1346..f0b4798d 100644 --- a/xamarin-android/SfRangeSlider/Getting-Started.md +++ b/xamarin-android/SfRangeSlider/Getting-Started.md @@ -1,29 +1,29 @@ --- layout: post -title: Getting Started with syncfusion® rangeslider control for Xamarin.Android -description: A quick tour to initial users on Syncfusion® rangeSlider control for Xamarin.Android platform -platform: Xamarin.Android +title: Getting Started with Syncfusion® RangeSlider for Xamarin.Android +description: A quick tour and step-by-step guide for initial users to get started with Syncfusion® RangeSlider control implementation in Xamarin.Android +platform: xamarin.android control: RangeSlider documentation: ug --- # Getting Started -This section explains you the steps to configure a SfRangeSlider control in a real-time scenario and also provides a walk-through on some of the customization features available in SfRangeSlider control. +This section explains the steps to configure a SfRangeSlider control in a real-world scenario and provides a walk-through of some customization features available in the SfRangeSlider 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, +After installing Essential Studio® for Xamarin, you can find all the required assemblies in the installation folders: {Syncfusion Installed location}\Essential Studio\12.4.0.24\lib -Add the following assembly references to the Android project, +Add the following assembly reference to the Android project: android\Syncfusion.SfRangeSlider.Android.dll -## Add SfRangeSlider +## Add SfRangeSlider Control -* Adding namespace for the added assemblies. +Add the namespace for the assemblies: {% tabs %} @@ -52,7 +52,7 @@ android\Syncfusion.SfRangeSlider.Android.dll ## Restricting Values -SfRangeSlider provides option to restrict slider range between minimum and maximum values. Following code explains how to set the range using `Minimum` and `Maximum` properties in the SfRangeSlider. +The SfRangeSlider provides options to restrict the slider range between minimum and maximum values. The following code demonstrates how to set the range using the `Minimum` and `Maximum` properties: {% tabs %} @@ -68,9 +68,9 @@ SfRangeSlider provides option to restrict slider range between minimum and maxim ## Set Range -SfRangeSlider provides option to set single thumb and double thumb. While setting the double thumb, each thumb value can be set using `RangeStart` and `RangeEnd` properties. +The SfRangeSlider supports both single thumb and double thumb modes. When using double thumb mode, each thumb value can be set using the `RangeStart` and `RangeEnd` properties. -N> The `ShowRange` property is used to switch between a single thumb and double thumb. The `Orientation` property sets the type of orientation. +N> The `ShowRange` property is used to switch between single thumb and double thumb modes. The `Orientation` property sets the orientation type. {% tabs %} @@ -91,7 +91,7 @@ N> The `ShowRange` property is used to switch between a single thumb and double ## Ticks and Labels Customization -The ticks can be set by setting the `TickFrequency` and `TickPlacement`. Likewise, value labels can be set by setting the `ShowValueLabel` property to true. The position of label can be varied by the `LabelPlacement` property. +Ticks can be configured by setting the `TickFrequency` and `TickPlacement` properties. Value labels can be displayed by setting the `ShowValueLabel` property to `true`. The position of labels can be customized using the `LabelPlacement` property. {% tabs %} @@ -110,7 +110,8 @@ N> The TickFrequency determines the interval between the ticks. ## Adding Snapping Mode -The movement of the thumb can be varied in different ways. This is achieved by setting the SnapsTo property. +The movement of the thumb can be controlled in different ways by setting the `SnapsTo` property. This allows the thumb to snap to specific positions for more precise value selection. + {% tabs %} @@ -123,4 +124,4 @@ rangeSlider.StepFrequency=6; {% endtabs %} -![](images/RangeSlider.png) \ No newline at end of file +![Image of RangeSlider](images/RangeSlider.png) diff --git a/xamarin-android/SfRangeSlider/How-To.md b/xamarin-android/SfRangeSlider/How-To.md index fc98dcb2..9a0c6efd 100644 --- a/xamarin-android/SfRangeSlider/How-To.md +++ b/xamarin-android/SfRangeSlider/How-To.md @@ -1,12 +1,12 @@ --- layout: post -title: Events in Syncfusion® RangeSlider control for Xamarin.Android -description: Learn how to populate events in RangeSlider control -platform: Xamarin.Android +title: Events in Syncfusion® RangeSlider Control for Xamarin.Android +description: Learn how to handle events in RangeSlider control for responsive user interactions and implement custom behaviors in Xamarin.Android applications. +platform: xamarin.android control: RangeSlider documentation: ug --- - +# Working with RangeSlider Events ## How to get notifications when a thumb drag is started and completed? The `DragStarted` event is raised when a thumb is dragged. After the thumb releases the pointer capture, the `DragCompleted` event is raised. The `IsStartThumb` property of the `DragThumbEventArgs` returns a boolean value, which indicates the thumb used for performing drag operations. @@ -37,12 +37,14 @@ The `DragStarted` event is raised when a thumb is dragged. After the thumb relea {% endhighlight %} -## How to trigger ValueChanged event? +## Value Change Events -The `ValueChanged` event is triggered when `SfRangeSlider` value is changed. The argument contains the value of RangeSlider. +### How to Handle ValueChanged Event -`Value` - Used to gets or sets the value for range slider. +The `ValueChanged` event is triggered when the SfRangeSlider value changes in single thumb mode. This event is useful for responding to value changes in real-time. +**Event Arguments:** +- `Value` - Gets the current value of the range slider {% highlight c# %} private void RangeSlider_ValueChanged(object sender, ValueChangedEventArgs e) @@ -52,13 +54,13 @@ The `ValueChanged` event is triggered when `SfRangeSlider` value is changed. The {% endhighlight %} -## How to trigger RangeChanged event? - -The `RangeChanged` event is triggered when either RangeStart or RangeEnd values are changed. The argument contains the following information. +### How to Handle RangeChanged Event -`RangeStart` – Gets or sets the range start value of range slider. -`RangeEnd` – Gets or sets the range end value of range slider. +The `RangeChanged` event is triggered when either `RangeStart` or `RangeEnd` values change in double thumb mode. This event provides both range values simultaneously. +**Event Arguments:** +- `RangeStart` - Gets the range start value of the range slider +- `RangeEnd` - Gets the range end value of the range slider {% highlight c# %} private void RangeSlider_RangeChanged(object sender, RangeChangedEventArgs e) diff --git a/xamarin-android/SfRangeSlider/Labels-Customization.md b/xamarin-android/SfRangeSlider/Labels-Customization.md index c7d2452c..5d51528b 100644 --- a/xamarin-android/SfRangeSlider/Labels-Customization.md +++ b/xamarin-android/SfRangeSlider/Labels-Customization.md @@ -1,13 +1,13 @@ --- layout: post -title: Label Support for Syncfusion® RangeSlider control for Xamarin.Android -description: Learn how to set label and their positions in RangeSlider control -platform: Xamarin.Android +title: Label Support for Syncfusion® RangeSlider Control for Xamarin.Android +description: Learn how to set labels and customize their positions, styling, and formatting in RangeSlider control for enhanced user interface design. +platform: xamarin.android control: RangeSlider documentation: ug --- -# Customizing labels +# Customizing Labels ## ShowValueLabel diff --git a/xamarin-android/SfRangeSlider/Orientation.md b/xamarin-android/SfRangeSlider/Orientation.md index 60ae8536..3e8f0849 100644 --- a/xamarin-android/SfRangeSlider/Orientation.md +++ b/xamarin-android/SfRangeSlider/Orientation.md @@ -1,15 +1,16 @@ --- layout: post -title: Various features of Syncfusion® RangeSlider control for Xamarin.Android -description: Learn how to set minimum value, maximum value, tick frequency, step frequency, enabling snaps to support and orientation for RangeSlider -platform: Xamarin.Android +title: Orientation in Syncfusion® RangeSlider Control for Xamarin.Android +description: Learn how to set horizontal and vertical orientation for RangeSlider control to suit different layout requirements +platform: xamarin.android control: RangeSlider documentation: ug --- # Orientation -SfRangeSlider provides option to display the values and the slider either horizontally or vertically. +The SfRangeSlider provides an option to display the slider and its values either horizontally or vertically, allowing you to adapt the control to different layout requirements and user interface designs. +N> The default orientation is `Horizontal`. N> The default option is Horizontal. @@ -25,7 +26,7 @@ rangeSlider.Orientation=Orientation.Horizontal {% endtabs %} -![](images/RangeSlider-Horizontal.png) +![Horizontal RangeSlider in Xamarin.Android](images/RangeSlider-Horizontal.png) ## Vertical @@ -39,6 +40,7 @@ rangeSlider.Orientation=Orientation.Vertical {% endtabs %} -![](images/RangeSlider-Vertical.png) +![Vertical RangeSlider in Xamarin.Android](images/RangeSlider-Vertical.png) + diff --git a/xamarin-android/SfRangeSlider/Range.md b/xamarin-android/SfRangeSlider/Range.md index 4301288e..a2c43610 100644 --- a/xamarin-android/SfRangeSlider/Range.md +++ b/xamarin-android/SfRangeSlider/Range.md @@ -1,21 +1,21 @@ --- layout: post -title: Range in Syncfusion® RangeSlider control for Xamarin.Android -description: Learn how to set Dual thumb slider and its ranges in RangeSlider control. -platform: Xamarin.Android +title: Range in Syncfusion® RangeSlider Control for Xamarin.Android +description: Learn how to set dual thumb slider and configure ranges in RangeSlider control for selecting minimum and maximum values in Xamarin.Android apps. +platform: xamarin.android control: RangeSlider documentation: ug --- # Range -The SfRangeSlider control supports to select range of value by using two Thumbs. +The SfRangeSlider control supports selecting a range of values by using two thumbs, providing flexibility for scenarios where you need to define both minimum and maximum boundaries within a dataset. -## Set Show Range +## Enable Range Mode -The `ShowRange` property should be set to true for displaying two thumbs in track with range of values. +The `ShowRange` property controls whether the slider operates in single-thumb or dual-thumb mode. Set this property to `true` to display two thumbs on the track for range selection. -N> When this property is set to false, single thumb is displayed without any range +N> When this property is set to `false`, a single thumb is displayed for selecting individual values without range functionality. {% tabs %} @@ -27,10 +27,9 @@ N> When this property is set to false, single thumb is displayed without any ran {% endtabs %} -## Set Range values - -Ranges can be customized using RangeStart and RangeEnd properties in SfRangeSlider. +## Configure Range Values +Range values can be customized using the `RangeStart` and `RangeEnd` properties to define the initial selected range when the control loads. ### RangeStart Gets and sets the start value of the range. diff --git a/xamarin-android/SfRangeSlider/Selection-Value-Configuration.md b/xamarin-android/SfRangeSlider/Selection-Value-Configuration.md index 3d4b2d5d..6b7a2a64 100644 --- a/xamarin-android/SfRangeSlider/Selection-Value-Configuration.md +++ b/xamarin-android/SfRangeSlider/Selection-Value-Configuration.md @@ -1,16 +1,15 @@ --- layout: post -title: Various features of Syncfusion® RangeSlider control for Xamarin.Android -description: Learn how to set minimum value, maximum value, tick frequency, step frequency, enabling snaps to support and orientation for RangeSlider -platform: Xamarin.Android +title: Selection Value Configuration in Syncfusion® RangeSlider for Android +description: Learn how to configure minimum value, maximum value, tick frequency, step frequency, and snapping behavior for RangeSlider +platform: xamarin.android control: RangeSlider documentation: ug --- # Selection Value Configuration -Various customization options are available to configure the selection value in SfRangeSlider. - +The SfRangeSlider provides various customization options to configure selection values, boundaries, and snapping behavior to create precise and user-friendly range selection interfaces. ## Set Minimum Value Gets or sets the minimum possible value of the range. The thumb could not move beyond that value. @@ -39,7 +38,7 @@ Gets or sets the maximum possible value of the range. The thumb could not move a {% endtabs %} -## Set Tick Frequency +## Configure Tick Frequency The `TickFrequency` property is used to decide the number of ticks to be displayed along the track based on Minimum and Maximum values. @@ -55,9 +54,9 @@ The `TickFrequency` property is used to decide the number of ticks to be display N> When the `SnapsTo` property is set to `Ticks`, the `TickFrequency` is used to specify the interval between snap points. -## Set Interval between Snap Points. +## Set Step Frequency -The `StepFrequency` property is used to specify the interval between snap points. +The `StepFrequency` property specifies the interval between step values, providing fine-grained control over value increments when snapping is enabled. {% tabs %} diff --git a/xamarin-android/SfRangeSlider/Ticks-Customization.md b/xamarin-android/SfRangeSlider/Ticks-Customization.md index 7b027e1e..64dbf065 100644 --- a/xamarin-android/SfRangeSlider/Ticks-Customization.md +++ b/xamarin-android/SfRangeSlider/Ticks-Customization.md @@ -1,36 +1,33 @@ --- layout: post -title: Ticks of Syncfusion® RangeSlider control for Xamarin.Android -description: Learn how to set ticks in proper position for RangeSlider control in Xamarin.Android -platform: Xamarin.Android +title: Ticks Customization in Syncfusion® RangeSlider for Xamarin.Android +description: Learn how to customize tick marks, their position, color, and length in RangeSlider control for Xamarin.Android +platform: xamarin.android control: RangeSlider documentation: ug --- -# Customizing ticks +# Customizing Ticks -Tick marks can be placed along the track in a uniform manner or it's position can also be customized. +Tick marks provide visual reference points along the slider track to help users make precise selections. The SfRangeSlider allows you to customize tick placement, appearance, and behavior to match your application's design requirements. +Tick marks can be placed along the track in a uniform manner, or their position can be customized based on your specific layout needs and user experience goals. -## TickPlacement +## Tick Placement -The `TickPlacement` property determines where to draw tick marks in relation to the track. Available options for this property are, +The `TickPlacement` property determines where to draw tick marks in relation to the track. This property provides flexibility in positioning ticks to optimize visual clarity and space utilization. -* BottomRight +**Available Options:** +- `BottomRight` - Places ticks below (horizontal) or right (vertical) of the track +- `TopLeft` - Places ticks above (horizontal) or left (vertical) of the track +- `Inline` - Places ticks along the track itself +- `Outside` - Places ticks on both sides of the track +- `None` - Hides all tick marks -* Inline +N> The default option is `Inline`. -* None - -* Outside - -* TopLeft - -N> The default option is Inline. - -### BottomRight - -Tick marks are placed either below the track in horizontal orientation or right of the track in vertical orientation. +### BottomRight Placement +Tick marks are placed either below the track in horizontal orientation or to the right of the track in vertical orientation. This placement is ideal when you want to keep the top or left area clear for labels or other UI elements. {% highlight c# %} rangeSlider.TickPlacement=TickPlacement.BottomRight; @@ -41,7 +38,7 @@ Tick marks are placed either below the track in horizontal orientation or right ### TopLeft -Tick marks are placed either above the track in horizontal orientation or left of the track in vertical orientation. +Tick marks are placed either above the track in horizontal orientation or to the left of the track in vertical orientation. This placement works well for traditional slider designs and when bottom space is limited. {% highlight c# %} @@ -53,7 +50,7 @@ Tick marks are placed either above the track in horizontal orientation or left o ### Inline -Tick marks are placed along the track. +Tick marks are placed directly along the track, providing a clean, integrated appearance. This is the default placement and works well for most scenarios. {% highlight c# %} @@ -65,7 +62,7 @@ Tick marks are placed along the track. ### Outside -Tick marks are placed on both sides of the track either in horizontal or vertical orientation. +Tick marks are placed on both sides of the track, providing maximum visual prominence and reference points from multiple angles. {% highlight c# %} @@ -73,7 +70,7 @@ Tick marks are placed on both sides of the track either in horizontal or vertica {% endhighlight %} -![Tick marks Outline Xamarin.Android](images/Outside.png) +![Tick marks Outside Xamarin.Android](images/Outside.png) ## Customizing tick color @@ -115,3 +112,4 @@ The `TickLength` property used to customize the length of the ticks. rangeSlider.TickLength = 20; {% endhighlight %} + diff --git a/xamarin-android/SfRangeSlider/ToolTip-Support.md b/xamarin-android/SfRangeSlider/ToolTip-Support.md index 82f455ee..a6518d16 100644 --- a/xamarin-android/SfRangeSlider/ToolTip-Support.md +++ b/xamarin-android/SfRangeSlider/ToolTip-Support.md @@ -1,19 +1,18 @@ --- layout: post -title: ToolTip support for Syncfusion® RangeSlider control for Xamarin.Android -description: Learn how to set tooltip for RangeSlider in Xamarin.Android -platform: Xamarin.Android +title: Tooltip Support for Syncfusion® RangeSlider for Xamarin.Android +description: Learn how to configure and customize tooltips for RangeSlider in Xamarin.Android applications to display current values and enhance user experience. +platform: xamarin.android control: RangeSlider documentation: ug --- -# ToolTip Support +# Tooltip Support -The Tooltip shows the current value based on thumb position. +The tooltip displays the current value based on the thumb position, providing immediate visual feedback to users during slider interaction. This feature enhances user experience by showing precise values without requiring additional UI elements. +## Set Tooltip Precision -## Set ToolTip Precision - -The `ToolTipPrecision` property is used to define the precision of the value displayed in the Tooltip. +The `ToolTipPrecision` property defines the number of decimal places displayed in the tooltip value. This is particularly useful when working with precise decimal values or when you need to control the level of detail shown to users. {% tabs %} diff --git a/xamarin-android/SfRangeSlider/TrackBar-Customization.md b/xamarin-android/SfRangeSlider/TrackBar-Customization.md index 1cff9c8b..88579f76 100644 --- a/xamarin-android/SfRangeSlider/TrackBar-Customization.md +++ b/xamarin-android/SfRangeSlider/TrackBar-Customization.md @@ -1,17 +1,17 @@ --- layout: post -title: TracBar in Syncfusion® RangeSlider control for Xamarin.Android -description: Learn how to customize the track bar of RangeSlider control in Xamarin.Android -platform: Xamarin.Android +title: TrackBar Customization in Syncfusion® RangeSlider for Xamarin.Android +description: Learn how to customize the track bar appearance, colors, and styling of RangeSlider control in Xamarin.Android +platform: xamarin.android control: RangeSlider documentation: ug --- -# TrackBar customization +# TrackBar Customization ## TrackStroke -The stroke of track bar can be customized by setting the `TrackStroke` property of SfRangeSlider. +The `TrackStroke` property controls the width of the entire track bar, affecting the visual prominence and touch target size of the slider. {% tabs %} @@ -25,8 +25,7 @@ The stroke of track bar can be customized by setting the `TrackStroke` property ## TrackSelectionStroke -The stroke for the selected range or selected portion of track bar can be customized by setting the `TrackSelectionStroke` property of SfRangeSlider. - + The `TrackSelectionStroke` property customizes the stroke width for the selected range or selected portion of the track bar, providing visual distinction between selected and unselected areas. {% tabs %} {% highlight c# %} @@ -39,7 +38,7 @@ The stroke for the selected range or selected portion of track bar can be custom ## TrackColor -The color of track bar can be customized by setting the `TrackColor` property of SfRangeSlider. +The `TrackColor` property customizes the color of the entire track bar background, establishing the base visual appearance of the slider. {% tabs %} @@ -53,7 +52,7 @@ The color of track bar can be customized by setting the `TrackColor` property of ## TrackSelectionColor -The color for the selected range or selected portion of track bar can be customized by setting the `TrackSelectionColor` property of SfRangeSlider. +The `TrackSelectionColor` property customizes the color for the selected range or selected portion of the track bar, providing clear visual feedback about the current selection. {% tabs %} @@ -67,8 +66,7 @@ The color for the selected range or selected portion of track bar can be customi ## KnobColor -The `KnobColor` property is used to change the knob color of SfRangeSlider. - +The `KnobColor` property changes the color of the thumb (knob) that users interact with to adjust values. {% tabs %} {% highlight c# %} @@ -81,7 +79,7 @@ The `KnobColor` property is used to change the knob color of SfRangeSlider. ## ThumbSize -The `ThumbSize` property is used to change the thumb size of SfRangeSlider. +The `ThumbSize` property controls the size of the thumb, affecting both visual appearance and touch interaction area. {% tabs %} diff --git a/xamarin-android/SfRangeSlider/overview.md b/xamarin-android/SfRangeSlider/overview.md index 8bf9e87a..eb9c3daa 100644 --- a/xamarin-android/SfRangeSlider/overview.md +++ b/xamarin-android/SfRangeSlider/overview.md @@ -1,17 +1,17 @@ --- layout: post -title: Overview of Syncfusion® RangeSlider control for Xamarin.Android -description: Overview and key features of RangeSlider control in Xamarin.Android -platform: Xamarin.Android +title: Overview of Syncfusion® RangeSlider Control for Xamarin.Android +description: Overview and key features of RangeSlider control in Xamarin.Android including dual thumb support, range selection, and customization options. +platform: xamarin.android control: RangeSlider documentation: ug --- # Overview -The range slider control for Xamarin.Android allows you select a range of values within the specified minimum and maximum limits. The range can be selected by moving the thumb along track. +The RangeSlider control for Xamarin.Android allows you to select a range of values within specified minimum and maximum limits. The range can be selected by moving one or both thumbs along the track, providing an intuitive interface for range-based input scenarios such as price filtering, date ranges, or value boundaries. -![](images/Overview.png) +![RangeSlider Control Overview](images/Overview.png) ## Key features @@ -21,4 +21,4 @@ The range slider control for Xamarin.Android allows you select a range of values   * Supports to change the tick intervals in uniform pattern.   -* Provides user-friendly customization support to customize ticks and labels. \ No newline at end of file +* Provides user-friendly customization support to customize ticks and labels. diff --git a/xamarin-android/SfRating/Add-Custom-Items.md b/xamarin-android/SfRating/Add-Custom-Items.md index 3386f62b..27a4baeb 100644 --- a/xamarin-android/SfRating/Add-Custom-Items.md +++ b/xamarin-android/SfRating/Add-Custom-Items.md @@ -1,20 +1,18 @@ --- layout: post -title: Adding Custom items in Syncfusion® Rating control for Xamarin.Android -description: Learn how to add the Custom Items in rating control -platform: Xamarin.Android +title: Adding Custom Items in Syncfusion® Rating Control for Xamarin.Android +description: Learn how to add custom items and views to the Syncfusion Rating control for enhanced user experience +platform: xamarin.android control: Rating documentation: ug --- # Custom Views -SfRating Items control provides support to add custom views. - -## Add SfRating Items - -Add the SfRating Items control with a required optimal name by using the included namespace. +The SfRating control provides support for adding custom views to create personalized rating experiences with custom graphics and layouts. +## Add SfRating Control +Initialize the SfRating control and SfRatingItem with an appropriate namespace reference. {% highlight C# %} SfRating rating; @@ -31,7 +29,7 @@ protected override void OnCreate(Bundle savedInstanceState) ## Set Selected View -The `SelectedView` property is used to apply the given SelectedView to selected rating item. +The `SelectedView` property applies a custom view to the selected rating item state. {% highlight C# %} @@ -41,9 +39,9 @@ The `SelectedView` property is used to apply the given SelectedView to selected {% endhighlight %} -## Set UnSelected View +## Set Unselected View -The `UnSelectedView` property is used to apply the given UnSelectedView to unselected rating item. +The `UnSelectedView` property applies a custom view to the unselected rating item state. {% highlight C# %} @@ -53,12 +51,11 @@ The `UnSelectedView` property is used to apply the given UnSelectedView to unsel {% endhighlight %} -## Add Items - -The `Items` property is used to hold the collection of SfRatingItem. +## Add Items to Collection -N> SfRatingItem keeps both selected and unselected view respectively. +The `Items` property holds the collection of SfRatingItem objects that define the rating scale. +N> Each SfRatingItem maintains both selected and unselected view states. {% highlight C# %} List ratingItemList = new List(); @@ -69,7 +66,7 @@ N> SfRatingItem keeps both selected and unselected view respectively. ## Enable Custom Items -When `EnableCustomItems` property is enabled, it will display the custom items added in the rating items. +When the `EnableCustomView` property is set to true, the control displays the custom items configured in the rating collection. {% highlight C# %} diff --git a/xamarin-android/SfRating/Appearance-Customization.md b/xamarin-android/SfRating/Appearance-Customization.md index b8d38268..0518b9d1 100644 --- a/xamarin-android/SfRating/Appearance-Customization.md +++ b/xamarin-android/SfRating/Appearance-Customization.md @@ -1,14 +1,13 @@ --- layout: post -title: Customization in Syncfusion® Rating control for Xamarin.Android -description: Learn how to change the appearance and styling of rating control using ItemSize, ItemSpacing, ItemCount and customization properties. -platform: Xamarin.Android +title: Appearance Customization in Syncfusion® Rating for Xamarin.Android +description: Learn how to customize the appearance and styling of the Rating control using fill colors, stroke colors, and stroke width properties through SfRatingSettings. +platform: xamarin.android control: Rating documentation: ug --- -# Customizing appearance - +# Appearance Customization You can customize the color, stroke width, and stroke color of rated and unrated items using the following properties of `SfRatingSettings`: * `RatedFill` @@ -18,9 +17,9 @@ You can customize the color, stroke width, and stroke color of rated and unrated * `RatedStrokeWidth` * `UnRatedStrokeWidth` -## Rating settings +## Rating Settings -For customizing styles, set the value of `RatingSettings` property with `SfRatingsSettings` object instance. +For customizing styles, set the `RatingSettings` property with an `SfRatingSettings` object instance. {% tabs %} @@ -40,13 +39,13 @@ protected override void OnCreate(Bundle savedInstanceState) {% endtabs %} -## Set fill color +## Set Fill Color -The SfRating control supports to set the fill color for the selected and unselected items. +The SfRating control supports setting fill colors for rated and unrated items. -### Selected items +### Rated Items -The `RatedFill` property fills the rated area with the specified solid color in the SfRating control. +The `RatedFill` property fills the rated area with the specified solid color. {% tabs %} @@ -60,9 +59,9 @@ The `RatedFill` property fills the rated area with the specified solid color in ![Rated Items](images/ratedFill.jpg) -### Unselected items +### Unrated Items -The `UnRatedFill` property fills the unrated area with the specified solid color in the SfRating control. +The `UnRatedFill` property fills the unrated area with the specified solid color. {% tabs %} @@ -76,13 +75,13 @@ The `UnRatedFill` property fills the unrated area with the specified solid color ![Unrated Items](images/unRatedFill.jpg) -## Set stroke color +## Set Stroke Color -The SfRating control supports to set the stroke color for the selected and unselected items. +The SfRating control supports setting stroke colors for rated and unrated items. -### Selected items +### Rated Items -The RatedStroke property sets the stroke for the rated area with the specified solid color for the selected items in the SfRating control. +The `RatedStroke` property sets the stroke color for rated items. {% tabs %} @@ -96,9 +95,9 @@ The RatedStroke property sets the stroke for the rated area with the specified s ![Rated Item Stroke Color](images/ratedStroke.png) -### Unselected items +### Unrated Items -The `UnRatedStroke` property sets the stroke for the unrated area with the specified solid color in the SfRating control. +The `UnRatedStroke` property sets the stroke color for unrated items. {% tabs %} @@ -112,13 +111,13 @@ The `UnRatedStroke` property sets the stroke for the unrated area with the speci ![Unrated Item Stroke Color](images/unRatedStroke.jpg) -## Set stroke width +## Set Stroke Width -The SfRating control supports to set the stroke width for the selected and unselected items. +The SfRating control supports setting stroke width for rated and unrated items. -### Selected items +### Rated Items -The `RatedStrokeWidth` property sets the stroke width for the rated area with the specified value in the SfRating control. +The `RatedStrokeWidth` property sets the stroke width for rated items. {% tabs %} @@ -132,9 +131,9 @@ The `RatedStrokeWidth` property sets the stroke width for the rated area with th ![Rated Item Stroke Width](images/ratedStrokeWidth.jpg) -### Unselected items +### Unrated Items -The `UnRatedStrokeWidth` property sets the stroke width for the unrated area with the specified value in the SfRating control. +The `UnRatedStrokeWidth` property sets the stroke width for unrated items. {% tabs %} diff --git a/xamarin-android/SfRating/Appearance-and-Styling.md b/xamarin-android/SfRating/Appearance-and-Styling.md index fb30f925..5430180f 100644 --- a/xamarin-android/SfRating/Appearance-and-Styling.md +++ b/xamarin-android/SfRating/Appearance-and-Styling.md @@ -1,19 +1,19 @@ --- layout: post -title: Appearance-Styling in Syncfusion® Rating control for Xamarin.Android -description: Learn how to change the appearance and styling of rating control using ItemSize, ItemSpacing, ItemCount and customization properties. -platform: Xamarin.Android +title: Appearance and Styling in Syncfusion® Rating for Xamarin.Android +description: Learn how to customize the appearance and styling of the Rating control using ItemSize, ItemSpacing, ItemCount, and RatingSettings properties. +platform: xamarin.android control: Rating documentation: ug --- # Appearance and Styling -When the default view is not needed, you can customize the view of Xamarin.Forms SfRating control. The SfRating control provides support to customize the size, item count, and space between rating items. +When the default appearance doesn't meet your requirements, you can customize the view of the Xamarin.Android SfRating control. The SfRating control provides support for customizing the size, item count, and spacing between rating items. -## Set size +## Set Item Size -The `ItemSize` property sets the size for the rating items. +The `ItemSize` property sets the size for individual rating items. N> The default value of this property is 50. @@ -29,9 +29,9 @@ N> The default value of this property is 50. ![ Rating Item Size](images/layoutSize.jpg) -## Set space between items +## Set Space Between Items -The `ItemSpacing` property sets spacing between the rating items. +The `ItemSpacing` property sets the spacing between rating items. N> The default value of this property is 5. @@ -47,7 +47,7 @@ N> The default value of this property is 5. ![Space between Rating Items](images/layoutSpace.jpg) -## Set number of items +## Set Number of Items The `ItemCount` property sets the number of rating items to be displayed. @@ -67,7 +67,7 @@ N> The default value of this property is 5. ## Rating Settings -For styling customization, Set the `RatingSettings` property value with `SfRatingSettings` object instance. +For advanced styling customization, configure the `RatingSettings` property with an `SfRatingSettings` object instance. {% tabs %} @@ -90,4 +90,4 @@ rating.RatingSettings = ratingSettings; {% endhighlight %} -{% endtabs %} \ No newline at end of file +{% endtabs %} diff --git a/xamarin-android/SfRating/Getting-Started.md b/xamarin-android/SfRating/Getting-Started.md index 1415b69c..d1fa97f2 100644 --- a/xamarin-android/SfRating/Getting-Started.md +++ b/xamarin-android/SfRating/Getting-Started.md @@ -1,31 +1,31 @@ --- layout: post -title: Getting Started with Xamarin.Android Rating control | Syncfusion® +title: Getting Started with Xamarin.Android Rating Control | Syncfusion® description: Learn here about getting started with Syncfusion® Essential® Xamarin.Android Rating control, and more. -platform: Xamarin.Android +platform: xamarin.android control: Rating documentation: ug --- -# Getting Started with Xamarin.Android Rating control +# Getting Started with Xamarin.Android Rating Control -This section explains how to configure the SfRating control in a real-time scenario and also provides a walk-through on some of the customization features available in the SfRating control. +This section explains how to configure the SfRating control in a real-world scenario and provides a walk-through of some customization features available in the SfRating control. -## Referencing Essential Studio® components in your solution +## Referencing Essential Studio® Components in Your Solution -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\12.4.0.24\lib -N> Assemblies are available in an unzipped package location in Mac. +N> Assemblies are available in an unzipped package location on Mac. Add the following assembly reference to the Android project: [android\Syncfusion.SfRating.Andriod.dll] -## Add and configure the SfRating control +## Add and Configure the SfRating Control * The following namespace needs to be added. @@ -39,7 +39,7 @@ using Com.Syncfusion.Rating; {% endtabs %} -* Create an instance for SfRating control, and add it to application. +Create an instance of the SfRating control and add it to your application: {% tabs %} @@ -57,9 +57,9 @@ protected override void OnCreate(Bundle savedInstanceState) {% endtabs %} -## Set number of rating items +## Set Number of Rating Items -The number of rating items to be displayed can be customized in the SfRating control. Users can create a rating application with 5 items as follows. +The number of rating items to be displayed can be customized in the SfRating control. You can create a rating application with 5 items as follows: N> The default value of this property is 5. @@ -73,9 +73,9 @@ rating.ItemCount = 5; {% endtabs %} -## SetValue +## Set Value -The display value can be set in the SfRating control, which is selected among the items. The following code sample demonstrates how to set the display value of 3 with 5 ratings items. +The display value can be set in the SfRating control, which represents the selected rating among the items. The following code sample demonstrates how to set a display value of 3 with 5 rating items: N> The default value of this property is 0. @@ -89,7 +89,7 @@ rating.Value=3; {% endtabs %} -## Precision +## Set Precision To enable full, half, and exact values of rating, set the `Precision` property. diff --git a/xamarin-android/SfRating/Overview.md b/xamarin-android/SfRating/Overview.md index ecf01ced..440b1508 100644 --- a/xamarin-android/SfRating/Overview.md +++ b/xamarin-android/SfRating/Overview.md @@ -1,7 +1,7 @@ --- layout: post -title: Overview of Syncfusion® Rating control for Xamarin.Android -description: This explains about the Overview and key features of Syncfusion® Essential® Xamarin.Android Rating Control +title: Overview of Syncfusion® Rating Control for Xamarin.Android +description: Learn about the overview and key features of Syncfusion® Essential® Xamarin.Android Rating Control for mobile applications. platform: xamarin.android control: Rating documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Overview -The Essential® Xamarin.Android Rating control has a group of stars to indicate the rating with flexible precision. Also provides various customization support on item size, item spacing and the number of displayed items. +The Essential® Xamarin.Android Rating control provides an intuitive way to display and collect user ratings using a customizable star-based interface. The control offers flexible precision options and extensive customization capabilities, including item size, spacing, and the number of displayed rating items. ![Xamarin.Android Rating Overview](images/overview.png) diff --git a/xamarin-android/SfRating/Precision-Mode.md b/xamarin-android/SfRating/Precision-Mode.md index 0dc64ca2..f04059bd 100644 --- a/xamarin-android/SfRating/Precision-Mode.md +++ b/xamarin-android/SfRating/Precision-Mode.md @@ -1,13 +1,13 @@ --- layout: post -title: Precision Mode in Xamarin.Android Rating control | Syncfusion® -description: Learn how to change the precision mode of Syncfusion® Essential® Xamarin.Android Rating control, and more. -platform: Xamarin.Android +title: Precision Mode in Xamarin.Android Rating Control | Syncfusion® +description: Learn how to configure the precision mode of Syncfusion® Essential® Xamarin.Android Rating control for different rating accuracy levels. +platform: xamarin.android control: Rating documentation: ug --- -# Precision Mode in Xamarin.Android Rating control +# Precision Mode in Xamarin.Android Rating Control The precision mode defines the accuracy level of the SfRating control. It has Standard, Half and Exact options. @@ -61,3 +61,4 @@ The rating item will be filled exactly based on the rating value. + diff --git a/xamarin-android/SfRating/Restrict-User-Selection.md b/xamarin-android/SfRating/Restrict-User-Selection.md index 7b7ef56f..f11db751 100644 --- a/xamarin-android/SfRating/Restrict-User-Selection.md +++ b/xamarin-android/SfRating/Restrict-User-Selection.md @@ -1,15 +1,15 @@ --- layout: post -title: Appearance and Styling in Syncfusion® Rating control for Xamarin.Android -description: Learn how to change the appearance and styling of rating control using ItemSize, ItemSpacing, ItemCount and customization properties. -platform: Xamarin.Android +title: Restrict User Selection in Syncfusion® Rating for Xamarin.Android +description: Learn how to restrict user interaction and make the Rating control read-only using the ReadOnly property. +platform: xamarin.android control: Rating documentation: ug --- # Restrict User Selection -SfRating control provides support for changeable or unchangeable values for Rating control. This is achieved by the `ReadOnly` property. When this property is set to True, the Rating value becomes unchangeable. +The SfRating control provides the ability to control user interaction through the `ReadOnly` property. When enabled, this property prevents users from modifying the rating value, making the control display-only while maintaining its visual appearance. N> By default, property value is set to False. @@ -23,5 +23,5 @@ N> By default, property value is set to False. {% endtabs %} -![](images/readOnly.jpg) +![Read-Only Rating Control](images/readOnly.jpg) diff --git a/xamarin-android/SfRating/ToolTip.md b/xamarin-android/SfRating/ToolTip.md index 09d91f0e..b1141a01 100644 --- a/xamarin-android/SfRating/ToolTip.md +++ b/xamarin-android/SfRating/ToolTip.md @@ -1,31 +1,30 @@ --- layout: post -title: Tooltip in Syncfusion® Rating control for Xamarin.Android -description: Learn here all about ToolTip support in Syncfusion® Xamarin.Android Rating (SfRating) control, its elements and more. -platform: Xamarin.Android +title: Tooltip in Syncfusion® Rating Control for Xamarin.Android +description: Learn here all about Tooltip support in Syncfusion® Xamarin.Android Rating (SfRating) control, its elements and more. +platform: xamarin.android control: Rating documentation: ug --- -# ToolTip in Rating (SfRating) +# Tooltip in Rating (SfRating) -Tooltip provides additional information about objects that are unfamiliar to users and are not directly displayed in UI. In the Xamarin.Forms SfRating control, tooltip shows the data of `Value`. It will be displayed when the mouse is hovered over the rating items and will be disappeared when a rating item is selected. +Tooltips provide additional information about objects that are unfamiliar to users and are not directly displayed in the UI. In the Xamarin.Android SfRating control, the tooltip displays the current `Value` of the rating. It appears when users interact with the rating items and disappears when a rating item is selected or when the interaction ends. -## Set tooltip placement +## Set Tooltip Placement -Using the `ToolTipPlacement` property, you can define where the tooltip needs to be displayed. The `TooTipPlacement` property have the following three types: +Using the `ToolTipPlacement` property, you can define where the tooltip should be displayed. The `ToolTipPlacement` property supports the following three options: -* BottomRight -* None -* TopLeft +* **BottomRight** - Displays tooltip at the bottom-right of the rating control +* **None** - Disables tooltip display +* **TopLeft** - Displays tooltip at the top-left of the rating control +N> By default, the value of the `ToolTipPlacement` property is set to `None`. -N> By default, value of the `ToolTipPlacement` property is set to None. +### TopLeft Placement -### TopLeft - -The tooltip will be displayed on top of the rating stars. +The tooltip will be displayed at the top-left position relative to the rating stars. {% tabs %} @@ -37,11 +36,11 @@ The tooltip will be displayed on top of the rating stars. {% endtabs %} -![Tooltip at top](images/leftTop.jpg) +![Tooltip at Top-Left Position](images/leftTop.jpg) -### BottomRight +### BottomRight Placement -The tooltip will be displayed on bottom of the rating stars. +The tooltip will be displayed at the bottom-right position relative to the rating stars. {% tabs %} @@ -69,12 +68,11 @@ The tooltip will be disappeared when setting ToolTipPlacement to None. {% endtabs %} -![No tooltip](images/null.jpg) - -## Set tooltip precision +![No Tooltip Display](images/null.jpg) -The `ToolTipPrecision` property sets the number precisions to be displayed after decimal point in tooltip. +## Set Tooltip Precision +The `ToolTipPrecision` property controls the number of decimal places displayed in the tooltip value. This is particularly useful when working with precise rating values. N> The default value of this property is 1. {% tabs %} diff --git a/xamarin-android/SfRating/View-Range-Selection.md b/xamarin-android/SfRating/View-Range-Selection.md index 53585afb..2def4338 100644 --- a/xamarin-android/SfRating/View-Range-Selection.md +++ b/xamarin-android/SfRating/View-Range-Selection.md @@ -1,9 +1,9 @@ --- layout: post -title: Range selection in Syncfusion® SfRating for Xamarin.Andorid -description: Perform range selection with custom views in rating control -platform: Xamarin.Android +title: Range Selection in Syncfusion® SfRating for Xamarin.Android +description: Learn how to perform range selection with custom views in the Rating control using EnableViewRangeSelection property. +platform: xamarin.android control: Rating documentation: ug @@ -11,7 +11,7 @@ documentation: ug # View Range Selection -When using CustomView in SfRating, Only one item will be rated. If you need to change the view of all rated CustomView items, Use the `EnableViewRangeSelection` boolean property. +When using custom views in SfRating, by default only the selected item displays its rated state while other items remain in their unrated state. The `EnableViewRangeSelection` property allows you to change the visual behavior so that all items up to the selected rating display their rated state, creating a continuous range selection effect. N> The EnableViewRangeSelection property is used only for CustomViews. diff --git a/xamarin-android/SfRotator/Adding-Looping-and-Delays.md b/xamarin-android/SfRotator/Adding-Looping-and-Delays.md index f005d9c0..79c38192 100644 --- a/xamarin-android/SfRotator/Adding-Looping-and-Delays.md +++ b/xamarin-android/SfRotator/Adding-Looping-and-Delays.md @@ -1,8 +1,8 @@ --- layout: post title: Various features in Syncfusion® Rotator control for Xamarin.Android -description: Learn how to set the autoplay option, loop the items, enable Text Area and choose the navigation direction in Rotator control for Xamarin.Android -platform: Xamarin.Android +description: Learn how to set the autoplay option, loop the items, enable Text Area and choose the navigation direction in Rotator control for Xamarin.Android +platform: xamarin.android control: Rotator documentation: ug --- @@ -64,3 +64,5 @@ rotator.EnableSwiping = false; {% endhighlight %} + + diff --git a/xamarin-android/SfRotator/Header-Visibility.md b/xamarin-android/SfRotator/Header-Visibility.md index ea1c7156..a45373b8 100644 --- a/xamarin-android/SfRotator/Header-Visibility.md +++ b/xamarin-android/SfRotator/Header-Visibility.md @@ -1,8 +1,8 @@ --- layout: post -title: Various features in Syncfusion® Rotator control for Xamarin.Android -description: Learn how to set the autoplay option, loop the items, enable Text Area and choose the navigation direction in Rotator control for Xamarin.Android -platform: Xamarin.Android +title: Syncfusion® Rotator Text Area Visibility for Xamarin.Android +description: Learn how to enable and customize the text area visibility feature in Rotator control for Xamarin.Android platform +platform: xamarin.android control: Rotator documentation: ug --- @@ -28,8 +28,7 @@ for(int i = 1; i < 5; i++) collection.Add(item); } -// Assign the collection of Image date to Rotator's DataSource - +// Assign the collection to the rotator's data source rotator.DataSource = collection; // Used Resource folder images's name will display at the bottom of Rotator control. @@ -41,3 +40,4 @@ rotator.SelectedIndex = 2; SetContentView(rotator); {% endhighlight %} + diff --git a/xamarin-android/SfRotator/How-To.md b/xamarin-android/SfRotator/How-To.md index de48b48a..bd6d4b83 100644 --- a/xamarin-android/SfRotator/How-To.md +++ b/xamarin-android/SfRotator/How-To.md @@ -1,8 +1,8 @@ --- layout: post title: Customization in Syncfusion® Rotator control for Xamarin.Android -description: Learn how to customize the Rotator control with its Properties -platform: Xamarin.Android +description: Learn how to customize the Syncfusion® Rotator control with its various properties and settings effectively. +platform: xamarin.android control: Rotator documentation: ug --- @@ -62,7 +62,7 @@ public class MainActivity : Activity {% endhighlight %} -# How to perform the operation while changing the Rotator's Item.? +## How to perform the operation while changing the Rotator's Item.? We can perform operation while the changing the Rotator's item using `SelectionChanged` event. SelectionChanged event returns changed Rotator control's Item. @@ -85,7 +85,7 @@ rotator.SelectionChanged += (object sender, SfRotator.SelectionChangedEventArgs {% endhighlight %} -# How to dynamically change the Rotator's Item.? +## How to dynamically change the Rotator's Item.? `SelectedIndex` property is used dynamically change the selected items in Rotator control. diff --git a/xamarin-android/SfRotator/Sliding-Direction.md b/xamarin-android/SfRotator/Sliding-Direction.md index 06b450de..cbd1f954 100644 --- a/xamarin-android/SfRotator/Sliding-Direction.md +++ b/xamarin-android/SfRotator/Sliding-Direction.md @@ -1,13 +1,13 @@ --- layout: post -title: Sliding Direction in Xamarin.Android Rotator | Syncfusion® -description: Learn how to set the autoplay option, loop the items, enable Text Area and choose the navigation direction in Rotator control for Xamarin.Android -platform: Xamarin.Android +title: Navigation Direction in Xamarin.Android Rotator | Syncfusion® +description: Learn how to configure navigation directions and sliding behavior in the Rotator control for Xamarin.Android platform +platform: xamarin.android control: Rotator documentation: ug --- -# Sliding Direction in Xamarin.Android Rotator Control +# Navigation Direction in Xamarin.Android Rotator Control The `NavigationDirection` property specifies the direction in which items should be navigated in SfRotator control. @@ -22,10 +22,9 @@ rotator.NavigationDirection = NavigationDirection.Horizontal; {% endhighlight %} -## Vertical - -Items can be navigated in vertical direction. +### Vertical Navigation +Vertical navigation enables top-to-bottom and bottom-to-top movement between items. This direction is useful for specific design layouts and content types. {% highlight C# %} SfRotator rotator = new SfRotator(this); @@ -33,10 +32,13 @@ rotator.NavigationDirection = NavigationDirection.Vertical; {% endhighlight %} -## LeftToRight +## Unidirectional Navigation + +Unidirectional navigation restricts movement to a single direction, which can be useful for guided experiences, presentations, or specific design requirements. -Items can be navigated from Left to Right Only. +### Left-to-Right Navigation +Restricts navigation to left-to-right movement only, preventing backward navigation. {% highlight C# %} SfRotator rotator = new SfRotator(this); @@ -44,10 +46,9 @@ rotator.NavigationDirection = NavigationDirection.LeftToRight; {% endhighlight %} -## RightToLeft - -Items can be navigated from Right to Left Only. +### Right-to-Left Navigation +Restricts navigation to right-to-left movement only, useful for RTL languages or specific design patterns. {% highlight C# %} SfRotator rotator = new SfRotator(this); @@ -55,10 +56,9 @@ rotator.NavigationDirection = NavigationDirection.RightToLeft; {% endhighlight %} -## TopToBottom - -Items can be navigated from Top to Bottom Only. +### Top-to-Bottom Navigation +Restricts navigation to downward movement only, creating a top-down flow experience. {% highlight C# %} SfRotator rotator = new SfRotator(this); @@ -66,13 +66,12 @@ rotator.NavigationDirection = NavigationDirection.TopToBottom; {% endhighlight %} -## BottomToTop - -Items can be navigated from Bottom to Top Only. +### Bottom-to-Top Navigation +Restricts navigation to upward movement only, creating a bottom-up flow experience. {% highlight C# %} SfRotator rotator = new SfRotator(this); rotator.NavigationDirection = NavigationDirection.BottomToTop; -{% endhighlight %} \ No newline at end of file +{% endhighlight %} diff --git a/xamarin-android/SfRotator/getting-started.md b/xamarin-android/SfRotator/getting-started.md index faefbfa3..b386cef2 100644 --- a/xamarin-android/SfRotator/getting-started.md +++ b/xamarin-android/SfRotator/getting-started.md @@ -1,15 +1,15 @@ --- layout: post -title: Getting Started with syncfusion® Rotator control for Xamarin.Android -description: A quick tour to initial users on Syncfusion® Rotator control for Xamarin.Android platform -platform: Xamarin.Android +title: Getting Started with Syncfusion® Rotator control for Xamarin.Android +description: A quick tour and getting started guide for initial users on Syncfusion® Rotator control for Xamarin.Android platform. +platform: xamarin.android control: Rotator documentation: ug --- # Getting Started -This section explains you the steps to configure a SfRotator control in a real-time scenario and also provides a walk-through on some of the customization features available in SfRotator control. +This section explains how to configure an SfRotator control in a real-world scenario and provides a walkthrough of the customization features available in the SfRotator control. ## Referencing Essential Studio® Components in Your Solution @@ -25,7 +25,8 @@ android\Syncfusion.SfRotator.Android.dll ## Initializing the SfRotator -* Adding namespace for the added assemblies. +### Adding Namespace +Add the namespace for the included assemblies: {% highlight C# %} @@ -33,7 +34,8 @@ using Com.Syncfusion.Rotator; {% endhighlight %} -* Now add the SfRotator control with a required optimal name by using the included namespace. +### Creating the SfRotator Instance +Create the SfRotator control using the included namespace: {% highlight C# %} @@ -42,18 +44,23 @@ SetContentView(rotator); {% endhighlight %} -# Adding items +## Adding Items -SfRotator items can be populated with a collection of image data or any other custom view. This collection must be the items of SfRotatorItem. To get the view of Rotator, we have two ways with SfRotatorItem or using RotatorAdapter. +SfRotator items can be populated with a collection of image data or custom views. The control provides two approaches for adding content: -## Through RotatorItem +1. **Using SfRotatorItem** - Direct item creation with image content or custom views +2. **Using RotatorAdapter** - Advanced customization with adapter pattern -* `ImageContent` - Populating the RotatorItem with collection of Image data. +### Approach 1: Using SfRotatorItem -* `Content` - Populating the RotatorItem with custom view. +The `SfRotatorItem` class provides two main properties for content: -### Using ImageContent +- **`ImageContent`** - For populating items with image data +- **`Content`** - For populating items with custom views +#### Using ImageContent + +This approach is ideal for simple image carousels: {% highlight C# %} Context context = this; @@ -69,8 +76,7 @@ for(int i = 1; i < 5; i++) collection.Add(item); } -// Assign the collection of Image date to Rotator's DataSource - +// Assign the collection to the rotator's data source rotator.DataSource = collection; rotator.SelectedIndex = 2; @@ -79,7 +85,7 @@ SetContentView(rotator); {% endhighlight %} -![](images/rotator.png) +![Simple Image Rotator](images/rotator.png) ### Using Content @@ -128,7 +134,7 @@ SetContentView(rotator); {% endhighlight %} -![](images/content.png) +![Content](images/content.png) ## Through RotatorAdapter @@ -201,7 +207,7 @@ public class MainActivity : Activity {% endhighlight %} -![](images/rotator.png) +![Simple Image Rotator](images/rotator.png) ## Set Navigation Mode @@ -232,3 +238,5 @@ rotator.NavigationStripPosition = NavigationStripPosition.Right; N> Default Navigation strip position is `Bottom`. + + diff --git a/xamarin-android/SfRotator/navigation-modes.md b/xamarin-android/SfRotator/navigation-modes.md index 6e9e5408..b75a0ef2 100644 --- a/xamarin-android/SfRotator/navigation-modes.md +++ b/xamarin-android/SfRotator/navigation-modes.md @@ -1,8 +1,8 @@ --- layout: post -title: NavigationMode of Syncfusion® Rotator control for Xamarin.Forms -description: Learn how to view the different navigation modes of the Rotator control in Xamarin.Forms -platform: Xamarin.Forms +title: NavigationMode of Syncfusion® Rotator control for Xamarin.Android +description: Learn how to view the different navigation modes of the Syncfusion® Rotator control in Xamarin.Android applications. +platform: xamarin.android control: Rotator documentation: ug --- @@ -20,7 +20,7 @@ rotator.NavigationStripMode = NavigationStripMode.Thumbnail; {% endhighlight %} -![](images/thumbnail1.png) +![Thumbnail navigation strip](images/thumbnail1.png) * `Dots` - The slider items will be loaded in dots view additionally. When a dots item is clicked, the slider will switch to the corresponding image data. @@ -31,7 +31,7 @@ rotator.NavigationStripMode = NavigationStripMode.Dots; {% endhighlight %} -![](images/rotator.png) +![Dots navigation strip](images/rotator.png) ## Items / Dot Strip Positions @@ -51,4 +51,4 @@ rotator.NavigationStripPosition = NavigationStripPosition.Top; {% endhighlight %} -![](images/top.png) \ No newline at end of file +![The navigation strip positioned at the top](images/top.png) diff --git a/xamarin-android/SfRotator/overview.md b/xamarin-android/SfRotator/overview.md index 4a5d8da7..43af9d6f 100644 --- a/xamarin-android/SfRotator/overview.md +++ b/xamarin-android/SfRotator/overview.md @@ -1,17 +1,19 @@ --- layout: post title: Overview of Syncfusion® Rotator control for Xamarin.Android -description: Overview and key features of Rotator control in Xamarin.Android -platform: Xamarin.Android +description: Explore the overview and key features of Syncfusion® Essential® Rotator control for Xamarin.Android mobile apps. +platform: xamarin.android control: Rotator documentation: ug --- # Overview -The SfRotator is a data control used to display image data and navigate through them. The images can be selected either by Thumbnail or by Dots support. +The SfRotator is a versatile UI control designed to display and navigate through collections of content in an interactive, carousel-style interface. This control enables users to browse through multiple items—such as images, custom views, or mixed content—with smooth navigation and customizable presentation options. -![](images/rotator.png) +The SfRotator provides an engaging way to showcase content while maintaining a clean and intuitive user interface. It supports various navigation modes and positioning options, making it suitable for a wide range of applications from simple image galleries to complex content presentations. + +![SfRotator Control](images/rotator.png) ## Key Features diff --git a/xamarin-android/SfRotator/populating-data.md b/xamarin-android/SfRotator/populating-data.md index f503c8a7..32bacbdc 100644 --- a/xamarin-android/SfRotator/populating-data.md +++ b/xamarin-android/SfRotator/populating-data.md @@ -1,27 +1,28 @@ --- -layout : post -title : Populating data in Syncfusion® Rotator control in Xamarin.Android -description : Learn how to set the DataSource in Rotator for Xamarin.Android -platform : Xamarin.Android -control : Rotator -documentation : ug +layout: post +title: Populating data in Syncfusion® Rotator control in Xamarin.Android +description: Discover how to configure and set the DataSource property in Syncfusion® Rotator control for Xamarin.Android apps. +platform: xamarin.android +control: Rotator +documentation: ug --- # Populating Data -SfRotator items can be populated with a collection of image data or any other custom view. `DataSource` property is used to hold the collection of RotatorItems in Rotator. +The SfRotator control provides flexible options for populating content through its `DataSource` property. You can display various types of content including images, custom views, or complex layouts. The control supports multiple approaches for data population, each suited to different scenarios and requirements. -To get the view of Rotator, we have two ways with SfRotatorItem +## Data Population Approaches -* `ImageContent` - Populating the RotatorItem with collection of Image data. - -* `Content` - Populating the RotatorItem with custom view. +The SfRotator offers three primary methods for populating data: +1. **ImageContent Approach**: Simple image display using resource names +2. **Custom Content Approach**: Complex layouts with multiple UI elements +3. **Adapter Pattern**: Advanced customization with RotatorAdapter ## Using ImageContent -`ImageContent` property in RotatorItem helps to view the Rotator from Resource folder image item. -We can add the Resource folder's images to the Items of Rotator. +The `ImageContent` property provides the simplest way to display images in the SfRotator. This approach is ideal for basic image galleries where you want to display images from your application's resources. +### Basic ImageContent Implementation {% highlight C# %} Context context = this; @@ -37,8 +38,7 @@ for(int i = 1; i < 5; i++) collection.Add(item); } -// Assign the collection of Image date to Rotator's DataSource - +// Assign the collection to the rotator's DataSource rotator.DataSource = collection; rotator.SelectedIndex = 2; @@ -47,7 +47,7 @@ SetContentView(rotator); {% endhighlight %} -![](images/rotator.png) +![Simple Image Rotator](images/rotator.png) ## Using Content @@ -98,9 +98,9 @@ SetContentView(rotator); {% endhighlight %} -![](images/content.png) +![Content View Example](images/content.png) -# Through RotatorAdapter +## Through RotatorAdapter RotatorAdapter object acts as a bridge between an RotatorAdapterView and the underlying data for that view. The Adapter provides access to the data items. The Adapter is also responsible for making a View for each item in the data set. @@ -189,4 +189,5 @@ public class MainActivity : Activity {% endhighlight %} -![](images/rotator.png) +![Simple Image Rotator Example](images/rotator.png) + diff --git a/xamarin-android/SfSegmentedControl/Customization.md b/xamarin-android/SfSegmentedControl/Customization.md index d901daf8..d1de96ea 100755 --- a/xamarin-android/SfSegmentedControl/Customization.md +++ b/xamarin-android/SfSegmentedControl/Customization.md @@ -1,7 +1,7 @@ --- layout: post -title: Customization in Syncfusion® segmented control for Xamarin.Android -description: Learn how to customize the text, border, scrolling, corner radius, and color in Xamarin.Android SegmentedControl +title: Customization in Syncfusion® Segmented Control for Xamarin.Android +description: Learn how to customize the text, border, scrolling, corner radius, and color in Xamarin.Android Segmented Control platform: Xamarin.Android control: SegmentedControl documentation: ug @@ -9,13 +9,13 @@ documentation: ug # Customization of Xamarin.Android Segmented Control -The segmented control supports customizing segment color, text color, icon size, selection color, and more. This control also supports enabling the segments to fit your application’s theme. It can be customized in the following areas. +The Segmented Control supports customizing segment color, text color, icon size, selection color, and more. This control also supports enabling the segments to fit your application's theme. It can be customized in the following areas: -## Text appearance +## Text Appearance -The text inside the segmented control can be customized by its font size, color, and its font family. +The text inside the Segmented Control can be customized by its font size, color, and font family. -### Font family +### Font Family You can customize the font family of the segmented item using the [`FontIconStyle`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfSegmentedControl.html#Syncfusion_Android_Buttons_SfSegmentedControl_FontIconStyle) property. @@ -25,7 +25,7 @@ segmentedControl.FontIconStyle = Typeface.Create("sans-serif-light", TypefaceSty {% endhighlight %} -### Font color +### Font Color You can customize the text color of the segmented item using the [`FontColor`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfSegmentedControl.html#Syncfusion_Android_Buttons_SfSegmentedControl_FontColor) property. @@ -35,9 +35,9 @@ segmentedControl.FontColor = Color.Red; {% endhighlight %} -![Font color customization in segmented control](images/Customization/Xamarin_Android_Fontcolor.png) +![Font color customization in Segmented Control](images/Customization/Xamarin_Android_Fontcolor.png) -### Font size +### Font Size You can change the text size of the segmented item using the [`FontSize`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfSegmentedControl.html#Syncfusion_Android_Buttons_SfSegmentedControl_FontSize) property. @@ -47,15 +47,15 @@ segmentedControl.FontSize = 20; {% endhighlight %} -![Font size customization in segmented control](images/Customization/Xamarin_Android_Size.png) +![Font size customization in Segmented Control](images/Customization/Xamarin_Android_Size.png) ## Border -You can customize the border by their color and thickness. +You can customize the border by its color and thickness. -### Border color +### Border Color -You can customize the [`BorderColor`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfSegmentedControl.html#Syncfusion_Android_Buttons_SfSegmentedControl_BorderColor) of all the items in the segmented control. +You can customize the [`BorderColor`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfSegmentedControl.html#Syncfusion_Android_Buttons_SfSegmentedControl_BorderColor) of all the items in the Segmented Control. {% highlight c# %} @@ -63,9 +63,9 @@ segmentedControl.BorderColor = Color.Red; {% endhighlight %} -![Border color customization in segmented control](images/Customization/Xamarin_Android_Bordercolor.png) +![Border color customization in Segmented Control](images/Customization/Xamarin_Android_Bordercolor.png) -### Border thickness +### Border Thickness You can customize the width of the border using the [`BorderThickness`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfSegmentedControl.html#Syncfusion_Android_Buttons_SfSegmentedControl_BorderThickness) property. @@ -75,15 +75,15 @@ segmentedControl.BorderThickness = 5; {% endhighlight %} -![Border thickness customization in segmented control](images/Customization/Xamarin_Android_BorderThickness.png) +![Border thickness customization in Segmented Control](images/Customization/Xamarin_Android_BorderThickness.png) -### Padding +## Padding -The segmented control handles padding between the items. +The Segmented Control handles padding between the items. -#### Segment padding +### Segment Padding -Spacing between the segmented items in the control can be customized using the [`SegmentPadding`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfSegmentedControl.html#Syncfusion_Android_Buttons_SfSegmentedControl_SegmentPadding). +Spacing between the segmented items in the control can be customized using the [`SegmentPadding`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfSegmentedControl.html#Syncfusion_Android_Buttons_SfSegmentedControl_SegmentPadding) property. {% highlight c# %} @@ -91,15 +91,15 @@ segmentedControl.SegmentPadding = 15; {% endhighlight %} -![Segment padding customization in segmented control](images/Customization/Xamarin_Android_Padding.png) +![Segment padding customization in Segmented Control](images/Customization/Xamarin_Android_Padding.png) -### Corner radius +## Corner Radius -The segmented control provides corner radius support for the segmented items and strip. +The Segmented Control provides corner radius support for the segmented items and strip. -#### Item radius +### Item Radius -The segmented control customizes the corner radius for each segmented item. +The Segmented Control customizes the corner radius for each segmented item. {% highlight c# %} @@ -107,11 +107,11 @@ segmentedControl.SegmentCornerRadius = 15; {% endhighlight %} -![Segment corner radius customization in segmented control](images/Customization/Xamarin_Android_ItemCornerRadius.png) +![Segment corner radius customization in Segmented Control](images/Customization/Xamarin_Android_ItemCornerRadius.png) -#### Selection strip radius +### Selection Strip Radius -The segmented control customizes corner radius for selection strip using the [`CornerRadius`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfSegmentedControl.html#Syncfusion_Android_Buttons_SfSegmentedControl_CornerRadius) property of [`SelectionIndicatorSetting`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfSegmentedControl.html#Syncfusion_Android_Buttons_SfSegmentedControl_SelectionIndicatorSettings). +The Segmented Control customizes corner radius for the selection strip using the [`CornerRadius`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfSegmentedControl.html#Syncfusion_Android_Buttons_SfSegmentedControl_CornerRadius) property of [`SelectionIndicatorSettings`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfSegmentedControl.html#Syncfusion_Android_Buttons_SfSegmentedControl_SelectionIndicatorSettings). {% highlight c# %} @@ -122,11 +122,11 @@ segmentedControl.SelectionIndicatorSettings = new SelectionIndicatorSettings() {% endhighlight %} -![Selected segment corner radius customization in segmented control](images/Customization/Xamarin_Android_SelectionstripRadius.png) +![Selected segment corner radius customization in Segmented Control](images/Customization/Xamarin_Android_SelectionstripRadius.png) -#### Control radius +### Control Radius -The segmented control also handles corner radius for border line of the whole control. +The Segmented Control also handles corner radius for the border line of the whole control. {% highlight c# %} @@ -134,13 +134,13 @@ segmentedControl.CornerRadius = 15; {% endhighlight %} -![Corner radius customization in segmented control](images/Customization/Xamarin_Android_controlRadius.png) +![Corner radius customization in Segmented Control](images/Customization/Xamarin_Android_controlRadius.png) -### Color +## Color -The segmented control allows users to customize the background color of the segmented items and background color of the control. +The Segmented Control allows users to customize the background color of the segmented items and background color of the control. -#### Item color +### Item Color You can customize the background color of each segmented item using the [`Color`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfSegmentItem.html#Syncfusion_Android_Buttons_SfSegmentItem_BackgroundColor) property of [`SelectionIndicatorSettings`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfSegmentedControl.html#Syncfusion_Android_Buttons_SfSegmentedControl_SelectionIndicatorSettings). @@ -153,11 +153,11 @@ segmentedControl.SelectionIndicatorSettings = new SelectionIndicatorSettings() {% endhighlight %} -![Segment item color customization in segmented control](images/Customization/Xamarin_Android_ItemCornerRadius.png) +![Segment item color customization in Segmented Control](images/Customization/Xamarin_Android_ItemCornerRadius.png) -#### Control color +### Control Color -You can customize the background color of the control by setting value for the [`BackColor`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfSegmentedControl.html#Syncfusion_Android_Buttons_SfSegmentedControl_BackColor) property. +You can customize the background color of the control by setting a value for the [`BackColor`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfSegmentedControl.html#Syncfusion_Android_Buttons_SfSegmentedControl_BackColor) property. {% highlight c# %} @@ -165,15 +165,15 @@ segmentedControl.BackColor = Color.ParseColor("#02A0AE"); {% endhighlight %} -![Segmented control color customization in segmented control](images/Customization/Xamarin_Android_color.png) +![Segmented Control color customization](images/Customization/Xamarin_Android_color.png) -## Scrolling in segmented control programmatically +## Scrolling in Segmented Control Programmatically -The SegmentedControl allows programmatic scrolling based on index and item using the [`ScrollTo`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfSegmentedControl.html#Syncfusion_Android_Buttons_SfSegmentedControl_ScrollTo_System_Int32_Syncfusion_Android_Buttons_ScrollToPosition_) methods mentioned as follows. +The Segmented Control allows programmatic scrolling based on index and item using the [`ScrollTo`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfSegmentedControl.html#Syncfusion_Android_Buttons_SfSegmentedControl_ScrollTo_System_Int32_Syncfusion_Android_Buttons_ScrollToPosition_) methods mentioned as follows: ### ScrollTo(index, scrollToPosition) -This method is used to scroll the segment item based on given index and [`ScrollToPosition`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfSegmentedControl.html#Syncfusion_Android_Buttons_SfSegmentedControl_ScrollToPosition) value. +This method is used to scroll the segment item based on the given index and [`ScrollToPosition`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfSegmentedControl.html#Syncfusion_Android_Buttons_SfSegmentedControl_ScrollToPosition) value. {% tabs %} diff --git a/xamarin-android/SfSegmentedControl/Dealing-with-selection-changed.md b/xamarin-android/SfSegmentedControl/Dealing-with-selection-changed.md index 59d5428d..7e73c421 100755 --- a/xamarin-android/SfSegmentedControl/Dealing-with-selection-changed.md +++ b/xamarin-android/SfSegmentedControl/Dealing-with-selection-changed.md @@ -1,19 +1,19 @@ --- layout: post -title: selection changed in Syncfusion® Segmented control for Xamarin.Android -description: Learn how to notify the selection changes on its segments in Xamarin.Android SegmentedControl (SfSegmentedControl). +title: Selection Changed in Syncfusion® Segmented Control for Xamarin.Android +description: Learn how to notify the selection changes on its segments in Xamarin.Android Segmented Control (SfSegmentedControl). platform: Xamarin.Android control: SegmentedControl documentation: ug --- -# Notify the selection changes in SfSegmentedControl in Xamarin.Android +# Notify the Selection Changes in SfSegmentedControl in Xamarin.Android -The segmented control handles the Selection changed when there is a change from one segment item to another. It can be handled by two ways. +The Segmented Control handles the selection changed event when there is a change from one segment item to another. It can be handled in two ways: -## User interface +## User Interface -When users navigate from one item to another, selection is changed, so that the [`SelectedIndex`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfSegmentedControl.html#Syncfusion_Android_Buttons_SfSegmentedControl_SelectedIndex) value is updated to the new index of the item. The segmented control provides the [`SelectionChanged`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfSegmentedControl.html) event, which is triggered when the selection is changed with the [`SelectionChangedEventArgs`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SelectionChangedEventArgs.html). +When users navigate from one item to another, the selection is changed, so the [`SelectedIndex`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfSegmentedControl.html#Syncfusion_Android_Buttons_SfSegmentedControl_SelectedIndex) value is updated to the new index of the item. The Segmented Control provides the [`SelectionChanged`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfSegmentedControl.html) event, which is triggered when the selection is changed with the [`SelectionChangedEventArgs`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SelectionChangedEventArgs.html). [`Index`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SelectionChangedEventArgs.html#Syncfusion_Android_Buttons_SelectionChangedEventArgs_Index) - Gets the current index value of the selected item. @@ -26,9 +26,9 @@ segmentedControl.SelectionChanged += (object sender, SelectionChangedEventArgs e {% endhighlight %} -## Selected Index through programmatically. +## Selected Index Through Programming -You can set the default value programmatically for the selection to be placed. The selection gets updated based on the index value given for the [`SelectedIndex`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfSegmentedControl.html#Syncfusion_Android_Buttons_SfSegmentedControl_SelectedIndex). +You can set the default value programmatically for the selection to be placed. The selection gets updated based on the index value given for the [`SelectedIndex`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfSegmentedControl.html#Syncfusion_Android_Buttons_SfSegmentedControl_SelectedIndex) property. {% highlight c# %} diff --git a/xamarin-android/SfSegmentedControl/Display-mode.md b/xamarin-android/SfSegmentedControl/Display-mode.md index 1820da74..e9ed9ec5 100755 --- a/xamarin-android/SfSegmentedControl/Display-mode.md +++ b/xamarin-android/SfSegmentedControl/Display-mode.md @@ -1,19 +1,19 @@ --- layout: post -title: Display mode in Syncfusion® segmented control for Xamarin.Android -description: Learn how to display segmented items with icons,text or a combination of both icon and text in Segmented control +title: Display Mode in Syncfusion® Segmented Control for Xamarin.Android +description: Learn how to display segmented items with icons, text, or a combination of both icon and text in Segmented Control platform: Xamarin.Android control: SegmentedControl documentation: ug --- -# Display mode in Xamarin.Android Segmented control (SfSegmentedControl) +# Display Mode in Xamarin.Android Segmented Control (SfSegmentedControl) -Depending on the application, different scenarios may require icons, text, or a combination of both for effective communication. The segmented control supports these three options. +Depending on the application, different scenarios may require icons, text, or a combination of both for effective communication. The Segmented Control supports these three options: ## Text -Items populated in the segmented control will be displayed as text by default. +Items populated in the Segmented Control will be displayed as text by default. {% highlight c# %} @@ -47,7 +47,7 @@ SelectionIndicatorSettings selectionIndicator = new SelectionIndicatorSettings() ## Image -Items populated in the segmented control can be displayed as icons. +Items populated in the Segmented Control can be displayed as icons. {% highlight c# %} @@ -67,9 +67,9 @@ segmentedControl.ItemsSource = new ObservableCollection ![Xamarin.Android SfSegmentedControl with Image display mode](images/Display-mode/Xamarin_Android_Image.png) -## Image with text +## Image with Text -Items populated in the segmented control can be displayed as icons with accompanying text. +Items populated in the Segmented Control can be displayed as icons with accompanying text. {% highlight c# %} @@ -89,12 +89,12 @@ segmentedControl.ItemsSource = new ObservableCollection ![Xamarin.Android SfSegmentedControl with Image and Text display mode](images/Display-mode/Xamarin_Android_ImagewithText.png) -## How to generate font icons +## How to Generate Font Icons -The segmented control enables the user to use font icons for the items in the data source collection. For this we have to first give the desired font icon and its font family using [`IconFont`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfSegmentItem.html#Syncfusion_Android_Buttons_SfSegmentItem_IconFont) and [`FontIconTypeface`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfSegmentItem.html#Syncfusion_Android_Buttons_SfSegmentItem_FontIconTypeface) property. +The Segmented Control enables the user to use font icons for the items in the data source collection. For this, you must first specify the desired font icon and its font family using the [`IconFont`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfSegmentItem.html#Syncfusion_Android_Buttons_SfSegmentItem_IconFont) and [`FontIconTypeface`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfSegmentItem.html#Syncfusion_Android_Buttons_SfSegmentItem_FontIconTypeface) properties. -N> Font family must be added to the respective folders based on the platforms -Android -> Add the font family inside Resource-> drawable +N> The font family must be added to the respective folders based on the platform: +Android -> Add the font family inside Resource -> drawable {% highlight c# %} diff --git a/xamarin-android/SfSegmentedControl/Getting-Started.md b/xamarin-android/SfSegmentedControl/Getting-Started.md index abc6fc36..8b28d4f6 100755 --- a/xamarin-android/SfSegmentedControl/Getting-Started.md +++ b/xamarin-android/SfSegmentedControl/Getting-Started.md @@ -1,41 +1,41 @@ --- layout: post -title: Getting Started with Syncfusion® segmented control for Xamarin.Android -description: Learn how to create a simple segmented control and its customization options with its available basic features in Xamarin.Android +title: Getting Started with Syncfusion® Segmented Control for Xamarin.Android +description: Learn how to create a simple Segmented Control and its customization options with its available basic features in Xamarin.Android platform: xamarin.android control: SfSegmentedControl documentation: ug --- -# Getting Started Xamarin.Android SegmentedControl (SfSegmentedControl) +# Getting Started with Xamarin.Android Segmented Control (SfSegmentedControl) -This section provides a quick overview for working with the segmented control for Xamarin.Android. Walk through the entire process of creating a real-world application with segmented control. +This section provides a quick overview for working with the Segmented Control for Xamarin.Android. Walk through the entire process of creating a real-world application with the Segmented Control. -## Assembly deployment +## Assembly Deployment -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 Essential Studio Installed location}\Essential Studio\16.2.0.41\Xamarin\lib Eg: C:\Program Files (x86)\Syncfusion\Essential Studio\16.2.0.41\Xamarin\lib -N> Assemblies can be found in unzipped package location in Mac. +N> Assemblies can be found in the unzipped package location on Mac. ## Adding SfSegmentedControl Reference -Syncfusion® Xamarin components are available in [nuget.org](https://www.nuget.org/). To add SfSegmentedControl to your project, open the NuGet package manager in Visual Studio, and search for [Syncfusion.Xamarin.Buttons.Android](https://www.nuget.org/packages/Syncfusion.Xamarin.Buttons.Android/#), and then install it. +Syncfusion® Xamarin components are available in [nuget.org](https://www.nuget.org/). To add SfSegmentedControl to your project, open the NuGet package manager in Visual Studio, search for [Syncfusion.Xamarin.Buttons.Android](https://www.nuget.org/packages/Syncfusion.Xamarin.Buttons.Android/#), and then install it. -To know more about obtaining our components, refer to this [link](https://help.syncfusion.com/xamarin-android/introduction/download-and-installation). Also, if you prefer to manually refer the assemblies instead of NuGet, please refer the below assembly. +To know more about obtaining our components, refer to this [link](https://help.syncfusion.com/xamarin-android/introduction/download-and-installation). Also, if you prefer to manually reference the assemblies instead of NuGet, please refer to the assembly below: android\Syncfusion.Buttons.Android.dll -### Create a simple segmented control +### Create a Simple Segmented Control -This section explains how to create a segmented control and configure it.The segmented control can be configured entirely in C# code. This is how the final output will look like in Android devices. +This section explains how to create a Segmented Control and configure it. The Segmented Control can be configured entirely in C# code. This is how the final output will look on Android devices: ![Xamarin.Android SfSegmentedControl getting started](images/Getting-started/Xamarin_Android_GettingStarted.png) -## Creating the project +## Creating the Project -Create a new Android application in Visual Studio for Xamarin.Android. +Create a new Android application in Visual Studio for Xamarin.Android. ## Adding SfSegmentedControl in Xamarin.Android @@ -72,9 +72,9 @@ protected override void OnCreate(Bundle savedInstanceState) ### Adding supportive views to the application. -For the completeness of the ticket booking application, few framework controls are added to the application, to get the data from the user. +For the completeness of the ticket booking application, a few framework controls are added to the application to get data from the user. -Initial view for the application can be created by the following code snippet. +The initial view for the application can be created by the following code snippet: {% highlight C# %} @@ -130,19 +130,19 @@ public class MainActivity : Activity ![Initial view of Xamarin.Android SfSegmentedControl demo sample](images/Getting-started/Xamarin-Android-initialview.png) -## Adding data/items to SfSegmentedControl +## Adding Data/Items to SfSegmentedControl -We can add the data inside the segmented control in 3 different ways. +You can add data inside the Segmented Control in three different ways: -1. Populating string of data +1. Populating string data 2. SfSegmentItem 3. Custom view -Items inside the segmented control can be added through the [`ItemsSource`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfSegmentedControl.html#Syncfusion_Android_Buttons_SfSegmentedControl_ItemsSource) property of [`SfSegmentedControl`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfSegmentedControl.html), which holds the collection/list of items. +Items inside the Segmented Control can be added through the [`ItemsSource`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfSegmentedControl.html#Syncfusion_Android_Buttons_SfSegmentedControl_ItemsSource) property of [`SfSegmentedControl`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfSegmentedControl.html), which holds the collection/list of items. -## Adding data as a String +## Adding Data as a String -With the help of `System.Collections.Generic` we can add string data as [`ItemsSource`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfSegmentedControl.html#Syncfusion_Android_Buttons_SfSegmentedControl_ItemsSource) to SfSegmentedControl. +With the help of `System.Collections.Generic`, you can add string data as [`ItemsSource`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfSegmentedControl.html#Syncfusion_Android_Buttons_SfSegmentedControl_ItemsSource) to SfSegmentedControl: {% highlight C# %} @@ -215,9 +215,9 @@ protected override void OnCreate(Bundle savedInstanceState) ![Xamarin.Android SfSegmentedControl populating data as a collection of string](images/Getting-started/Xamarin_Android_String.png) -## Adding data as a SfSegmentItem +## Adding Data as a SfSegmentItem -By using [`SfSegmentItem`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfSegmentItem.html) class, we can add data inside the segmented control. +By using the [`SfSegmentItem`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfSegmentItem.html) class, you can add data inside the Segmented Control: {% highlight C# %} @@ -256,9 +256,9 @@ SfSegmentedControl segment = new SfSegmentedControl(this) ![Xamarin.Android SfSegmentedControl populating data as a SfSegmentItem](images/Getting-started/Xamarin_Android_StringSegmentItem.png) -## Adding data as Custom View. +## Adding Data as Custom View -We can add any custom view to the segmented control +You can add any custom view to the Segmented Control: {% highlight C# %} @@ -300,12 +300,11 @@ SfSegmentedControl segmentView = new SfSegmentedControl(this) ![Xamarin.Android SfSegmentedControl populating data as custom view](images/Getting-started/Xamarin_Android_GettingStarted.png) +## Customizing Segmented Control Appearance -## Customizing segmented control appearance +### Share Space Equally to All the Items -### Share space equally to all the items. - -To share the Item space equally to segmented control, set the number of segment item that has to be visible on the available screen width and that can be distributed in the available space though the [`VisibleSegmentsCount`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfSegmentedControl.html#Syncfusion_Android_Buttons_SfSegmentedControl_VisibleSegmentsCount) property of [`SfSegmentedControl`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfSegmentedControl.html). +To share the item space equally in the Segmented Control, set the number of segment items that have to be visible on the available screen width and that can be distributed in the available space through the [`VisibleSegmentsCount`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfSegmentedControl.html#Syncfusion_Android_Buttons_SfSegmentedControl_VisibleSegmentsCount) property of [`SfSegmentedControl`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfSegmentedControl.html): {% highlight C# %} @@ -318,7 +317,7 @@ segmentedControl.VisibleSegmentsCount = 5; ### Display Mode -We can change the appearance of the segmented control by using the [`DisplayMode`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfSegmentedControl.html#Syncfusion_Android_Buttons_SfSegmentedControl_DisplayMode) property of [`SfSegmentedControl`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfSegmentedControl.html). We can set the [`DisplayMode`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfSegmentedControl.html#Syncfusion_Android_Buttons_SfSegmentedControl_DisplayMode) to either Image or Text or ImageWithText. +You can change the appearance of the Segmented Control by using the [`DisplayMode`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfSegmentedControl.html#Syncfusion_Android_Buttons_SfSegmentedControl_DisplayMode) property of [`SfSegmentedControl`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfSegmentedControl.html). You can set the [`DisplayMode`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfSegmentedControl.html#Syncfusion_Android_Buttons_SfSegmentedControl_DisplayMode) to either Image, Text, or ImageWithText: {% highlight c# %} @@ -328,12 +327,16 @@ segmentedControl.DisplayMode = SegmentDisplayMode.Text; {% endhighlight %} +## Customizing Selection Indicator Appearance + +The selection indicator can be used to indicate the selected index of the Segmented Control. It can be customized with the built-in APIs that are available in the [`SelectionIndicatorSettings`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfSegmentedControl.html#Syncfusion_Android_Buttons_SfSegmentedControl_SelectionIndicatorSettings) property of SfSegmentedControl. -## Customizing selection indicator appearance +To know more about customizing the selection indicator, refer to this [feature link](https://help.syncfusion.com/xamarin-android/sfsegmentedcontrol/indicating-the-selected-item). -The Selection indicator can be used to indicate the selected index of the segmented control. It can be customized with the built-in APIs that are available in the [`SelectionIndicatorSettings`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfSegmentedControl.html#Syncfusion_Android_Buttons_SfSegmentedControl_SelectionIndicatorSettings) property of SfSegmentedControl. +N> For custom views, users need to handle click events manually for the view that has been used. +Example: For Button, you have to use its "Click" event. -To know more about customizing selection indicator refer [feature link](https://help.syncfusion.com/xamarin-android/sfsegmentedcontrol/indicating-the-selected-item) +The code below can be included on the custom view to get the click event output: N> For custom view user need to handle click event manually for the view which have been used. eg. For Button we have to use its "Click" event. @@ -378,3 +381,4 @@ segmentView.ItemsSource = new ObservableCollection Note: Getting started sample can be downloaded from [this link](https://github.com/SyncfusionExamples/Getting-Started-Sample-SegmentedControl-Xamarin-Androidd) + diff --git a/xamarin-android/SfSegmentedControl/Handling-multiple-segments.md b/xamarin-android/SfSegmentedControl/Handling-multiple-segments.md index 1e568e2f..40a20a20 100755 --- a/xamarin-android/SfSegmentedControl/Handling-multiple-segments.md +++ b/xamarin-android/SfSegmentedControl/Handling-multiple-segments.md @@ -1,19 +1,19 @@ --- layout: post -title: Handling the segments in Xamarin.Android Syncfusion® Segmented control -description: Learn how to restrict the visible segment count and its available scrolling options in Xamarin.Android Segmented control. +title: Handling the Segments in Xamarin.Android Syncfusion® Segmented Control +description: Learn how to restrict the visible segment count and its available scrolling options in Xamarin.Android Segmented Control. platform: Xamarin.Android control: SegmentedControl documentation: ug --- -# Handling multiple segments in Xamarin.Android SfSegmentedControl +# Handling Multiple Segments in Xamarin.Android SfSegmentedControl -The segmented control handles the segmented items with the space distributed for the items on two ways. +The Segmented Control handles the segmented items with the space distributed for the items in two ways: -## Visible segment counts +## Visible Segment Count -The segmented control displays the item for the view based on the count which is given for [`VisibleSegmentCount`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfSegmentedControl.html#Syncfusion_Android_Buttons_SfSegmentedControl_VisibleSegmentsCount). +The Segmented Control displays the items for the view based on the count that is given for [`VisibleSegmentsCount`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfSegmentedControl.html#Syncfusion_Android_Buttons_SfSegmentedControl_VisibleSegmentsCount). {% highlight c# %} @@ -34,12 +34,8 @@ segmentedControl.ItemsSource = = new ObservableCollection {% endhighlight %} -![Xamarin.Android SfSegmentedControl with four visible segment](images/Handling-multiple-segments/visiblesegment.png) +![Xamarin.Android SfSegmentedControl with four visible segments](images/Handling-multiple-segments/visiblesegment.png) ## Scrolling -When the available space in the segmented control is not equally distributed, the items beyond the edges of the control can be viewed by scrolling the panel. - - - - +When the available space in the Segmented Control is not equally distributed, the items beyond the edges of the control can be viewed by scrolling the panel. diff --git a/xamarin-android/SfSegmentedControl/Indicating-the-selected-item.md b/xamarin-android/SfSegmentedControl/Indicating-the-selected-item.md index d904b221..e6866f45 100755 --- a/xamarin-android/SfSegmentedControl/Indicating-the-selected-item.md +++ b/xamarin-android/SfSegmentedControl/Indicating-the-selected-item.md @@ -1,19 +1,19 @@ --- layout: post -title: selection indicator in Syncfusion® SegmentedControl for Xamarin.Android -description: Learn how to handle selection indicator settings, selection text color and selection strip in Segmented control +title: Selection Indicator in Syncfusion® Segmented Control for Xamarin.Android +description: Learn how to handle selection indicator settings, selection text color, and selection strip in Segmented Control platform: Xamarin.Android control: SegmentedControl documentation: ug --- -# Indicating the selected item +# Indicating the Selected Item -The segmented control indicates the selected item by differentiating it with the text color of the item or by using selection strip. +The Segmented Control indicates the selected item by differentiating it with the text color of the item or by using a selection strip. -## Selection text color +## Selection Text Color -The user can change the text color of the Selected item to desired color.The selected item text color can be customized by the [`SelectionTextColor`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfSegmentedControl.html#Syncfusion_Android_Buttons_SfSegmentedControl_SelectionTextColor) property. +The user can change the text color of the selected item to the desired color. The selected item text color can be customized by the [`SelectionTextColor`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfSegmentedControl.html#Syncfusion_Android_Buttons_SfSegmentedControl_SelectionTextColor) property. {% highlight c# %} @@ -27,13 +27,13 @@ segmentedControl.SelectionTextColor = Color.ParseColor("#02A0AE"); ## Selection Strip -A selection strip is used to indicate the selected item in the segmented control. The selection strip can be customized in many forms. +A selection strip is used to indicate the selected item in the Segmented Control. The selection strip can be customized in many forms. -#### Position +### Position The position of the selection indicator can be customized by the user in different ways. -##### Top +#### Top The selection strip can be displayed as a line with customizable color and thickness. It can be positioned at the top of an item. @@ -50,9 +50,9 @@ segmentedControl.SelectionIndicatorSettings = new SelectionIndicatorSettings() ![Selection Strip Top](images/Selection-indicator/Xamarin_Android_Top.png) -##### Bottom +#### Bottom -As like Top placement selection strip can be customized by its color and thickness which can be positioned at the bottom of an item. +Like the top placement, the selection strip can be customized by its color and thickness and can be positioned at the bottom of an item. {% highlight c# %} @@ -67,7 +67,7 @@ segmentedControl.SelectionIndicatorSettings = new SelectionIndicatorSettings() ![Selection Strip Bottom](images/Selection-indicator/Xamarin_Android_Bottom.png) -##### Fill +#### Fill The selection strip can be placed over a segment item to indicate it is selected. You can customize its color to highlight the item. @@ -84,7 +84,7 @@ segmentedControl.SelectionIndicatorSettings = new SelectionIndicatorSettings() ![Selection Strip Fill](images/Selection-indicator/Xamarin_Android_Fill.png) -##### Border +#### Border The selection strip can be set as a border to highlight the selected item. @@ -101,9 +101,9 @@ segmentedControl.SelectionIndicatorSettings = new SelectionIndicatorSettings() ![Selection Strip Border](images/Selection-indicator/Xamarin_Android_Border.png) -#### Color +### Color -The background color of the selection strip can be customized using [`Color`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfSegmentItem.html#Syncfusion_Android_Buttons_SfSegmentItem_SelectionBackgroundColor) property which is inside SelectionIndicatorSettings class. +The background color of the selection strip can be customized using the [`Color`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfSegmentItem.html#Syncfusion_Android_Buttons_SfSegmentItem_SelectionBackgroundColor) property, which is inside the SelectionIndicatorSettings class. {% highlight c# %} @@ -118,9 +118,9 @@ segmentedControl.SelectionIndicatorSettings = new SelectionIndicatorSettings() ![Selection Strip Color](images/Selection-indicator/Xamarin_Android_stripcolor.png) -#### Thickness +### Thickness -The border thickness of the selection strip can be customized using [`Thickness`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfSegmentedControl.html#Syncfusion_Android_Buttons_SfSegmentedControl_SegmentBorderThickness) property which is inside SelectionIndicatorSettings class +The border thickness of the selection strip can be customized using the [`StrokeThickness`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfSegmentedControl.html#Syncfusion_Android_Buttons_SfSegmentedControl_SegmentBorderThickness) property, which is inside the SelectionIndicatorSettings class. {% highlight c# %} diff --git a/xamarin-android/SfSegmentedControl/Overview.md b/xamarin-android/SfSegmentedControl/Overview.md index 645af501..58de114f 100755 --- a/xamarin-android/SfSegmentedControl/Overview.md +++ b/xamarin-android/SfSegmentedControl/Overview.md @@ -1,17 +1,17 @@ --- -layout : post -title : Overview of Syncfusion® Segmented control for Xamarin.Android -description : Overview and key features of Segmented control -platform : xamarin.Android -control : SfSegmentedControl -documentation : ug +layout: post +title: Overview of Syncfusion® Segmented Control for Xamarin.Android +description: Overview and key features of Segmented Control +platform: xamarin.android +control: SfSegmentedControl +documentation: ug --- # Overview -The segmented control for Xamarin.Android provides a simple way to choose from a linear set of two or more segments, each of which functions as a mutually exclusive button. +The Segmented Control for Xamarin.Android provides a simple way to choose from a linear set of two or more segments, each of which functions as a mutually exclusive button. -![](images/overview/Xamarin_Android_Overview.png) +![Xamarin.Android Segmented Control Overview](images/overview/Xamarin_Android_Overview.png) ## Key Features @@ -19,6 +19,6 @@ The segmented control for Xamarin.Android provides a simple way to choose from a * Supports scrolling and aligning the segments equally within the available space. -* Populates the segments from a collection of strings and views along with the objects of built-in classes. +* Populates the segments from a collection of strings and views along with objects of built-in classes. * Supports customizing the text and other UI elements. \ No newline at end of file diff --git a/xamarin-android/SfSegmentedControl/Populating-data-source.md b/xamarin-android/SfSegmentedControl/Populating-data-source.md index 793d919f..8f2204d2 100755 --- a/xamarin-android/SfSegmentedControl/Populating-data-source.md +++ b/xamarin-android/SfSegmentedControl/Populating-data-source.md @@ -1,20 +1,19 @@ --- layout: post -title: Data source in Syncfusion® Segmented control for Xamarin.Android - -description: Learn how to add data sources with collection of strings, segment items, and custom views for Segmented control in Xamarin.Android +title: Data Source in Syncfusion® Segmented Control for Xamarin.Android +description: Learn how to add data sources with collection of strings, segment items, and custom views for Segmented Control in Xamarin.Android platform: Xamarin.Android control: SegmentedControl documentation: ug --- -# Populating data source +# Populating Data Source -The segmented control can be populated from a collection of strings, views, or a collection of objects in a built-in class. +The Segmented Control can be populated from a collection of strings, views, or a collection of objects in a built-in class. -## String collection +## String Collection -The segmented control provides the collection of strings as a data source. +The Segmented Control provides the collection of strings as a data source. {% highlight c# %} @@ -55,9 +54,9 @@ SfSegmentedControl segmentedControl = new SfSegmentedControl(this) ![Xamarin.Android SfSegmentedControl populating items with string items](images/Data-source/Xamarin_Android_string.png) -## Segment items +## Segment Items -The segmented control customize the text or icons, or use other built-in customization options available for the segments. Segment item collections can also be used. +The Segmented Control can customize the text or icons, or use other built-in customization options available for the segments. Segment item collections can also be used. {% highlight c# %} @@ -97,9 +96,9 @@ SfSegmentedControl segmentedControl = new SfSegmentedControl(this) ![Xamarin.Android SfSegmentedControl populating items with segment items](images/Data-source/Xamarin_Android_SegmentItemCollection.png) -## Custom views +## Custom Views -Custom views or images can be added as segments in the Segmented control. +Custom views or images can be added as segments in the Segmented Control. {% highlight c# %} diff --git a/xamarin-android/SfSegmentedControl/how-to/Autoscrolling-the-selected-segment-item.md b/xamarin-android/SfSegmentedControl/how-to/Autoscrolling-the-selected-segment-item.md index ce7ec5d5..3ded7299 100644 --- a/xamarin-android/SfSegmentedControl/how-to/Autoscrolling-the-selected-segment-item.md +++ b/xamarin-android/SfSegmentedControl/how-to/Autoscrolling-the-selected-segment-item.md @@ -1,21 +1,20 @@ --- layout: post -title: Auto scrolling the Syncfusion® segmented control for Xamarin.Android -description: Learn how to auto scroll the selected index in the segmented control +title: Auto-scrolling the Syncfusion® Segmented Control for Xamarin.Android +description: Learn how to auto-scroll to the selected index in the Segmented Control platform: Xamarin.Android control: SegmentedControl documentation: ug --- -# Autoscrolling the selected segment item +# Auto-scrolling the Selected Segment Item -Auto scrolling for selected item change can be enabled by setting the value of [`AutoScrollSelectedItem`]() property to true. You can set the scroll position of segment item using the [`ScrollToPosition`]() property. The default value for [`AutoScrollSelectedItem`]() is false, and the default value for [`ScrollToPosition`]() is [`MakeVisible`](). The following options are available in [`ScrollToPosition`](): - -* [`MakeVisible`]() - Scrolls to the selected segment item to make it visible in the control. If the item is already visible, scrolling will not occur. -* [`Start`]() - Scrolls to the selected segment item at the start of the control. -* [`Center`]() - Scrolls to the selected segment item at the center of the control. -* [`End`]() - Scrolls to selected segment item at the end of the control. +Auto-scrolling for selected item changes can be enabled by setting the [`AutoScrollSelectedItem`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfSegmentedControl.html#Syncfusion_Android_Buttons_SfSegmentedControl_AutoScrollSelectedItem) property to `true`. You can control the scroll position of the segment item using the [`ScrollToPosition`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfSegmentedControl.html#Syncfusion_Android_Buttons_SfSegmentedControl_ScrollToPosition) property. The default value for [`AutoScrollSelectedItem`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfSegmentedControl.html#Syncfusion_Android_Buttons_SfSegmentedControl_AutoScrollSelectedItem) is `false`, and the default value for [`ScrollToPosition`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfSegmentedControl.html#Syncfusion_Android_Buttons_SfSegmentedControl_ScrollToPosition) is [`MakeVisible`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.ScrollToPosition.html#Syncfusion_Android_Buttons_ScrollToPosition_MakeVisible). The following options are available for [`ScrollToPosition`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.SfSegmentedControl.html#Syncfusion_Android_Buttons_SfSegmentedControl_ScrollToPosition): +* [`MakeVisible`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.ScrollToPosition.html#Syncfusion_Android_Buttons_ScrollToPosition_MakeVisible) - Scrolls to the selected segment item to make it visible in the control. If the item is already visible, scrolling will not occur. +* [`Start`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.ScrollToPosition.html#Syncfusion_Android_Buttons_ScrollToPosition_Start) - Scrolls to position the selected segment item at the start of the control. +* [`Center`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.ScrollToPosition.html#Syncfusion_Android_Buttons_ScrollToPosition_Center) - Scrolls to position the selected segment item at the center of the control. +* [`End`](https://help.syncfusion.com/cr/xamarin-android/Syncfusion.Android.Buttons.ScrollToPosition.html#Syncfusion_Android_Buttons_ScrollToPosition_End) - Scrolls to position the selected segment item at the end of the control. {% tabs %} {% highlight c# %} diff --git a/xamarin-android/SfTabView/CenterButtonSettings.md b/xamarin-android/SfTabView/CenterButtonSettings.md index 217e1c72..d27b4d20 100644 --- a/xamarin-android/SfTabView/CenterButtonSettings.md +++ b/xamarin-android/SfTabView/CenterButtonSettings.md @@ -9,8 +9,9 @@ documentation: ug # CenterButtonSettings -This section explains on how to create and customize The Xamarin.Android SfTabView CenterButton. To enable CenterButton we need to set the `OverFlowMode` of Xamarin.Android SfTabView as `CenterButton`. +This section explains how to create and customize the CenterButton in the Xamarin.Android SfTabView control. The CenterButton provides a prominent action button positioned in the center of the tab bar, commonly used for primary actions like creating new content or accessing frequently used features. +To enable the CenterButton, you need to set the `OverflowMode` property of the SfTabView to `CenterButton`. {% tabs %} {% highlight C# %} @@ -30,7 +31,7 @@ protected override void OnCreate(Bundle savedInstanceState) ## Customize CenterButtonSettings -We can customize the CenterButton by using the properties of `CenterButtonSetting`. Following are the some properties that are used to customize the view of CenterButton `BackgroundColor`, `BorderColor`, `BorderThickness`, `Height`, `Title`, `TitleFontColor`, `TitleFontSize`, `TitleFontStyle`, `Width`. +You can customize the appearance of the CenterButton using the properties available in `CenterButtonSettings`. The following properties allow you to modify the visual aspects of the CenterButton: `BackgroundColor`, `BorderColor`, `BorderThickness`, `Height`, `Title`, `TitleFontColor`, `TitleFontSize`, `TitleFontStyle`, and `Width`. {% tabs %} @@ -114,4 +115,4 @@ private void Image_Click(object sender, System.EventArgs e) ![CenterButton](images/Center-Button/Center_Button_Customization.png) -Please Find the sample from this [link](http://www.syncfusion.com/downloads/support/directtrac/general/ze/TabView_CenterButtonCustomizatin1937817286.zip) \ No newline at end of file +Please Find the sample from this [link](http://www.syncfusion.com/downloads/support/directtrac/general/ze/TabView_CenterButtonCustomizatin1937817286.zip) diff --git a/xamarin-android/SfTabView/Custom-Header.md b/xamarin-android/SfTabView/Custom-Header.md index 93ed1af5..6febf446 100644 --- a/xamarin-android/SfTabView/Custom-Header.md +++ b/xamarin-android/SfTabView/Custom-Header.md @@ -1,7 +1,7 @@ --- layout: post -title: Custom Header -description: Custom Header in Syncfusion® TabView control for Xamarin.Android platform +title: Custom Header +description: Learn how to create and customize header content in Syncfusion® TabView control for Xamarin.Android platform platform: Xamarin.Android control: TabView documentation: ug @@ -43,3 +43,4 @@ tabView.SelectedIndex = 0; {% endhighlight %} + diff --git a/xamarin-android/SfTabView/Display-Type.md b/xamarin-android/SfTabView/Display-Type.md index 8bfda5f7..3aa9f136 100644 --- a/xamarin-android/SfTabView/Display-Type.md +++ b/xamarin-android/SfTabView/Display-Type.md @@ -9,17 +9,16 @@ documentation: ug # Display Type -Tab view will display the title of each tab item by default. It can be changed to any of the below type. +The TabView displays the title of each tab item by default. This can be changed to any of the following types: -* Text only. -* Image only. -* Image with text. -* No header. +* Text only +* Image only +* Image with text +* No header -![](images/Display-Type/xamarin_android_tabstyle01.png) +![TabView Display Types](images/Display-Type/xamarin_android_tabstyle01.png) - -It can be changed by settings the `DisplayMode` property of `SfTabView`. +The display type can be changed by setting the `DisplayMode` property of `SfTabView`. {% tabs %} @@ -31,13 +30,13 @@ tabView.DisplayMode = TabDisplayMode.ImageWithText; {% endtabs %} -`No header` can be used when header is not needed for the tab view control, so content space will be occupied in the entire available height. +The `No header` option can be used when a header is not needed for the TabView control, allowing the content to occupy the entire available height. N> Image appearance in the header can be achieved through font icons. ## How to change the selection color for text and font icons? -Selected index can be differentiated by setting `SelectionColor` property of `SfTabItem`. +The selected tab can be highlighted by setting the `SelectionColor` property of `SfTabItem`. {% tabs %} diff --git a/xamarin-android/SfTabView/Getting-Started.md b/xamarin-android/SfTabView/Getting-Started.md index e02e847f..60e5b243 100755 --- a/xamarin-android/SfTabView/Getting-Started.md +++ b/xamarin-android/SfTabView/Getting-Started.md @@ -2,27 +2,26 @@ layout: post title: Getting Started with Syncfusion® TabView control for Xamarin.Android description: A quick tour to initial users about getting started page on Syncfusion® TabView control for Xamarin.Android platform -platform: xamarin.android +platform: Xamarin.Android control: TabView documentation: ug --- # Getting Started with Syncfusion® TabView control for Xamarin.Android -This section provides a quick overview for working with the tab view control for Xamarin.Android. Walk through the entire process of creating a real-world application with tab view. +This section provides a quick overview for working with the TabView control for Xamarin.Android. This guide walks you through the entire process of creating a real-world application with TabView. ## Assembly deployment -After installing Essential Studio® for Xamarin, find all the required assemblies in the installation folders, -{Syncfusion Essential Studio Installed location}\Essential Studio\16.1.0.24\Xamarin\lib -Eg: C:\Program Files (x86)\Syncfusion\Essential Studio\16.1.0.24\Xamarin\lib +After installing Essential Studio® for Xamarin, you can find all the required assemblies in the installation folders: +**Installation Path:** {Syncfusion Essential Studio Installed location}\Essential Studio\16.1.0.24\Xamarin\lib +Example: C:\Program Files (x86)\Syncfusion\Essential Studio\16.1.0.24\Xamarin\lib -N> Assemblies can be found in unzipped package location in Mac. +N> Assemblies can be found in the unzipped package location on Mac. +## TabView for Xamarin.Android -## Tab View for Xamarin.Android - -The following list of assemblies should be added as reference from the lib folder to use the tab view. +The following assemblies should be added as references from the lib folder to use the TabView:
@@ -35,21 +34,21 @@ The following list of assemblies should be added as reference from the lib folde
-### Create a simple tab view +### Create a simple TabView -This section explains how to create a tab view and configure it. This is how the final output will look like in Android devices. +This section explains how to create a TabView and configure it. The following image shows how the final output will appear on Android devices: -![simple tab view](images/Getting-Started/xamarin_android_tabview.png) +![Simple TabView](images/Getting-Started/xamarin_android_tabview.png) ## Creating the project -Create a new BlankApp (Android) application in Xamarin Studio or Visual Studio. +Create a new BlankApp (Android) application in Xamarin Studio or Visual Studio. ## Adding SfTabView in Xamarin.Android -Add the required assembly reference to the project as discussed in the Assembly deployment section. +Add the required assembly reference to the project as discussed in the Assembly deployment section. -Import the control namespace as +Import the control namespace: {% tabs %} @@ -61,7 +60,7 @@ using Syncfusion.Android.TabView; {% endtabs %} -Set the tab view control as content view in the `OnCreate` method. +Set the TabView control as the content view in the `OnCreate` method: {% tabs %} @@ -80,7 +79,7 @@ Set the tab view control as content view in the `OnCreate` method. ## Adding Tab items -Tab items can be configured in tab view through the Items property of `SfTabView`, where it holds collection of `SfTabItem` through `TabItemsCollection` +Tab items can be configured in TabView through the `Items` property of `SfTabView`, which holds a collection of `SfTabItem` through `TabItemsCollection`: {% tabs %} @@ -120,7 +119,7 @@ SetContentView(tabView); ## Share the header space equally -In order to share the header space equally for the , we can set the number of tabs which can be distributed in the available space though `VisibleHeaderCount` of SfTabView. +To share the header space equally among tabs, you can set the number of tabs that can be distributed in the available space through the `VisibleHeaderCount` property of `SfTabView`: {% tabs %} @@ -132,13 +131,13 @@ tabView.VisibleHeaderCount = 3; {% endtabs %} -That’s it, tab view control is ready. Now we can add the required controls for our application. Here we are adding a `ListView` in the content region. +The TabView control is now ready. You can add the required controls for your application. In the following example, we'll add a `ListView` in the content region. -## Adding List view in the tab view +## Adding ListView in the TabView -## Preparing data +### Preparing data -Create a view model class with ContactsInfo collection property, initialized with required number of data objects. +Create a view model class with a ContactsInfo collection property, initialized with the required number of data objects: {% highlight c# %} @@ -173,9 +172,9 @@ Create a view model class with ContactsInfo collection property, initialized wit {% endhighlight %} -## Binding data to list view +### Binding data to ListView -Create a custom adapter for ListView and customize the appearance of each item by overriding `GetView` method in the inherited class of BaseAdapter. Where the list view can be hosted within the content region of tab item. +Create a custom adapter for ListView and customize the appearance of each item by overriding the `GetView` method in the inherited class of `BaseAdapter`. The ListView can be hosted within the content region of the tab item: {% highlight c# %} @@ -186,8 +185,7 @@ listView.SetAdapter(tabContentListAdapter); {% endhighlight %} - -`TabContentListAdapter` contains `GetView` method for customize the appearance of each item in the listview. +`TabContentListAdapter` contains the `GetView` method to customize the appearance of each item in the ListView: {% highlight c# %} @@ -246,11 +244,11 @@ listView.SetAdapter(tabContentListAdapter); {% endhighlight %} -Similarly, content region for other tabs can be configured in the same way. +Similarly, content regions for other tabs can be configured in the same way. ## ContentTransitionDuration -You can set the duration for the TabView content transition by setting `ContentTransitionDuration` property. +You can set the duration for the TabView content transition by setting the `ContentTransitionDuration` property: {% tabs %} @@ -264,4 +262,6 @@ You can set the duration for the TabView content transition by setting `ContentT ## Swiping -Both vertical swiping for the list view and horizontal swiping for the tab view will works by default. If it is not required it can be customized by `EnableSwiping` property of `SfTabView`. +Both vertical swiping for the ListView and horizontal swiping for the TabView work by default. If swiping is not required, it can be customized using the `EnableSwiping` property of `SfTabView`: + + diff --git a/xamarin-android/SfTabView/Handling-of-Overflow-Tabs.md b/xamarin-android/SfTabView/Handling-of-Overflow-Tabs.md index 360c93f8..6c0ec142 100644 --- a/xamarin-android/SfTabView/Handling-of-Overflow-Tabs.md +++ b/xamarin-android/SfTabView/Handling-of-Overflow-Tabs.md @@ -1,7 +1,7 @@ --- layout: post -title: Handling OverFlow Tabs -description: Handling of Overflow tabs in Syncfusion® TabView control for Xamarin.Android platform +title: Handling Overflow Tabs +description: Handling of overflow tabs in Syncfusion® TabView control for Xamarin.Android platform platform: Xamarin.Android control: TabView documentation: ug @@ -9,8 +9,7 @@ documentation: ug # Handling overflow tabs -When having large number of tabs, by default scroller will be enabled to view the overflow of headers, in case needed, it can be selected from pop-up by setting `OverflowMode` of `SfTabView` as `DropDown`. - +When you have a large number of tabs in your TabView, the control needs to manage tabs that don't fit within the available header space. By default, a scroller will be enabled to view the overflow headers. If needed, you can change this behavior to display overflow tabs in a dropdown by setting the `OverflowMode` property of `SfTabView` to `DropDown`. {% tabs %} {% highlight C# %} @@ -21,13 +20,14 @@ tabView.OverflowMode = OverflowMode.DropDown; {% endtabs %} -By selection drop-down option for tab view control, there is a button named `“Overflow button”` (or `“More button”`) will be added to the header. When click on this button, it will display a pop-up to navigate the other indices. +## DropDown Mode +By selecting the dropdown option for the TabView control, a button called "Overflow button" (or "More button") will be added to the header. When you click on this button, it will display a popup to navigate to the other tab indices. -N> Pop-up will display the text value only, it will show the title value of the respective tab item. +N> The popup will display text values only. It will show the title value of the respective tab item. ## How to customize the more button? -Appearance of the text can be customized through the APIs available `OverflowButtonSettings` of `SfTabView`. It has APIs to customize both text and font icons available in this button. +The appearance of the overflow button can be customized through the `OverflowButtonSettings` property of `SfTabView`. This property provides APIs to customize both text and font icons for the button. {% tabs %} @@ -44,3 +44,4 @@ tabView.OverflowButtonSettings = overflowButtonSettings; {% endhighlight %} {% endtabs %} + diff --git a/xamarin-android/SfTabView/Overview.md b/xamarin-android/SfTabView/Overview.md index ed4776a5..9d752b69 100755 --- a/xamarin-android/SfTabView/Overview.md +++ b/xamarin-android/SfTabView/Overview.md @@ -1,10 +1,10 @@ --- -layout : post -title : Overview of Syncfusion® TabView control for Xamarin.Android -description : Overview and key features of tabview control -platform : Xamarin.Android -control : SfTabView -documentation : ug +layout: post +title: Overview of Syncfusion® TabView control for Xamarin.Android +description: Overview and key features of SfTabView control for Xamarin.Android platform +platform: Xamarin.Android +control: SfTabView +documentation: ug --- # Overview diff --git a/xamarin-android/SfTabView/Position-of-Header.md b/xamarin-android/SfTabView/Position-of-Header.md index 4646108a..fb68d932 100644 --- a/xamarin-android/SfTabView/Position-of-Header.md +++ b/xamarin-android/SfTabView/Position-of-Header.md @@ -1,13 +1,13 @@ --- layout: post -title: Positioning of header +title: Positioning of Header description: Positioning of header in Syncfusion® TabView control for Xamarin.Android platform platform: Xamarin.Android control: TabView documentation: ug --- -## Positioning of header +# Positioning of Header Tab headers can be positioned either above the content or below the content, it can be done by setting TabHeaderPosition property of SfTabView. diff --git a/xamarin-android/SfTabView/Selection-Changed.md b/xamarin-android/SfTabView/Selection-Changed.md index b2abea01..1d44d274 100644 --- a/xamarin-android/SfTabView/Selection-Changed.md +++ b/xamarin-android/SfTabView/Selection-Changed.md @@ -17,7 +17,7 @@ When selection changed due to swiping or by dynamically setting the `SelectedInd tabView.SelectionChanged += SfTabView_SelectionChanged; -// Raised when selected index changed +// Event handler for selection changes private void SfTabView_SelectionChanged(object sender, SelectionChangedEventArgs e) { var selectedIndex = e.Index; diff --git a/xamarin-android/SfTabView/Selection-Indicator.md b/xamarin-android/SfTabView/Selection-Indicator.md index f2395410..c9f1cd40 100644 --- a/xamarin-android/SfTabView/Selection-Indicator.md +++ b/xamarin-android/SfTabView/Selection-Indicator.md @@ -7,15 +7,17 @@ control: TabView documentation: ug --- -# Selection Indicator strip in Xamarin.Android TabView +# Selection Indicator in Xamarin.Android TabView -Selection indicator strip can be used to indicate the selected index of the tab view control. It can be customized with the built in APIs available in `SelectionIndicatorSettings` of `SfTabView`. +The selection indicator is a visual element that highlights the currently selected tab in the TabView control. This indicator provides clear visual feedback to users about which tab is active, enhancing the overall user experience and navigation clarity. +The selection indicator can be extensively customized using the built-in APIs available in the `SelectionIndicatorSettings` property of `SfTabView`. ![Xamarin.Android TabView Selection Indicator](images/Selection-Indicator/xamarin_android_tabstyle02.png) -Selection indicator can be positioned below the title or above the title or else it can be filled in the entire selected header space. +## Basic Configuration +To customize the selection indicator, create an instance of `SelectionIndicatorSettings` and configure its properties: {% tabs %} {% highlight C# %} diff --git a/xamarin-android/SfTabView/TabItems.md b/xamarin-android/SfTabView/TabItems.md index a1159280..ad889083 100644 --- a/xamarin-android/SfTabView/TabItems.md +++ b/xamarin-android/SfTabView/TabItems.md @@ -9,7 +9,8 @@ documentation: ug # Tab Items -Tab items can be configured in tab view through the Items property of `SfTabView`, where it holds collection of `SfTabItem` through `TabItemsCollection` +Tab items are the individual tabs within the TabView control that contain both the header (title/icon) and the associated content. Each tab item represents a distinct section or view in your application, allowing users to navigate between different content areas seamlessly. +Tab items can be configured in the TabView through the `Items` property of `SfTabView`, which holds a collection of `SfTabItem` objects through `TabItemsCollection`. {% tabs %} diff --git a/xamarin-android/SfTabView/TabView-events.md b/xamarin-android/SfTabView/TabView-events.md index 951dfb3a..646a96c5 100644 --- a/xamarin-android/SfTabView/TabView-events.md +++ b/xamarin-android/SfTabView/TabView-events.md @@ -1,16 +1,20 @@ --- layout: post -title: Tapped event for Syncfusion® Essential® SfTabView. -description: Tapped event in TabView control for Xamarin.Android platform +title: TabView Events for Syncfusion® Essential® SfTabView +description: Events in TabView control for Xamarin.Android platform platform: Xamarin.Android control: TabView documentation: ug --- -# TabItemTapped +# TabView Events -Whenever the TabItem is tapped, the `TabItemTapped` event will occur. Using this event, you can Modify the selected Tab Item properties. +The SfTabView control provides several events that allow you to respond to user interactions and control lifecycle changes. These events enable you to create dynamic, responsive tabbed interfaces that can react to user behavior and implement custom logic. +## TabItemTapped Event +The `TabItemTapped` event is triggered when a user taps on a tab header. This event occurs regardless of whether the tapped tab is already selected or not, making it useful for implementing custom behaviors such as refresh actions, analytics tracking, or conditional navigation. + +### Event Handler Setup {% tabs %} {% highlight C# %} @@ -46,4 +50,4 @@ private void TabView_TabItemTapped(object sender, TabItemTappedEventArgs e) {% endtabs %} -![TabItemTapped](images/TabView-Events/TabItemTapped.png) \ No newline at end of file +![TabItemTapped](images/TabView-Events/TabItemTapped.png)