diff --git a/Xamarin/Avatar-view/Content-type.md b/Xamarin/Avatar-view/Content-type.md index bdb41328c..68d0518cb 100644 --- a/Xamarin/Avatar-view/Content-type.md +++ b/Xamarin/Avatar-view/Content-type.md @@ -1,31 +1,27 @@ --- layout: post -title: Various customization in Syncfusion AvatarView control. -description: Learn what are the types in AvatarType and how to set value for the Avatartype in xamarin forms AvatarView. +title: Various Customizations in Syncfusion AvatarView Control +description: Learn about the avatar types available in SfAvatarView and how to configure them in Xamarin.Forms. platform: Xamarin control: SfAvatarView documentation: ug --- -# Content Types in Xamarin Avatar View(SfAvatarView) +# Content Types in Xamarin Avatar View (SfAvatarView) ## Avatar Types -The [`SfAvatarView`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.AvatarView.SfAvatarView.html) control provides the following five different ways to display the view: +The [`SfAvatarView`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.AvatarView.SfAvatarView.html) control offers five different ways to display its content: -* [`Default`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.AvatarView.ContentType.html#Syncfusion_XForms_AvatarView_ContentType_Default) - Adds the default image when initializing without any other source such as image and group. - -* [`AvatarName`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.AvatarView.SfAvatarView.html#Syncfusion_XForms_AvatarView_SfAvatarView_AvatarName) - Set the initial value in [`SfAvatarView`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.AvatarView.SfAvatarView.html). - -* [`Custom`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.AvatarView.ContentType.html#Syncfusion_XForms_AvatarView_ContentType_Custom) - Adds the user custom image in [`SfAvatarView`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.AvatarView.SfAvatarView.html). - -* [`AvatarCharacter`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.AvatarView.ContentType.html#Syncfusion_XForms_AvatarView_ContentType_AvatarCharacter) - Sets the default image in [`SfAvatarView`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.AvatarView.SfAvatarView.html). - -* [`Group`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.AvatarView.ContentType.html#Syncfusion_XForms_AvatarView_ContentType_Group) - Adds maximum three images or initials in a single [`SfAvatarView`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.AvatarView.SfAvatarView.html). +- [`Default`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.AvatarView.ContentType.html#Syncfusion_XForms_AvatarView_ContentType_Default): Provides a default image with no additional source. +- [`AvatarName`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.AvatarView.SfAvatarView.html#Syncfusion_XForms_AvatarView_SfAvatarView_AvatarName): Sets the initial value for display. +- [`Custom`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.AvatarView.ContentType.html#Syncfusion_XForms_AvatarView_ContentType_Custom): Displays a user-provided custom image. +- [`AvatarCharacter`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.AvatarView.ContentType.html#Syncfusion_XForms_AvatarView_ContentType_AvatarCharacter): Uses a preset vector image. +- [`Group`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.AvatarView.ContentType.html#Syncfusion_XForms_AvatarView_ContentType_Group): Combines up to three images or initials within a single view. ## Default -Automatic type avatar view is used for displaying the default vector image when initializing without the initials, custom, or group view types. +The automatic avatar view displays a default vector image when initialized without initials, custom images, or group view types. {% tabs %} @@ -62,21 +58,17 @@ Automatic type avatar view is used for displaying the default vector image when ## Initials -When using the [`SfAvatarType`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Chat.AvatarViewType.html) as initials, you need to set the initial character using the following properties: +To use initials with the [`SfAvatarView`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.AvatarView.SfAvatarView.html), set up the initial character using the following properties: -* [`InitialsType`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.AvatarView.SfAvatarView.html#Syncfusion_XForms_AvatarView_SfAvatarView_InitialsType) - Defines the type of characters to be displayed. -* [`AvatarName`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.AvatarView.SfAvatarView.html#Syncfusion_XForms_AvatarView_SfAvatarView_AvatarName)- Gets or sets the value for the initials type, which displays the text in the avatar view. -* [`InitialsColor`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.AvatarView.SfAvatarView.html#Syncfusion_XForms_AvatarView_SfAvatarView_InitialsColor)- Gets or sets the color of the initial color value that defines color for the initial string. +- [`InitialsType`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.AvatarView.SfAvatarView.html#Syncfusion_XForms_AvatarView_SfAvatarView_InitialsType): Defines the type of initials displayed. +- [`AvatarName`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.AvatarView.SfAvatarView.html#Syncfusion_XForms_AvatarView_SfAvatarView_AvatarName): Gets or sets the initials value. +- [`InitialsColor`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.AvatarView.SfAvatarView.html#Syncfusion_XForms_AvatarView_SfAvatarView_InitialsColor): Sets the initial color value. ### InitialsType -The [`InitialsType`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.AvatarView.SfAvatarView.html#Syncfusion_XForms_AvatarView_SfAvatarView_InitialsType) contains the following two types: - -* [`SingleCharacter`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.AvatarView.InitialsType.html#Syncfusion_XForms_AvatarView_InitialsType_SingleCharacter) -* [`DoubleCharacter`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.AvatarView.InitialsType.html#Syncfusion_XForms_AvatarView_InitialsType_DoubleCharacter) - -You must set the [`AvatarName`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.AvatarView.SfAvatarView.html#Syncfusion_XForms_AvatarView_SfAvatarView_AvatarName) string property for displaying the initial value in the AvatarView. - +The `InitialsType` property provides these options: +- [`SingleCharacter`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.AvatarView.InitialsType.html#Syncfusion_XForms_AvatarView_InitialsType_SingleCharacter) +- [`DoubleCharacter`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.AvatarView.InitialsType.html#Syncfusion_XForms_AvatarView_InitialsType_DoubleCharacter) #### SingleCharacter The [`SingleCharacter`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.AvatarView.InitialsType.html#Syncfusion_XForms_AvatarView_InitialsType_SingleCharacter) is used for displaying the first character in the string you have set in the [`Initials`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.AvatarView.ContentType.html#Syncfusion_XForms_AvatarView_ContentType_Initials) property. @@ -161,13 +153,13 @@ The [`DoubleCharacter`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms ![bordercolor](images/Initial_Double_AvatarView.png) -## Custom image +## Custom Image -You can add a custom user image by setting the [`ImageSource`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.AvatarView.SfAvatarView.html#Syncfusion_XForms_AvatarView_SfAvatarView_ImageSource) property. Refer to this [`documentation`](https://help.syncfusion.com/xamarin/SfAvatarView/getting-started). +Add a custom image using the [`ImageSource`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.AvatarView.SfAvatarView.html#Syncfusion_XForms_AvatarView_SfAvatarView_ImageSource) property. More details can be found in the [documentation](https://help.syncfusion.com/xamarin/SfAvatarView/getting-started). -## Character avatars +## Character Avatars -You can set the default vector images that already present in avatar view by setting the [`AvatarCharacter`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.AvatarView.SfAvatarView.html#Syncfusion_XForms_AvatarView_SfAvatarView_AvatarCharacter) property. +Use preset vector images in avatar view by setting the [`AvatarCharacter`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.AvatarView.SfAvatarView.html#Syncfusion_XForms_AvatarView_SfAvatarView_AvatarCharacter) property. {% tabs %} {% highlight xaml %} @@ -203,10 +195,9 @@ You can set the default vector images that already present in avatar view by set ## GroupView -You can add maximum three images or initials in the same view using a GroupView type. - -Set the [`InitialsMemberPath`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.AvatarView.SfAvatarView.html#Syncfusion_XForms_AvatarView_SfAvatarView_InitialsMemberPath) for displaying the initials in the group view. For image, set the `ImageSourcePath`. The following code sample demonstrates how to add images using the `GroupView` property. +In a GroupView, you can combine up to three images or initials. +Set the [`InitialsMemberPath`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.AvatarView.SfAvatarView.html#Syncfusion_XForms_AvatarView_SfAvatarView_InitialsMemberPath) for initials or `ImageSourcePath` for images. {% tabs %} {% highlight c# %} public class Employee diff --git a/Xamarin/Avatar-view/Getting-Started.md b/Xamarin/Avatar-view/Getting-Started.md index a1c465573..7f16db477 100644 --- a/Xamarin/Avatar-view/Getting-Started.md +++ b/Xamarin/Avatar-view/Getting-Started.md @@ -1,17 +1,16 @@ --- layout: post title: Getting Started with Syncfusion Xamarin.Forms AvatarView -description: This section will explain how to initialize and use Xamarin.Forms SfAvataView control in simple way. -platform: xamarin +description: Learn how to initialize and use the Xamarin.Forms SfAvatarView control easily. +platform: Xamarin control: SfAvatarView documentation: ug --- -# Getting Started With Xamarin AvatarView (SfAvatarView) +# Getting Started with Xamarin AvatarView (SfAvatarView) -## Getting started with SfAvatarView - -This section explains the steps required to work with the [`SfAvatarView`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.AvatarView.SfAvatarView.html) control for Xamarin.Forms. +## Introduction +This section outlines the steps to work with the [`SfAvatarView`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.AvatarView.SfAvatarView.html) control in Xamarin.Forms. ## Assembly deployment diff --git a/Xamarin/Avatar-view/Overview.md b/Xamarin/Avatar-view/Overview.md index 289415f51..80fe43902 100644 --- a/Xamarin/Avatar-view/Overview.md +++ b/Xamarin/Avatar-view/Overview.md @@ -1,23 +1,23 @@ --- layout: post -title: Overview of Syncfusion Avatarview control for Xamarin.Forms -description: A quick go through to learn about the Xamarin.Forms SfAvatarView control and the key features available in it. -platform: xamarin +title: Overview of Syncfusion AvatarView Control for Xamarin.Forms +description: A quick overview of the Xamarin.Forms SfAvatarView control, including key features and customization options. +platform: Xamarin control: SfAvatarView documentation: ug --- # Xamarin Avatar View (SfAvatarView) Overview -The [`SfAvatarView`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.AvatarView.SfAvatarView.html) control for Xamarin.Forms provides a graphical representation of user image that allows you to customize the view by adding image, background color, icon, text, etc. +The [`SfAvatarView`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.AvatarView.SfAvatarView.html) control for Xamarin.Forms provides a graphical representation of a user image. It allows customization by adding an image, background color, icon, text, and more. -![Xamarin.Forms SfAvataraview overview.](images/overview.png) +![Xamarin.Forms SfAvatarView Overview](images/overview.png) -## Key features +## Key Features -* Supports for adding image and initials. -* Customizes the height, width, [`BorderColor`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Border.SfBorder.html#Syncfusion_XForms_Border_SfBorder_BorderColor), [`BackgroundColor`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.AvatarView.SfAvatarView.html#Syncfusion_XForms_AvatarView_SfAvatarView_BackgroundColor), and [`CornerRadius`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.AvatarView.SfAvatarView.html#Syncfusion_XForms_AvatarView_SfAvatarView_CornerRadius) of the view. -* [`AvatarCharacter`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.AvatarView.SfAvatarView.html#Syncfusion_XForms_AvatarView_SfAvatarView_AvatarCharacter): Adds the default vector images. -* `GroupView`: Supports to add maximum three custom images or initials in a single view. -* Supports different types of visual styles. -* Supports `BadgeView` and `GradientBrush`. +- Supports adding images and initials. +- Allows customization of height, width, [`BorderColor`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Border.SfBorder.html#Syncfusion_XForms_Border_SfBorder_BorderColor), [`BackgroundColor`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.AvatarView.SfAvatarView.html#Syncfusion_XForms_AvatarView_SfAvatarView_BackgroundColor), and [`CornerRadius`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.AvatarView.SfAvatarView.html#Syncfusion_XForms_AvatarView_SfAvatarView_CornerRadius) of the view. +- [`AvatarCharacter`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.AvatarView.SfAvatarView.html#Syncfusion_XForms_AvatarView_SfAvatarView_AvatarCharacter): Integrates default vector images. +- `GroupView`: Supports adding up to three custom images or initials in a single view. +- Offers various visual styles. +- Integrates with `BadgeView` and `GradientBrush`. diff --git a/Xamarin/Avatar-view/customization.md b/Xamarin/Avatar-view/customization.md index 7e9bf26a5..3659336f3 100644 --- a/Xamarin/Avatar-view/customization.md +++ b/Xamarin/Avatar-view/customization.md @@ -1,21 +1,21 @@ --- layout: post -title: Customization in Syncfusion AvatarView Xamarin.Forms -description: This section will explain about how to achieve the customization of default View in Xamarin.Forms SfAvatarView. +title: Customization in Syncfusion AvatarView for Xamarin.Forms +description: Discover how to customize the appearance of SfAvatarView in Xamarin.Forms, including color, size adjustments, and more. platform: Xamarin control: AvatarView documentation: ug --- -# Customization in Xamarin Avatar View(SfAvatarView) +# Customization in Xamarin Avatar View (SfAvatarView) -The [`SfAvatarView`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.AvatarView.SfAvatarView.html) control provides options to customize the color and size. The control can be customized using the following properties: +The [`SfAvatarView`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.AvatarView.SfAvatarView.html) control provides versatile options for customizing color and size properties. ## Colors -Color in the [`SfAvatarView`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.AvatarView.SfAvatarView.html) can be customized by the border color, the default background color, and automatic background color. +Customize colors in the [`SfAvatarView`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.AvatarView.SfAvatarView.html) through the border color, default background color, and an automatic background color set. -### Border color +### Border Color The border color is used for setting color to the border of [`SfAvatarView`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.AvatarView.SfAvatarView.html) using the [`BorderColor`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Border.SfBorder.html#Syncfusion_XForms_Border_SfBorder_BorderColor) property. diff --git a/Xamarin/Avatar-view/how-to.md b/Xamarin/Avatar-view/how-to.md index e71cb5275..7e4bc3079 100644 --- a/Xamarin/Avatar-view/how-to.md +++ b/Xamarin/Avatar-view/how-to.md @@ -1,15 +1,15 @@ --- layout: post -title: States in Syncfusion AvatarView control for Xamarin.Forms. -description: This section will explain about how to use the different states that exist in Xamarin.Forms SfAvatarView. +title: States in Syncfusion AvatarView Control for Xamarin.Forms +description: Learn how to use different states in the Xamarin.Forms SfAvatarView, including BadgeView integration for notifications. platform: Xamarin control: AvatarView documentation: ug --- -# How to set badge view to avatar +# How to Set Badge View to Avatar -The [`SfAvatarView`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.AvatarView.SfAvatarView.html) control provides support for [`BadgeView`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.BadgeView.html) to notify users of new or unread messages, notifications, or the status of something. +The [`SfAvatarView`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.AvatarView.SfAvatarView.html) control supports the integration of [`BadgeView`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.BadgeView.html) to notify users of new or unread messages, notifications, or status updates. {% tabs %} @@ -77,4 +77,4 @@ xmlns:badge="clr-namespace:Syncfusion.XForms.BadgeView;assembly=Syncfusion.SfBad ![BadgeView support](images/BadgeView_AvatarView.jpg) -N> The [`SfBadgeView`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.BadgeView.SfBadgeView.html) is available in [`Syncfusion.Xamarin.SfBadgeView`](https://www.nuget.org/packages/Syncfusion.Xamarin.SfBadgeView) from [`nuget.org`](https://www.nuget.org/). To know more about `SfBadgeView` view, refer to this [documentation](https://help.syncfusion.com/xamarin/sfbadgeview/getting-started). +> **Note**: The [`SfBadgeView`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.BadgeView.SfBadgeView.html) is available in the [`Syncfusion.Xamarin.SfBadgeView`](https://www.nuget.org/packages/Syncfusion.Xamarin.SfBadgeView) package from [nuget.org](https://www.nuget.org/). For more information on `SfBadgeView`, refer to the [documentation](https://help.syncfusion.com/xamarin/sfbadgeview/getting-started). diff --git a/Xamarin/Avatar-view/visualstyles.md b/Xamarin/Avatar-view/visualstyles.md index 535c1d1db..03ce7c56b 100644 --- a/Xamarin/Avatar-view/visualstyles.md +++ b/Xamarin/Avatar-view/visualstyles.md @@ -1,38 +1,37 @@ --- layout: post -title: Visual Style in Syncfusion AvatarView Xamarin.Forms. -description: This section will explain about the different visual styles that exist in Xamarin.Forms SfAvatarView. +title: Visual Styles in Syncfusion AvatarView Xamarin.Forms +description: An overview of the different visual styles available in the Xamarin.Forms SfAvatarView control. platform: Xamarin control: AvatarView documentation: ug --- -# Visual Style in Xamarin Avatar View(SfAvatarView) +# Visual Styles in Xamarin Avatar View (SfAvatarView) -## Visual styles in Xamarin Avatar View(SfAvatarView) -The [`SfAvatarView`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.AvatarView.SfAvatarView.html) control supports customization using the following built-in visual styles: +The [`SfAvatarView`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.AvatarView.SfAvatarView.html) control supports customization through several built-in visual styles: -* [`Custom`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.AvatarView.AvatarShape.html#Syncfusion_XForms_AvatarView_AvatarShape_Custom) -* [`Circle`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.AvatarView.AvatarShape.html#Syncfusion_XForms_AvatarView_AvatarShape_Circle) -* [`Square`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.AvatarView.AvatarShape.html#Syncfusion_XForms_AvatarView_AvatarShape_Square) +- [`Custom`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.AvatarView.AvatarShape.html#Syncfusion_XForms_AvatarView_AvatarShape_Custom) +- [`Circle`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.AvatarView.AvatarShape.html#Syncfusion_XForms_AvatarView_AvatarShape_Circle) +- [`Square`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.AvatarView.AvatarShape.html#Syncfusion_XForms_AvatarView_AvatarShape_Square) ## Custom -Custom type allows you to customize the control, where you can handle the size, colors, images, etc. of the control. Refer to this [documentation](https://help.syncfusion.com/xamarin/sfavatarview/customization). +The Custom type enables you to personalize control attributes, such as size, colors, and images. For more information, refer to the [customization documentation](https://help.syncfusion.com/xamarin/sfavatarview/customization). -N> The default visual type is [`Custom`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.AvatarView.AvatarShape.html#Syncfusion_XForms_AvatarView_AvatarShape_Custom). +> **Note**: The default visual style is [`Custom`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.AvatarView.AvatarShape.html#Syncfusion_XForms_AvatarView_AvatarShape_Custom). ## Circle -You can directly set value to the circle in the [`SfAvatarView`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.AvatarView.SfAvatarView.html) using the following styles: +Apply the circle style in the [`SfAvatarView`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.AvatarView.SfAvatarView.html) using the following options: -* ExtraLargeCircle -* LargeCircle -* MediumCircle -* SmallCircle -* ExtraSmallCircle +- ExtraLargeCircle +- LargeCircle +- MediumCircle +- SmallCircle +- ExtraSmallCircle -The following code sample demonstrates how to define visual style of circle AvatarView. +The following code sample demonstrates how to implement the circle visual style in AvatarView. {% tabs %} @@ -210,15 +209,15 @@ The following code sample demonstrates how to define visual style of circle Avat ## Square -You can directly set value to the square in the [`SfAvatarView`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.AvatarView.SfAvatarView.html) using the following styles: +Apply the square style in the [`SfAvatarView`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.AvatarView.SfAvatarView.html) using these options: -* ExtraLargeSquare -* LargeSquare -* MediumSquare -* SmallSquare -* ExtraSmallSquare +- ExtraLargeSquare +- LargeSquare +- MediumSquare +- SmallSquare +- ExtraSmallSquare -The following code sample demonstrates how to define visual style of square AvatarView. +The following code sample demonstrates how to implement the square visual style in AvatarView. {% tabs %} @@ -393,4 +392,4 @@ The following code sample demonstrates how to define visual style of square Avat ![SfAvatarView control with square visual style](images/VisualSquare_AvatarView.png) -The visual style sample is available in the following link: [Sample](https://github.com/SyncfusionExamples/avatarview-visual-style). +Access the visual style sample at the following link: [Sample](https://github.com/SyncfusionExamples/avatarview-visual-style). diff --git a/Xamarin/Range-Slider/Accessibility.md b/Xamarin/Range-Slider/Accessibility.md index 65e0e1cc3..6d5841794 100644 --- a/Xamarin/Range-Slider/Accessibility.md +++ b/Xamarin/Range-Slider/Accessibility.md @@ -1,12 +1,12 @@ --- -layout : post -title: Accessibility in Xamarin Range Slider control | Syncfusion -description: Learn here all about Accessibility support in Syncfusion Xamarin Range Slider (SfRangeSlider) control and more. -platform : Xamarin.Forms -control : SfRangeSlider -documentation : ug +layout: post +title: Accessibility in Xamarin Range Slider Control | Syncfusion +description: Discover how to implement accessibility features in the Syncfusion Xamarin Range Slider (SfRangeSlider) control. +platform: Xamarin.Forms +control: SfRangeSlider +documentation: ug --- # Accessibility in Xamarin Range Slider -[`SfRangeSlider`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html) does not have support for `AutomationId` to access the thumb along track. Instead, you can change the [`RangeStart`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html#Syncfusion_SfRangeSlider_XForms_SfRangeSlider_RangeStart), [`RangeEnd`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html#Syncfusion_SfRangeSlider_XForms_SfRangeSlider_RangeEnd) using the co-ordinates and [`Value`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html#Syncfusion_SfRangeSlider_XForms_SfRangeSlider_Value) with the button click event with its `AutomationId`. \ No newline at end of file +The [`SfRangeSlider`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html) control currently does not support the `AutomationId` property for accessing the slider thumb along the track. However, you can manipulate the [`RangeStart`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html#Syncfusion_SfRangeSlider_XForms_SfRangeSlider_RangeStart), [`RangeEnd`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html#Syncfusion_SfRangeSlider_XForms_SfRangeSlider_RangeEnd), and [`Value`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html#Syncfusion_SfRangeSlider_XForms_SfRangeSlider_Value) properties using coordinates. Additionally, these values can be adjusted through a button click event utilizing its `AutomationId`. diff --git a/Xamarin/Range-Slider/Formatting-String.md b/Xamarin/Range-Slider/Formatting-String.md index 3a825dd05..f54f1272b 100644 --- a/Xamarin/Range-Slider/Formatting-String.md +++ b/Xamarin/Range-Slider/Formatting-String.md @@ -1,19 +1,19 @@ --- layout: post -title: Formatting String in Xamarin Range Slider control | Syncfusion -description: Learn here all about Formatting String support in Syncfusion Xamarin Range Slider (SfRangeSlider) control and more. +title: Formatting Strings in Xamarin Range Slider Control | Syncfusion +description: Discover how to format strings in the Syncfusion Xamarin Range Slider (SfRangeSlider) control. platform: Xamarin control: RangeSlider documentation: ug --- -# Formatting String in Xamarin Range Slider (SfRangeSlider) +# Formatting Strings in Xamarin Range Slider (SfRangeSlider) -The Value label of the [`SfRangeSlider`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html) can be configured to display different formats like currency format, percent format etc. We can also customize the Value label with string formatting. We can customize using [`LabelFormat`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html#Syncfusion_SfRangeSlider_XForms_SfRangeSlider_LabelFormat) property which determines the format specifier by which the display Value has to be formatted. +The value label of the [`SfRangeSlider`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html) can be configured to display various formats, such as currency and percentage. You can customize the value label using string formatting with the [`LabelFormat`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html#Syncfusion_SfRangeSlider_XForms_SfRangeSlider_LabelFormat) property, which specifies the desired format of the displayed value. -## Formatting types +## Available Formatting Types -We have different formatting types such as currency format, exponential format, number format, percentage format etc. We can also add the text with Value using [`LabelFormat`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html#Syncfusion_SfRangeSlider_XForms_SfRangeSlider_LabelFormat) +You can choose from different formatting types, including currency, exponential, number, and percentage formats. Additionally, text can be added to the value using the [`LabelFormat`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html#Syncfusion_SfRangeSlider_XForms_SfRangeSlider_LabelFormat) property. {% tabs %} @@ -51,7 +51,7 @@ this.Content = stack; ## Culture Localization -We have provided the support for changing the [`Culture`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html#Syncfusion_SfRangeSlider_XForms_SfRangeSlider_Culture) when using Currency notation for the formatting type. For this we have to enable Currency format and set the desired culture to be shown. +We have provided the support for changing the [`Culture`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html#Syncfusion_SfRangeSlider_XForms_SfRangeSlider_Culture) when using currency notation for the formatting type. To do this, enable the currency format and set the desired culture. {% tabs %} diff --git a/Xamarin/Range-Slider/Getting-Started.md b/Xamarin/Range-Slider/Getting-Started.md index 68378aa11..b8069bdaf 100644 --- a/Xamarin/Range-Slider/Getting-Started.md +++ b/Xamarin/Range-Slider/Getting-Started.md @@ -1,7 +1,7 @@ --- layout: post -title: Getting Started with Xamarin Range Slider control | Syncfusion -description: Learn here about getting started with Syncfusion Xamarin Range Slider (SfRangeSlider) control, its elements and more. +title: Getting Started with Xamarin Range Slider Control | Syncfusion +description: A comprehensive guide on how to get started with the Syncfusion Xamarin Range Slider (SfRangeSlider) control, including its features and customization options. platform: Xamarin control: RangeSlider documentation: ug @@ -9,23 +9,22 @@ documentation: ug # Getting Started with Xamarin Range Slider (SfRangeSlider) -This section explains you the steps to configure a [Xamarin Range Slider](https://www.syncfusion.com/xamarin-ui-controls/xamarin-range-slider) (SfRangeSlider) control in a real-time scenario and also provides a walk-through on some of the customization features available in [`SfRangeSlider`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html) control. +This guide will walk you through setting up the [Xamarin Range Slider](https://www.syncfusion.com/xamarin-ui-controls/xamarin-range-slider) (SfRangeSlider) control in real-world applications, along with showcasing several customization features available in the [`SfRangeSlider`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html) control. -## Assembly deployment +## Assembly Deployment -After installing [Essential Studio® for Xamarin](https://www.syncfusion.com/downloads/xamarin), you can find all the required assemblies in the installation folders, {Syncfusion Essential Studio Installed location} \Essential Studio\\{Version #}\Xamarin\lib. +After installing [Essential Studio® for Xamarin](https://www.syncfusion.com/downloads/xamarin), all necessary assemblies can be found in the installation folder path: `{Syncfusion Essential Studio Installed location} \Essential Studio\\{Version #}\Xamarin\lib`. E.g.: C:\Program Files (x86) \Syncfusion\Essential Studio\19.1.0.54\Xamarin\lib -N> Assemblies can be found in unzipped package location(Documents/Syncfusion/{Version #}/Xamarin/lib) in Mac. +> **Note**: On Mac, assemblies are located at `Documents/Syncfusion/{Version #}/Xamarin/lib`. -## Adding SfRangeSlider reference +## Adding SfRangeSlider Reference -You can add [`SfRangeSlider`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html) reference using one of the following methods: +You can add a reference to the [`SfRangeSlider`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html) using various methods: -**Method 1: Adding SfRangeSlider reference from nuget.org** - -Syncfusion Xamarin components are available in [nuget.org](https://www.nuget.org/). To add [`SfRangeSlider`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html) to your project, open the [NuGet package](https://help.syncfusion.com/xamarin/visual-studio-integration/nuget-packages) manager in Visual Studio, search for [Syncfusion.Xamarin.SfRangeSlider](https://www.nuget.org/packages/Syncfusion.Xamarin.SfRangeSlider), and then install it. +### Method 1: From nuget.org +Syncfusion Xamarin components are accessible via [nuget.org](https://www.nuget.org/). To add [`SfRangeSlider`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html), open the [NuGet package manager](https://help.syncfusion.com/xamarin/visual-studio-integration/nuget-packages) in Visual Studio, search for [Syncfusion.Xamarin.SfRangeSlider](https://www.nuget.org/packages/Syncfusion.Xamarin.SfRangeSlider), and install it. ![Adding SfRangeSlider reference from nuget.org](images/Adding SfRangeSlider reference.png) diff --git a/Xamarin/Range-Slider/How-To.md b/Xamarin/Range-Slider/How-To.md index d5468013d..1a4a7e2f8 100644 --- a/Xamarin/Range-Slider/How-To.md +++ b/Xamarin/Range-Slider/How-To.md @@ -1,15 +1,15 @@ --- layout: post -title: Events in Syncfusion RangeSlider control for Xamarin.Forms -description: Learn how to populate events in Syncfusion Essential Xamarin RangeSlider Control, its elements, and more. +title: Events in Syncfusion RangeSlider Control for Xamarin.Forms +description: Discover how to handle events in the Syncfusion Essential Xamarin RangeSlider Control, including its elements and functionalities. platform: xamarin control: RangeSlider documentation: ug --- -# How to Perform an Action while Selecting a Value? +# How to Perform an Action While Selecting a Value -[`ValueChanging`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html#Syncfusion_SfRangeSlider_XForms_SfRangeSlider_ValueChanging) event will be triggered when value is changed with single thumb. [`ValueEventArgs`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.ValueEventArgs.html) has [`RangeSlider`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.ValueEventArgs.html#Syncfusion_SfRangeSlider_XForms_ValueEventArgs_RangeSlider) and [`RangeValue`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.ValueEventArgs.html#Syncfusion_SfRangeSlider_XForms_ValueEventArgs_Value) of the control. +The [`ValueChanging`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html#Syncfusion_SfRangeSlider_XForms_SfRangeSlider_ValueChanging) event is triggered when the value changes using a single thumb. The event provides access to [`ValueEventArgs`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.ValueEventArgs.html), which includes the [`RangeSlider`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.ValueEventArgs.html#Syncfusion_SfRangeSlider_XForms_ValueEventArgs_RangeSlider) and [`RangeValue`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.ValueEventArgs.html#Syncfusion_SfRangeSlider_XForms_ValueEventArgs_Value). diff --git a/Xamarin/Range-Slider/Labels-Customization.md b/Xamarin/Range-Slider/Labels-Customization.md index 245a80ef0..7e4ed2a89 100644 --- a/Xamarin/Range-Slider/Labels-Customization.md +++ b/Xamarin/Range-Slider/Labels-Customization.md @@ -1,7 +1,7 @@ --- layout: post -title: Labels Customization in Xamarin Range Slider control | Syncfusion -description: Learn here all about Labels Customization support in Syncfusion Xamarin Range Slider (SfRangeSlider) control and more. +title: Labels Customization in Xamarin Range Slider Control | Syncfusion +description: Learn how to customize labels in the Syncfusion Xamarin Range Slider (SfRangeSlider) control, including visibility, placement, and font adjustments. platform: Xamarin control: RangeSlider documentation: ug @@ -9,13 +9,13 @@ documentation: ug # Labels Customization in Xamarin Range Slider (SfRangeSlider) -[`SfRangeSlider`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html) provides option to show or hide the label and position customization. +The [`SfRangeSlider`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html) offers options to show or hide labels and customize their position. ## Show Value Label -This property allows us to display labels for the ticks. When it sets to true, it displays the label for all the ticks based on the [`ValuePlacement`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html#Syncfusion_SfRangeSlider_XForms_SfRangeSlider_ValuePlacement) property. +This feature allows displaying labels for the ticks. Setting it to true will display labels based on the [`ValuePlacement`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html#Syncfusion_SfRangeSlider_XForms_SfRangeSlider_ValuePlacement) property. -N> The default value of the [`ShowValueLabel`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html#Syncfusion_SfRangeSlider_XForms_SfRangeSlider_ShowValueLabel) property is false. +> **Note**: The default setting for [`ShowValueLabel`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html#Syncfusion_SfRangeSlider_XForms_SfRangeSlider_ShowValueLabel) is false. {% tabs %} @@ -35,7 +35,7 @@ N> The default value of the [`ShowValueLabel`](https://help.syncfusion.com/cr/xa ## Set Custom Label -To display custom labels, [`ShowCustomLabel`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html#Syncfusion_SfRangeSlider_XForms_SfRangeSlider_ShowCustomLabel) property should be set to true and need to populate the [`CustomLabels`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html#Syncfusion_SfRangeSlider_XForms_SfRangeSlider_CustomLabels) property with observable collection of items by specifying the custom labels for corresponding values. +To enable custom labels, set the [`ShowCustomLabel`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html#Syncfusion_SfRangeSlider_XForms_SfRangeSlider_ShowCustomLabel) property to true and populate the [`CustomLabels`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html#Syncfusion_SfRangeSlider_XForms_SfRangeSlider_CustomLabels) with an observable collection specifying the labels for corresponding values. {% tabs %} @@ -64,19 +64,14 @@ public RangeSliderPage () {% endtabs %} -![SfRangeSlider rendererd in vertical orientation with custom label in Xamarin.Forms](images/customLabel.png) - +![SfRangeSlider rendered in vertical orientation with custom label in Xamarin.Forms](images/customLabel.png) ## Value Placement -The [`ValuePlacement`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html#Syncfusion_SfRangeSlider_XForms_SfRangeSlider_ValuePlacement) property describes the position of the [`Value`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html#Syncfusion_SfRangeSlider_XForms_SfRangeSlider_Value) respective to ticks. - -Available options for this property are: - -* [`BottomRight`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.ValuePlacement.html#Syncfusion_SfRangeSlider_XForms_ValuePlacement_BottomRight) - -* [`TopLeft`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.ValuePlacement.html#Syncfusion_SfRangeSlider_XForms_ValuePlacement_TopLeft) +The [`ValuePlacement`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html#Syncfusion_SfRangeSlider_XForms_SfRangeSlider_ValuePlacement) property determines the label position relative to the ticks. Options include: +- [`BottomRight`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.ValuePlacement.html#Syncfusion_SfRangeSlider_XForms_ValuePlacement_BottomRight) +- [`TopLeft`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.ValuePlacement.html#Syncfusion_SfRangeSlider_XForms_ValuePlacement_TopLeft) {% tabs %} {% highlight xaml %} @@ -253,3 +248,4 @@ The [`LabelColor`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlid {% endtabs %} ![Label in SfRangeSlider in Xamarin.Forms](images/LabelColor.jpg) + diff --git a/Xamarin/Range-Slider/Orientation.md b/Xamarin/Range-Slider/Orientation.md index a8175f406..0b68922c7 100644 --- a/Xamarin/Range-Slider/Orientation.md +++ b/Xamarin/Range-Slider/Orientation.md @@ -1,7 +1,7 @@ --- layout: post -title: Orientation in Xamarin Range Slider control | Syncfusion -description: Learn here all about Orientation support in Syncfusion Xamarin Range Slider (SfRangeSlider) control and more. +title: Orientation in Xamarin Range Slider Control | Syncfusion +description: Discover the orientation settings for the Syncfusion Xamarin Range Slider (SfRangeSlider) control, enabling horizontal and vertical slider configurations. platform: Xamarin control: SfRangeSlider documentation: ug @@ -9,11 +9,11 @@ documentation: ug # Orientation in Xamarin Range Slider (SfRangeSlider) -[`SfRangeSlider`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html) provides options to display values and slider to slide either horizontally or vertically. +The [`SfRangeSlider`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html) control allows you to configure the slider to move either horizontally or vertically. -N> The default option is [`Vertical`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.Orientation.html#Syncfusion_SfRangeSlider_XForms_Orientation_Vertical). +> **Note**: The default orientation is set to [`Vertical`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.Orientation.html#Syncfusion_SfRangeSlider_XForms_Orientation_Vertical). -## Horizontal +## Horizontal Orientation {% tabs %} @@ -58,10 +58,9 @@ namespace GettingStarted {% endtabs %} -![Horizantal image](images/RangeSlider-Horizontal.png) - -## Vertical +![Horizontal orientation of SfRangeSlider in Xamarin.Forms](images/RangeSlider-Horizontal.png) +## Vertical Orientation {% tabs %} {% highlight xaml %} @@ -105,6 +104,4 @@ namespace GettingStarted {% endtabs %} -![Vertical image](images/RangeSlider-Vertical.png) - - +![Vertical orientation of SfRangeSlider in Xamarin.Forms](images/RangeSlider-Vertical.png) diff --git a/Xamarin/Range-Slider/Overview.md b/Xamarin/Range-Slider/Overview.md index 8e43d59a6..dbf16406c 100644 --- a/Xamarin/Range-Slider/Overview.md +++ b/Xamarin/Range-Slider/Overview.md @@ -1,7 +1,7 @@ --- layout: post -title: About Xamarin Range Slider control | Syncfusion -description: Learn here all about introduction of Syncfusion Xamarin Range Slider (SfRangeSlider) control, its elements and more. +title: About Xamarin Range Slider Control | Syncfusion +description: Discover the features and capabilities of the Syncfusion Xamarin Range Slider (SfRangeSlider) control along with its elements. platform: Xamarin control: RangeSlider documentation: ug @@ -9,16 +9,13 @@ documentation: ug # Xamarin Range Slider (SfRangeSlider) Overview -The Range Slider control for Xamarin.Forms 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 Range Slider control for Xamarin.Forms enables you to select a range of values within defined minimum and maximum limits. Users can adjust the range by sliding the thumb along the track. -![RangeSlider OverView](images/overview.png) +![RangeSlider Overview](images/overview.png) -## Key features +## Key Features -* Provides support to select values as a range. -  -* Restricts values to choose within a minimum and maximum constraints. -  -* 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 +* Allows the selection of values as a range. +* Restricts values to conform within specified minimum and maximum constraints. +* Supports customizable tick intervals in a uniform pattern. +* Offers user-friendly customization options for ticks and labels. diff --git a/Xamarin/Range-Slider/Range.md b/Xamarin/Range-Slider/Range.md index 4e80a1314..f8f81cc2d 100644 --- a/Xamarin/Range-Slider/Range.md +++ b/Xamarin/Range-Slider/Range.md @@ -1,7 +1,7 @@ --- layout: post -title: Range in Xamarin Range Slider control | Syncfusion -description: Learn here all about Range support in Syncfusion Xamarin Range Slider (SfRangeSlider) control and more. +title: Range in Xamarin Range Slider Control | Syncfusion +description: Learn about range selection support in the Syncfusion Xamarin Range Slider (SfRangeSlider) control and its functionalities. platform: Xamarin control: RangeSlider documentation: ug @@ -9,14 +9,13 @@ documentation: ug # Range in Xamarin Range Slider (SfRangeSlider) -The [`SfRangeSlider`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html) control supports to select range of value by using two Thumbs. +The [`SfRangeSlider`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html) control supports selecting a range of values using two thumbs. ## Set Show Range -The [`ShowRange`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html#Syncfusion_SfRangeSlider_XForms_SfRangeSlider_ShowRange) property should be set to true for displaying two thumbs in track with range of values. - -N> When this property is set to false, single thumb is displayed without any range +Configure the [`ShowRange`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html#Syncfusion_SfRangeSlider_XForms_SfRangeSlider_ShowRange) property to true to display two thumbs on the track representing a range of values. +> **Note**: Setting this property to false displays a single thumb without the range. {% tabs %} {% highlight xaml %} @@ -33,14 +32,13 @@ N> When this property is set to false, single thumb is displayed without any ran {% endtabs %} +## Set Range Values -## Set Range values - -This section explains about setting Range start and end value. +This section explains how to set the start and end values of the range. ### RangeStart -Gets and sets the start value of the range. +Get and set the starting value of the range. {% tabs %} @@ -60,7 +58,7 @@ Gets and sets the start value of the range. ### RangeEnd -Gets and sets the end value of the range. +Get and set the ending value of the range. {% tabs %} @@ -78,19 +76,19 @@ Gets and sets the end value of the range. {% endtabs %} -## ValueChangeMode +## Value Change Mode -The [`ValueChangeMode`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.ValueChangeMode.html) property changes the value based on the touch of the [`SfRangeSlider`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html) control. It consists of the following two types +The [`ValueChangeMode`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.ValueChangeMode.html) property alters the slider's value based on interaction with the [`SfRangeSlider`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html) control. There are two modes: -* [`Default`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.ValueChangeMode.html#Syncfusion_SfRangeSlider_XForms_ValueChangeMode_Default) -* [`OnThumbPress`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.ValueChangeMode.html#Syncfusion_SfRangeSlider_XForms_ValueChangeMode_OnThumb) +- [`Default`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.ValueChangeMode.html#Syncfusion_SfRangeSlider_XForms_ValueChangeMode_Default) +- [`OnThumbPress`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.ValueChangeMode.html#Syncfusion_SfRangeSlider_XForms_ValueChangeMode_OnThumb) -N> The default value of the [`ValueChangeMode`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.ValueChangeMode.html) property is [`Default`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.ValueChangeMode.html#Syncfusion_SfRangeSlider_XForms_ValueChangeMode_Default). +> **Note**: The default setting is [`Default`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.ValueChangeMode.html#Syncfusion_SfRangeSlider_XForms_ValueChangeMode_Default). ### Default -The value is updated when you touch inside the control. +The value updates when touching inside the control. {% tabs %} @@ -110,7 +108,7 @@ The value is updated when you touch inside the control. ### OnThumb -The value is updated when you touch or move the thumb/knob. +The value updates when touching or moving the thumb/knob. {% tabs %} @@ -131,7 +129,7 @@ The value is updated when you touch or move the thumb/knob. ## Value -Gets or sets the range value, which ranges between [`Minimum`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html#Syncfusion_SfRangeSlider_XForms_SfRangeSlider_Minimum) and [`Maximum`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html#Syncfusion_SfRangeSlider_XForms_SfRangeSlider_Maximum). The default value of RangeSlider is 0. +Get or set the range value, which must be between the specified [`Minimum`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html#Syncfusion_SfRangeSlider_XForms_SfRangeSlider_Minimum) and [`Maximum`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html#Syncfusion_SfRangeSlider_XForms_SfRangeSlider_Maximum) limits. The default value is 0. {% tabs %} @@ -151,10 +149,9 @@ Gets or sets the range value, which ranges between [`Minimum`](https://help.sync ![Range value in SfRangeSlider in Xamarin.Forms](images/Value.jpg) +## Allow Drag Range -## Allow drag range. - -Enable or disable the drag options to change a value of the ranges by using the [`AllowDragRange`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html#Syncfusion_SfRangeSlider_XForms_SfRangeSlider_AllowDragRange) property. +Enable or disable drag options to adjust range values using the [`AllowDragRange`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html#Syncfusion_SfRangeSlider_XForms_SfRangeSlider_AllowDragRange) property. {% tabs %} diff --git a/Xamarin/Range-Slider/Selection-Value-Configuration.md b/Xamarin/Range-Slider/Selection-Value-Configuration.md index 0edfb141c..cdfc7a096 100644 --- a/Xamarin/Range-Slider/Selection-Value-Configuration.md +++ b/Xamarin/Range-Slider/Selection-Value-Configuration.md @@ -1,19 +1,19 @@ --- layout: post -title: Selection Value configuration in Xamarin Range Slider | Syncfusion -description: Learn here all about Selection Value configuration support in Syncfusion Xamarin Range Slider (SfRangeSlider) control and more. +title: Selection Value Configuration in Xamarin Range Slider | Syncfusion +description: Explore the options for configuring selection values in the Syncfusion Xamarin Range Slider (SfRangeSlider) control. platform: Xamarin control: RangeSlider documentation: ug --- -# Selection Value configuration in Xamarin Range Slider (SfRangeSlider) +# Selection Value Configuration in Xamarin Range Slider (SfRangeSlider) -Various customization options are available to configure the selection value in [`SfRangeSlider`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html). +Various customization options are available for configuring selection values in [`SfRangeSlider`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html). ## Set Minimum Value -Gets or sets the minimum possible value of the range. The thumb could not move beyond that value. +Set the minimum possible value for the range. The thumb cannot move below this value. {% tabs %} @@ -33,7 +33,7 @@ Gets or sets the minimum possible value of the range. The thumb could not move b ## Set Maximum Value -Gets or sets the maximum possible value of the range. The thumb could not move after that value. +Set the maximum possible value for the range. The thumb cannot move beyond this value. {% tabs %} @@ -53,7 +53,7 @@ Gets or sets the maximum possible value of the range. The thumb could not move a ## Set Tick Frequency -The [`TickFrequency`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html#Syncfusion_SfRangeSlider_XForms_SfRangeSlider_TickFrequency) property is used to decide the number of ticks to be displayed along the track based on [`Minimum`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html#Syncfusion_SfRangeSlider_XForms_SfRangeSlider_Minimum) and [`Maximum`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html#Syncfusion_SfRangeSlider_XForms_SfRangeSlider_Maximum) values. +The [`TickFrequency`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html#Syncfusion_SfRangeSlider_XForms_SfRangeSlider_TickFrequency) property determines the interval of ticks displayed along the track between the [`Minimum`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html#Syncfusion_SfRangeSlider_XForms_SfRangeSlider_Minimum) and [`Maximum`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html#Syncfusion_SfRangeSlider_XForms_SfRangeSlider_Maximum) values. {% tabs %} @@ -71,11 +71,11 @@ The [`TickFrequency`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeS {% endtabs %} -N> When the [`SnapsTo`]([`SfRangeSlider`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html)) property is set to `Ticks`, the [`TickFrequency`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html#Syncfusion_SfRangeSlider_XForms_SfRangeSlider_TickFrequency) is used to specify the interval between snap points. +> **Note**: The [`TickFrequency`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html#Syncfusion_SfRangeSlider_XForms_SfRangeSlider_TickFrequency) sets intervals when [`SnapsTo`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html#Syncfusion_SfRangeSlider_XForms_SfRangeSlider_SnapsTo) is set to `Ticks`. -## Set Interval between Snap Points. +## Set Interval Between Snap Points -The [`StepFrequency`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html#Syncfusion_SfRangeSlider_XForms_SfRangeSlider_StepFrequency) property is used to specify the interval between snap points. +The [`StepFrequency`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html#Syncfusion_SfRangeSlider_XForms_SfRangeSlider_StepFrequency) property defines the interval between snap points. {% tabs %} @@ -93,19 +93,17 @@ The [`StepFrequency`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeS {% endtabs %} -N> When the [`SnapsTo`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html#Syncfusion_SfRangeSlider_XForms_SfRangeSlider_SnapsTo) property is set to [`StepValues`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SnapsTo.html#Syncfusion_SfRangeSlider_XForms_SnapsTo_StepValues), the [`StepFrequency`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html#Syncfusion_SfRangeSlider_XForms_SfRangeSlider_StepFrequency) property is enabled. +> **Note**: The [`StepFrequency`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html#Syncfusion_SfRangeSlider_XForms_SfRangeSlider_StepFrequency) is used when [`SnapsTo`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html#Syncfusion_SfRangeSlider_XForms_SfRangeSlider_SnapsTo) is set to [`StepValues`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SnapsTo.html#Syncfusion_SfRangeSlider_XForms_SnapsTo_StepValues). ## Set Snapping Mode -The [`SnapsTo`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html#Syncfusion_SfRangeSlider_XForms_SfRangeSlider_SnapsTo)` property determines whether the RangeSlider snaps to steps or ticks. Available options for this property are +The [`SnapsTo`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html#Syncfusion_SfRangeSlider_XForms_SfRangeSlider_SnapsTo) property controls whether the RangeSlider snaps to steps or ticks. Available options are: -* [`StepValues`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SnapsTo.html#Syncfusion_SfRangeSlider_XForms_SnapsTo_StepValues) - The [`StepFrequency`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html#Syncfusion_SfRangeSlider_XForms_SfRangeSlider_StepFrequency) property will be used to specify the interval between snap points. +- [`StepValues`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SnapsTo.html#Syncfusion_SfRangeSlider_XForms_SnapsTo_StepValues): Uses [`StepFrequency`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html#Syncfusion_SfRangeSlider_XForms_SfRangeSlider_StepFrequency) to specify intervals. +- [`Ticks`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SnapsTo.html#Syncfusion_SfRangeSlider_XForms_SnapsTo_Ticks): Uses [`TickFrequency`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html#Syncfusion_SfRangeSlider_XForms_SfRangeSlider_TickFrequency). +- [`None`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SnapsTo.html#Syncfusion_SfRangeSlider_XForms_SnapsTo_None): The thumb moves independently of set values. -* [`Ticks`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SnapsTo.html#Syncfusion_SfRangeSlider_XForms_SnapsTo_Ticks) - The [`TickFrequency`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html#Syncfusion_SfRangeSlider_XForms_SfRangeSlider_TickFrequency) property will be used to specify the interval between snap points - -* [`None`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SnapsTo.html#Syncfusion_SfRangeSlider_XForms_SnapsTo_None) - The thumb is moved independent of any values. - -N> The default option is [`Ticks`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SnapsTo.html#Syncfusion_SfRangeSlider_XForms_SnapsTo_Ticks). +> **Note**: The default is [`Ticks`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SnapsTo.html#Syncfusion_SfRangeSlider_XForms_SnapsTo_Ticks). {% tabs %} diff --git a/Xamarin/Range-Slider/Ticks-Customization.md b/Xamarin/Range-Slider/Ticks-Customization.md index 550a8f05e..10b4e9b6d 100644 --- a/Xamarin/Range-Slider/Ticks-Customization.md +++ b/Xamarin/Range-Slider/Ticks-Customization.md @@ -1,7 +1,7 @@ --- layout: post -title: Ticks Customization in Xamarin Range Slider control | Syncfusion -description: Learn here all about Ticks Customization support in Syncfusion Xamarin Range Slider (SfRangeSlider) control and more. +title: Ticks Customization in Xamarin Range Slider Control | Syncfusion +description: Discover all about ticks customization support in the Syncfusion Xamarin Range Slider (SfRangeSlider) control. platform: Xamarin control: RangeSlider documentation: ug @@ -9,27 +9,23 @@ documentation: ug # Ticks Customization in Xamarin Range Slider (SfRangeSlider) -Tick marks can be placed along the track in a uniform manner or it's position can also be customized. +Tick marks can be uniformly placed along the track, or you can customize their position according to your needs. -## TickPlacement +## Tick Placement -The [`TickPlacement`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html#Syncfusion_SfRangeSlider_XForms_SfRangeSlider_TickPlacement) property determines where to draw tick marks in relation to the track. Available options for this property are, +The [`TickPlacement`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html#Syncfusion_SfRangeSlider_XForms_SfRangeSlider_TickPlacement) property determines where tick marks will appear relative to the track. Options are: -* [`BottomRight`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.TickPlacement.html#Syncfusion_SfRangeSlider_XForms_TickPlacement_BottomRight) +- [`BottomRight`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.TickPlacement.html#Syncfusion_SfRangeSlider_XForms_TickPlacement_BottomRight) +- [`Inline`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.TickPlacement.html#Syncfusion_SfRangeSlider_XForms_TickPlacement_Inline) +- [`None`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.TickPlacement.html#Syncfusion_SfRangeSlider_XForms_TickPlacement_None) +- [`Outside`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.TickPlacement.html#Syncfusion_SfRangeSlider_XForms_TickPlacement_Outside) +- [`TopLeft`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.TickPlacement.html#Syncfusion_SfRangeSlider_XForms_TickPlacement_TopLeft) -* [`Inline`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.TickPlacement.html#Syncfusion_SfRangeSlider_XForms_TickPlacement_Inline) - -* [`None`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.TickPlacement.html#Syncfusion_SfRangeSlider_XForms_TickPlacement_None) - -* [`Outside`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.TickPlacement.html#Syncfusion_SfRangeSlider_XForms_TickPlacement_Outside) - -* [`TopLeft`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.TickPlacement.html#Syncfusion_SfRangeSlider_XForms_TickPlacement_TopLeft) - -N> The default option is [`Inline`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.TickPlacement.html#Syncfusion_SfRangeSlider_XForms_TickPlacement_Inline). +> **Note**: The default setting is [`Inline`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.TickPlacement.html#Syncfusion_SfRangeSlider_XForms_TickPlacement_Inline). ### BottomRight -Tick marks can be placed either below the track in horizontal orientation or right of the track in vertical orientation. +Place tick marks either below the track in horizontal orientation or to the right of the track in vertical orientation. {% tabs %} @@ -47,11 +43,11 @@ Tick marks can be placed either below the track in horizontal orientation or rig {% endtabs %} -![Tick has been placed at the bottom right of SfRangeSlider in Xamarin.Forms](images/BottomRight.png) +![Tick marks placed at the bottom right on SfRangeSlider in Xamarin.Forms](images/BottomRight.png) ### TopLeft -Tick marks are placed either above the track in horizontal orientation or left of the track in vertical orientation. +Place tick marks either above the track in horizontal orientation or to the left of the track in vertical orientation. {% tabs %} @@ -69,7 +65,7 @@ Tick marks are placed either above the track in horizontal orientation or left o {% endtabs %} -![Tick has been placed at the top left of SfRangeSlider in Xamarin.Forms](images/TopLeft.png) +![Tick marks placed at the top left on SfRangeSlider in Xamarin.Forms](images/TopLeft.png) ### Inline @@ -91,11 +87,11 @@ Tick marks are placed either above the track in horizontal orientation or left o {% endtabs %} -![Tick has been placed on the SfRangeSlider in Xamarin.Forms](images/Inline.png) +![Tick marks placed inline on SfRangeSlider in Xamarin.Forms](images/Inline.png) ### Outside -Tick marks are placed on both sides of the track either in horizontal or vertical orientation. +Place tick marks on both sides of the track for either horizontal or vertical orientation. {% tabs %} @@ -113,11 +109,11 @@ Tick marks are placed on both sides of the track either in horizontal or vertica {% endtabs %} -![Tick has been placed outside of SfRangeSlider in Xamarin.Forms](images/Outside.png) +![Tick marks placed outside of SfRangeSlider in Xamarin.Forms](images/Outside.png) -## Customizing tick color +## Customizing Tick Color -The range slider control provides the [`TickColor`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html#Syncfusion_SfRangeSlider_XForms_SfRangeSlider_TickColor) property to customize the color of ticks in tick bar. +Customize the tick color using the [`TickColor`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html#Syncfusion_SfRangeSlider_XForms_SfRangeSlider_TickColor) property. {% tabs %} @@ -158,4 +154,4 @@ namespace GettingStarted {% endtabs %} -![Tick color customization of SfRangeSlider in Xamarin.Forms](images/TickColor.png) +![Tick color customization on SfRangeSlider in Xamarin.Forms](images/TickColor.png) diff --git a/Xamarin/Range-Slider/ToolTip-Support.md b/Xamarin/Range-Slider/ToolTip-Support.md index f7cfbcedf..1006ae184 100644 --- a/Xamarin/Range-Slider/ToolTip-Support.md +++ b/Xamarin/Range-Slider/ToolTip-Support.md @@ -1,7 +1,7 @@ --- layout: post -title: ToolTip Support in Xamarin Range Slider control | Syncfusion -description: Learn here all about ToolTip Support in Syncfusion Xamarin Range Slider (SfRangeSlider) control and more. +title: ToolTip Support in Xamarin Range Slider Control | Syncfusion +description: Discover ToolTip support in the Syncfusion Xamarin Range Slider (SfRangeSlider) control, including customization and placement options. platform: Xamarin control: RangeSlider documentation: ug @@ -9,11 +9,11 @@ documentation: ug # ToolTip Support in Xamarin Range Slider (SfRangeSlider) -The ToolTip shows the current value based on thumb position. +The ToolTip feature indicates the current value based on the thumb's position. ## Set ToolTip Precision -The [`ToolTipPrecision`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html#Syncfusion_SfRangeSlider_XForms_SfRangeSlider_ToolTipPrecision) property is used to define the precision of the value displayed in the ToolTip. +The [`ToolTipPrecision`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html#Syncfusion_SfRangeSlider_XForms_SfRangeSlider_ToolTipPrecision) property sets the decimal precision of the value displayed in the ToolTip. {% tabs %} @@ -33,7 +33,7 @@ The [`ToolTipPrecision`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRan ## Set ToolTip Placement -The position of the ToolTip in relation to the thumb can be controlled by the [`ToolTipPlacement`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html#Syncfusion_SfRangeSlider_XForms_SfRangeSlider_ToolTipPlacement) property. It has the following options. +Control the ToolTip's position relative to the thumb using the [`ToolTipPlacement`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html#Syncfusion_SfRangeSlider_XForms_SfRangeSlider_ToolTipPlacement) property. Options include: 1. [`BottomRight`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.ToolTipPlacement.html#Syncfusion_SfRangeSlider_XForms_ToolTipPlacement_BottomRight) 2. [`TopLeft`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.ToolTipPlacement.html#Syncfusion_SfRangeSlider_XForms_ToolTipPlacement_TopLeft) @@ -41,7 +41,7 @@ The position of the ToolTip in relation to the thumb can be controlled by the [` ### BottomRight -The ToolTip will be placed either below the Thumb in horizontal orientation or right of the Thumb in vertical orientation. +Position the ToolTip below the thumb in horizontal orientation or to the right in vertical orientation. {% tabs %} @@ -61,7 +61,7 @@ The ToolTip will be placed either below the Thumb in horizontal orientation or r ### TopLeft -the ToolTip will be placed either above the Thumb in horizontal orientation or left of the Thumb in vertical orientation. +Position the ToolTip above the thumb in horizontal orientation or to the left in vertical orientation. {% tabs %} @@ -81,7 +81,7 @@ the ToolTip will be placed either above the Thumb in horizontal orientation or l ### None -ToolTip will be collapsed. +The ToolTip will not be displayed. {% tabs %} @@ -92,17 +92,16 @@ ToolTip will be collapsed. {% endhighlight %} {% highlight c# %} - rangeSlider.ToolTipPlacement = ToolTipPlacement.None; {% endhighlight %} {% endtabs %} -## Tooltip color - -[`TooltipTextColor`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html#Syncfusion_SfRangeSlider_XForms_SfRangeSlider_ToolTipTextColor) - Changes the text color of tooltip. -[`TooltipBackgroundColor`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html#Syncfusion_SfRangeSlider_XForms_SfRangeSlider_ToolTipBackgroundColor) - Changes the background color of tooltip. +## Tooltip Color -![SfRangeSlider Tooltip color Xamarin.Forms](images/Tooltip-color.jpg) +Customize the ToolTip's appearance by modifying the following properties: +- [`TooltipTextColor`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html#Syncfusion_SfRangeSlider_XForms_SfRangeSlider_ToolTipTextColor): Changes the text color. +- [`TooltipBackgroundColor`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html#Syncfusion_SfRangeSlider_XForms_SfRangeSlider_ToolTipBackgroundColor): Changes the background color. +![SfRangeSlider ToolTip color in Xamarin.Forms](images/Tooltip-color.jpg) diff --git a/Xamarin/Range-Slider/Track-Bar-Customization.md b/Xamarin/Range-Slider/Track-Bar-Customization.md index 9a0308161..03c6ed6dc 100644 --- a/Xamarin/Range-Slider/Track-Bar-Customization.md +++ b/Xamarin/Range-Slider/Track-Bar-Customization.md @@ -1,16 +1,16 @@ --- layout: post -title: TrackBar Customization in Xamarin Range Slider control | Syncfusion -description: Learn here all about TrackBar Customization support in Syncfusion Xamarin Range Slider (SfRangeSlider) control and more. +title: TrackBar Customization in Xamarin Range Slider Control | Syncfusion +description: Explore the TrackBar customization options in the Syncfusion Xamarin Range Slider (SfRangeSlider) control. platform: Xamarin control: RangeSlider documentation: ug --- # TrackBar Customization in Xamarin Range Slider (SfRangeSlider) -### Customizing track height +### Customizing Track Height -The thickness of track bar can be customized by setting the [`TrackThickness`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html#Syncfusion_SfRangeSlider_XForms_SfRangeSlider_TrackThickness) property of [`SfRangeSlider`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html). +The thickness of the track bar can be customized by setting the [`TrackThickness`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html#Syncfusion_SfRangeSlider_XForms_SfRangeSlider_TrackThickness) property of the [`SfRangeSlider`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html). {% tabs %} {% highlight xaml %} @@ -54,11 +54,11 @@ namespace TrackCustomization {% endtabs %} -![Installation steps](Track_Customization_Images/TrackThickness.png) +![Track bar thickness customization in SfRangeSlider](Track_Customization_Images/TrackThickness.png) -### Customizing dragged area height +### Customizing Dragged Area Height -The thickness for the selected range or selected portion of track bar can be customized by setting the [`TrackSelectionThickness`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html#Syncfusion_SfRangeSlider_XForms_SfRangeSlider_TrackSelectionThickness) property of [`SfRangeSlider`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html). +The thickness of the selected range or portion of the track bar can be customized by setting the [`TrackSelectionThickness`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html#Syncfusion_SfRangeSlider_XForms_SfRangeSlider_TrackSelectionThickness) property. {% tabs %} @@ -103,11 +103,11 @@ namespace TrackCustomization {% endtabs %} -![Installation steps](Track_Customization_Images/TrackSelectionThickness.png) +![Track selection thickness customization in SfRangeSlider](Track_Customization_Images/TrackSelectionThickness.png) -### Customizing track color +### Customizing Track Color -The color of track bar can be customized by setting the [`TrackColor`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html#Syncfusion_SfRangeSlider_XForms_SfRangeSlider_TrackColor) property of [`SfRangeSlider`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html). +The color of the track bar can be customized using the [`TrackColor`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html#Syncfusion_SfRangeSlider_XForms_SfRangeSlider_TrackColor) property. {% tabs %} @@ -152,11 +152,11 @@ namespace TrackCustomization {% endtabs %} -![Installation steps](Track_Customization_Images/TrackColor.png) +![Track color customization in SfRangeSlider](Track_Customization_Images/TrackColor.png) -### Customizing dragged area color +### Customizing Dragged Area Color -The color for the selected range or selected portion of track bar can be customized by setting the [`TrackSelectionColor`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html#Syncfusion_SfRangeSlider_XForms_SfRangeSlider_TrackSelectionColor) property of [`SfRangeSlider`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html). +Customize the color of the selected range or portion of the track bar by using the [`TrackSelectionColor`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html#Syncfusion_SfRangeSlider_XForms_SfRangeSlider_TrackSelectionColor) property. {% tabs %} @@ -201,11 +201,11 @@ namespace TrackCustomization {% endtabs %} -![Installation steps](Track_Customization_Images/TrackSelectionColor.png) +![Track selection color customization in SfRangeSlider](Track_Customization_Images/TrackSelectionColor.png) -### Customizing knob color +### Customizing Knob Color -The [`KnobColor`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html#Syncfusion_SfRangeSlider_XForms_SfRangeSlider_KnobColor) property is used to change the knob color of [`SfRangeSlider`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html). +The [`KnobColor`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html#Syncfusion_SfRangeSlider_XForms_SfRangeSlider_KnobColor) property allows you to change the knob color of the [`SfRangeSlider`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html). {% tabs %} @@ -223,10 +223,9 @@ The [`KnobColor`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlide {% endtabs %} -### Customizing thumb size - -The [`ThumbSize`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html#Syncfusion_SfRangeSlider_XForms_SfRangeSlider_ThumbSize) property is used to change the thumb size of [`SfRangeSlider`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html). +### Customizing Thumb Size +Change the thumb size using the [`ThumbSize`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRangeSlider.XForms.SfRangeSlider.html#Syncfusion_SfRangeSlider_XForms_SfRangeSlider_ThumbSize) property. {% tabs %} {% highlight xaml %} diff --git a/Xamarin/Rating/Accessibility.md b/Xamarin/Rating/Accessibility.md index 0118c05a6..16001714e 100644 --- a/Xamarin/Rating/Accessibility.md +++ b/Xamarin/Rating/Accessibility.md @@ -1,20 +1,17 @@ --- - -layout : post -title: Accessibility in Xamarin Rating control | Syncfusion -description: Learn here all about Accessibility support in Syncfusion Xamarin Rating (SfRating) control and more. -platform : Xamarin.Forms -control : SfRating -documentation : ug - +layout: post +title: Accessibility in Xamarin Rating Control | Syncfusion +description: Explore how Accessibility is supported in the Syncfusion Xamarin Rating (SfRating) control, with a focus on AutomationId. +platform: Xamarin.Forms +control: SfRating +documentation: ug --- # Accessibility in Xamarin Rating (SfRating) ## AutomationId -The [`SfRating`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRating.XForms.SfRating.html) control has built-in `AutomationId` for inner elements. The `AutomationId` API allows the automation framework to find and interact with the inner elements of the [`SfRating`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRating.XForms.SfRating.html) control. To keep unique AutomationId, these inner elements' AutomationIds are updated based on the control's `AutomationId`. - -For example, if you set SfRating's `AutomationId` as "Feedback" and you select the fourth item, then the automation framework will interact with the SfRating as "Feedback Rating 4". When the rating is added as custom view, the Automation framework will interact with the element's `AutomationId`. +The [`SfRating`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRating.XForms.SfRating.html) control includes built-in `AutomationId` properties for its inner elements. This feature allows the automation framework to effectively identify and interact with these elements within the [`SfRating`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRating.XForms.SfRating.html) control. -N> AutomationId support works only when the precision mode of [`SfRating`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRating.XForms.SfRating.html) is set as [`Standard`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRating.XForms.Precision.html#Syncfusion_SfRating_XForms_Precision_Standard). +Setting a unique `AutomationId` ensures that each element can be distinctly recognized. For instance, if you assign the `AutomationId` "Feedback" to `SfRating` and select the fourth item, the automation framework will interact with the control as "Feedback Rating 4". This is particularly useful when the rating component forms part of a custom view, facilitating interaction through the element's `AutomationId`. +> Note: AutomationId support is active only when the precision mode of [`SfRating`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRating.XForms.SfRating.html) is configured as [`Standard`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRating.XForms.Precision.html#Syncfusion_SfRating_XForms_Precision_Standard). -![AutomationId Image](images/AutomationId.png) +![Example of AutomationID usage in SfRating](images/AutomationId.png) diff --git a/Xamarin/Rating/Add-Custom-Items.md b/Xamarin/Rating/Add-Custom-Items.md index 066571bff..a94a4d956 100644 --- a/Xamarin/Rating/Add-Custom-Items.md +++ b/Xamarin/Rating/Add-Custom-Items.md @@ -1,8 +1,8 @@ --- layout: post -title: Custom View in Xamarin Rating control | Syncfusion -description: Learn here all about Custom View support in Syncfusion Xamarin Rating (SfRating) control, its elements and more. +title: Custom View in Xamarin Rating Control | Syncfusion +description: Discover how to implement custom view support in the Syncfusion Xamarin Rating (SfRating) control and customize its elements. platform: Xamarin control: Rating documentation: ug @@ -11,13 +11,12 @@ documentation: ug # Custom View in Xamarin Rating (SfRating) -[`SfRating`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRating.XForms.SfRating.html) Items control provides support to add custom views. +The [`SfRating`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRating.XForms.SfRating.html) control allows the integration of custom views within its rating items. Custom views enhance the user experience by providing personalized visuals. +> Note: To use custom views on the Xamarin.Forms UWP platform, you need to set the [`ItemCount`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRating.XForms.SfRating.html#Syncfusion_SfRating_XForms_SfRating_ItemCount) property. -N> To use custom views in Xamarin.Forms UWP platform, you need to set [`ItemCount`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRating.XForms.SfRating.html#Syncfusion_SfRating_XForms_SfRating_ItemCount) value. +## Adding SfRating Items -## Add SfRating items - -To customize the view of rating items, create and set custom view as [`SelectedView`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRating.XForms.SfRatingItem.html#Syncfusion_SfRating_XForms_SfRatingItem_SelectedView) and [`UnSelectedView`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRating.XForms.SfRatingItem.html#Syncfusion_SfRating_XForms_SfRatingItem_UnSelectedView) of [`SfRatingItem`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRating.XForms.SfRatingItem.html). Refer to the following code snippet to create a custom view. +To customize the appearance of rating items, you can set custom views as the [`SelectedView`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRating.XForms.SfRatingItem.html#Syncfusion_SfRating_XForms_SfRatingItem_SelectedView) and [`UnSelectedView`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRating.XForms.SfRatingItem.html#Syncfusion_SfRating_XForms_SfRatingItem_UnSelectedView) for each [`SfRatingItem`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRating.XForms.SfRatingItem.html). Here is an example to guide you through the process: {% tabs %} @@ -42,7 +41,7 @@ rating.EnableCustomView = true; {% endtabs %} -## Set selected view +## Setting the Selected View The [`SelectedView`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRating.XForms.SfRatingItem.html#Syncfusion_SfRating_XForms_SfRatingItem_SelectedView) property is used to apply the given [`SelectedView`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRating.XForms.SfRatingItem.html#Syncfusion_SfRating_XForms_SfRatingItem_SelectedView) to selected rating item. @@ -66,7 +65,7 @@ ratingItem.SelectedView = new Image() { Source = "Angry_selected.png", Aspect = {% endtabs %} -## Set unselected view +## Setting the Unselected View The [`UnSelectedView`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRating.XForms.SfRatingItem.html#Syncfusion_SfRating_XForms_SfRatingItem_UnSelectedView) property is used to apply the given [`UnSelectedView`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRating.XForms.SfRatingItem.html#Syncfusion_SfRating_XForms_SfRatingItem_UnSelectedView) to unselected rating item. @@ -90,7 +89,7 @@ ratingItem.UnSelectedView = new Image() { Source = "Angry_Unselected.png", Aspec {% endtabs %} -## Add Items +## Adding and Enabling Custom Items The [`Items`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRating.XForms.SfRating.html#Syncfusion_SfRating_XForms_SfRating_Items) property is used to hold the collection of [`SfRatingItem`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRating.XForms.SfRatingItem.html). @@ -199,7 +198,4 @@ public MainPage() {% endtabs %} -![Add custom view in Xamarin.Forms](images/CustomviewItems.png) - - -![Custom view SfRating](images/CustomviewItems.png) +![Adding custom views in Xamarin.Forms](images/CustomviewItems.png) diff --git a/Xamarin/Rating/Appearance-Customization.md b/Xamarin/Rating/Appearance-Customization.md index 953046e54..f3ec22e5f 100644 --- a/Xamarin/Rating/Appearance-Customization.md +++ b/Xamarin/Rating/Appearance-Customization.md @@ -1,8 +1,8 @@ --- layout: post -title: Appearance Customization in Xamarin Rating control | Syncfusion -description: Learn here all about Appearance Customization support in Syncfusion Xamarin Rating (SfRating) control and more. +title: Appearance Customization in Xamarin Rating Control | Syncfusion +description: Discover how to customize the appearance of the Syncfusion Xamarin Rating (SfRating) control, including item color, stroke width, and stroke color. platform: Xamarin control: Rating documentation: ug @@ -54,10 +54,9 @@ The [`RatedFill`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRating.XFo ![Rated item fill color](images/ratedFill.jpg) -### Unselected Items - -The [`UnRatedFill`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRating.XForms.SfRatingSettings.html#Syncfusion_SfRating_XForms_SfRatingSettings_UnRatedFill) property fills the unrated item with the specified solid color in the [`SfRating`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRating.XForms.SfRating.html) control. +#### Unselected Items +For unrated items, use the [`UnRatedFill`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRating.XForms.SfRatingSettings.html#Syncfusion_SfRating_XForms_SfRatingSettings_UnRatedFill) property. {% tabs %} {% highlight xaml %} @@ -118,10 +117,9 @@ The [`RatedStroke`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRating.X ![Rated item stroke color](images/ratedStroke.jpg) -### Unselected Items - -The [`UnRatedStroke`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRating.XForms.SfRatingSettings.html#Syncfusion_SfRating_XForms_SfRatingSettings_UnRatedStroke) property sets the stroke for the unrated area with the specified solid color in the [`SfRating`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRating.XForms.SfRating.html) control. +#### Unselected Items +The stroke color for unrated portions is set via the [`UnRatedStroke`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRating.XForms.SfRatingSettings.html#Syncfusion_SfRating_XForms_SfRatingSettings_UnRatedStroke) property. {% tabs %} {% highlight xaml %} @@ -182,7 +180,7 @@ The [`RatedStrokeWidth`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRat ![Rated item stroke width](images/ratedStrokeThickness.jpg) -### Unselected Items +#### Unselected Items The [`UnRatedStrokeWidth`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRating.XForms.SfRatingSettings.html#Syncfusion_SfRating_XForms_SfRatingSettings_UnRatedStrokeWidth) property sets the stroke width for the unrated item with the specified value in the [`SfRating`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRating.XForms.SfRating.html) control. diff --git a/Xamarin/Rating/Appearance-and-Styling.md b/Xamarin/Rating/Appearance-and-Styling.md index 9f74d473d..1dea61f2f 100644 --- a/Xamarin/Rating/Appearance-and-Styling.md +++ b/Xamarin/Rating/Appearance-and-Styling.md @@ -1,8 +1,8 @@ --- layout: post -title: Appearance and Styling in Xamarin Rating control | Syncfusion -description: Learn here all about Appearance and Styling support in Syncfusion Xamarin Rating (SfRating) control and more. +title: Appearance and Styling in Xamarin Rating Control | Syncfusion +description: Learn how to customize the appearance and styling in the Syncfusion Xamarin Rating (SfRating) control, including item size, count, and spacing. platform: Xamarin control: Rating documentation: ug @@ -11,14 +11,12 @@ documentation: ug # Appearance and Styling in Xamarin Rating (SfRating) -When the default view is not needed, you can customize the view of Xamarin.Forms [`SfRating`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRating.XForms.SfRating.html) control. The [`SfRating`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRating.XForms.SfRating.html) control provides support to customize the size, item count, and space between rating items. - +If the default view does not meet your needs, you can customize the `SfRating` control in Xamarin.Forms. This control allows you to modify the size, item count, and spacing between rating items to better fit your application design requirements. ## Set Size -The [`ItemSize`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRating.XForms.SfRating.html#Syncfusion_SfRating_XForms_SfRating_ItemSize) property sets the size of the rating items. - -N> By default, property value is 50. +Use the [`ItemSize`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRating.XForms.SfRating.html#Syncfusion_SfRating_XForms_SfRating_ItemSize) property to define the size of the rating items. +> Note: The default value for this property is 50. {% tabs %} {% highlight xaml %} diff --git a/Xamarin/Rating/Getting-Started.md b/Xamarin/Rating/Getting-Started.md index 47bca8c2a..98b745762 100644 --- a/Xamarin/Rating/Getting-Started.md +++ b/Xamarin/Rating/Getting-Started.md @@ -2,7 +2,7 @@ layout: post title: Getting Started with Xamarin Rating Control | Syncfusion -description: Learn here all about how to getting started with Syncfusion Xamarin Rating control, its elements and more. +description: Learn how to get started with the Syncfusion Xamarin Rating control, its components, and customization options. platform: xamarin control: Rating documentation: ug @@ -11,22 +11,22 @@ documentation: ug # Getting Started with Xamarin Rating Control +This guide details how to set up and configure the [`SfRating`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRating.XForms.SfRating.html) control in a Xamarin application. Additionally, it provides an overview of customization features available within the `SfRating` control. -This section explains how to configure a [`SfRating`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRating.XForms.SfRating.html) control in a real-time scenario and also provides a walk-through on some of the customization features available in [`SfRating`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRating.XForms.SfRating.html) control. +## Assembly Deployment -## Assembly deployment +After installing [Essential Studio® for Xamarin](https://www.syncfusion.com/downloads/xamarin), required assemblies can be found in the installation directory: `{Syncfusion Essential Studio Installed location}\Essential Studio\{Version #}\Xamarin\lib`. -After installing [Essential Studio® for Xamarin](https://www.syncfusion.com/downloads/xamarin), you can find all the required assemblies in the installation folders, {Syncfusion Essential Studio Installed location} \Essential Studio\\{Version #}\Xamarin\lib. +Example path: `C:\Program Files (x86)\Syncfusion\Essential Studio\19.1.0.54\Xamarin\lib` -E.g.: C:\Program Files (x86) \Syncfusion\Essential Studio\19.1.0.54\Xamarin\lib +> Note: On Mac, assemblies can be located in the unzipped package path: `Documents/Syncfusion/{Version #}/Xamarin/lib`. -N> Assemblies can be found in unzipped package location(Documents/Syncfusion/{Version #}/Xamarin/lib) in Mac. +## Adding SfRating Reference -## Adding SfRating reference +You can add the [`SfRating`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRating.XForms.SfRating.html) reference through the following methods: -You can add [`SfRating`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRating.XForms.SfRating.html) reference using one of the following methods: - -**Method 1: Adding SfRating reference from nuget.org** +**Method 1: NuGet Package** +Syncfusion Xamarin components are available on [nuget.org](https://www.nuget.org/). To incorporate `SfRating` into your project, open the NuGet Package Manager in Visual Studio, search for [Syncfusion.Xamarin.SfRating](https://www.nuget.org/packages/Syncfusion.Xamarin.SfRating), and install it. Syncfusion Xamarin components are available in [nuget.org](https://www.nuget.org/). To add [`SfRating`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRating.XForms.SfRating.html) to your project, open the NuGet package manager in Visual Studio, search for [Syncfusion.Xamarin.SfRating](https://www.nuget.org/packages/Syncfusion.Xamarin.SfRating), and then install it. diff --git a/Xamarin/Rating/Overview.md b/Xamarin/Rating/Overview.md index d3ff4c56f..15f7a7fa1 100644 --- a/Xamarin/Rating/Overview.md +++ b/Xamarin/Rating/Overview.md @@ -1,22 +1,21 @@ --- layout: post -title: About Xamarin Rating control | Syncfusion -description: Learn here all about introduction of Syncfusion Xamarin Rating (SfRating) control, its elements and more. +title: About Xamarin Rating Control | Syncfusion +description: Discover the features and applications of the Syncfusion Xamarin Rating (SfRating) control, including its elements and customization options. platform: Xamarin control: Rating documentation: ug --- -# Xamarin Rating (SfRating) Overview -The Essential Xamarin Rating control provides the number of stars that represents a rating. And also used to configure the item size, item spacing and the number of displayed items in the [`SfRating`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRating.XForms.SfRating.html) control. Essential Xamarin Rating control can be used in various scenarios like movie rating, rating the application etc. +# Xamarin Rating (SfRating) Overview -![Rating OverView](images/overview.png) +The Essential Xamarin Rating control, `SfRating`, provides a visual interface for users to submit ratings using a configurable number of stars. The control allows customization of item size, spacing, and the number of items displayed. It is versatile and can be applied in various scenarios such as movie ratings, app reviews, and more. +![Rating Overview](images/overview.png) ## Key Features -* [`Precision`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRating.XForms.SfRating.html#Syncfusion_SfRating_XForms_SfRating_Precision): Options to decide the accuracy level of rating. - -* [`ItemCount`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRating.XForms.SfRating.html#Syncfusion_SfRating_XForms_SfRating_ItemCount): Support to determine the number of Rating items to be displayed. +- **[`Precision`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRating.XForms.SfRating.html#Syncfusion_SfRating_XForms_SfRating_Precision):** Defines the accuracy level of the rating, offering options such as full, half, or exact precision. +- **[`ItemCount`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRating.XForms.SfRating.html#Syncfusion_SfRating_XForms_SfRating_ItemCount):** Determines the total number of rating items to display, allowing for flexibility in design and user interaction. diff --git a/Xamarin/Rating/Precision-Mode.md b/Xamarin/Rating/Precision-Mode.md index 3b66f3d9a..a531f8145 100644 --- a/Xamarin/Rating/Precision-Mode.md +++ b/Xamarin/Rating/Precision-Mode.md @@ -1,8 +1,8 @@ --- layout: post -title: Precision Mode in Xamarin Rating control | Syncfusion -description: Learn here all about Precision Mode support in Syncfusion Xamarin Rating (SfRating) control and more. +title: Precision Mode in Xamarin Rating Control | Syncfusion +description: Learn about the precision mode options available in the Syncfusion Xamarin Rating (SfRating) control, and how to configure them for your applications. platform: Xamarin control: Rating documentation: ug @@ -13,7 +13,7 @@ documentation: ug The [`Precision`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRating.XForms.SfRating.html#Syncfusion_SfRating_XForms_SfRating_Precision) mode defines the accuracy level of the [`SfRating`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRating.XForms.SfRating.html) control. It has [`Standard`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRating.XForms.Precision.html#Syncfusion_SfRating_XForms_Precision_Standard), [`Half`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRating.XForms.Precision.html#Syncfusion_SfRating_XForms_Precision_Half), and [`Exact`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRating.XForms.Precision.html#Syncfusion_SfRating_XForms_Precision_Exact) options. The default precision mode of the [`SfRating`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRating.XForms.SfRating.html) control is [`Standard`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRating.XForms.Precision.html#Syncfusion_SfRating_XForms_Precision_Standard). -## Standard +## Standard Precision When the precision mode of [`SfRating`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRating.XForms.SfRating.html) is set as [`Standard`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRating.XForms.Precision.html#Syncfusion_SfRating_XForms_Precision_Standard), the rating item will be filled completely based on the rating value. diff --git a/Xamarin/Rating/Restrict-User-Selection.md b/Xamarin/Rating/Restrict-User-Selection.md index 4a1aba154..11b4fab25 100644 --- a/Xamarin/Rating/Restrict-User-Selection.md +++ b/Xamarin/Rating/Restrict-User-Selection.md @@ -1,17 +1,17 @@ --- layout: post -title: Restrict user Selection in Xamarin Rating control | Syncfusion -description: Learn here all about Restrict user Selection support in Syncfusion Xamarin Rating (SfRating) control and more. +title: Restrict User Selection in Xamarin Rating Control | Syncfusion +description: Learn how to restrict user selection in the Syncfusion Xamarin Rating (SfRating) control using the ReadOnly property. platform: Xamarin control: Rating documentation: ug --- -# Restrict user Selection in Xamarin Rating (SfRating) +# Restrict User Selection in Xamarin Rating (SfRating) -[`SfRating`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRating.XForms.SfRating.html) control provides support for changeable or unchangeable values for Rating control. This is achieved by the [`ReadOnly`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRating.XForms.SfRating.html#Syncfusion_SfRating_XForms_SfRating_ReadOnly) property. When this property is set to True, the Rating value becomes unchangeable. By default, this property value is set to False. +The [`SfRating`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRating.XForms.SfRating.html) control allows for either changeable or unchangeable rating values. This behavior is controlled by the [`ReadOnly`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRating.XForms.SfRating.html#Syncfusion_SfRating_XForms_SfRating_ReadOnly) property. Setting this property to `True` makes the rating value static, preventing user modifications. By default, this property is set to `False`, allowing user input. {% tabs %} @@ -29,6 +29,4 @@ documentation: ug {% endtabs %} -![readOnly](images/readOnly.jpg) - - +![ReadOnly Property in Action](images/readOnly.jpg) diff --git a/Xamarin/Rating/ToolTip.md b/Xamarin/Rating/ToolTip.md index c9f5ed91f..6365ef203 100644 --- a/Xamarin/Rating/ToolTip.md +++ b/Xamarin/Rating/ToolTip.md @@ -1,8 +1,8 @@ --- layout: post -title: ToolTip in Xamarin Rating control | Syncfusion -description: Learn here all about ToolTip support in Syncfusion Xamarin Rating (SfRating) control, its elements and more. +title: ToolTip in Xamarin Rating Control | Syncfusion +description: Explore ToolTip functionality in the Syncfusion Xamarin Rating (SfRating) control, including placement options and precision settings. platform: Xamarin control: Rating documentation: ug @@ -11,19 +11,19 @@ documentation: ug # ToolTip in Xamarin 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`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRating.XForms.SfRating.html) control, tooltip shows the data of [`Value`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRating.XForms.SfRating.html#Syncfusion_SfRating_XForms_SfRating_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 offer additional context about UI elements that may not be immediately clear to users. In the Xamarin.Forms [`SfRating`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRating.XForms.SfRating.html) control, ToolTips display the [`Value`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRating.XForms.SfRating.html#Syncfusion_SfRating_XForms_SfRating_Value). They appear when hovering over rating items and disappear once a rating item is selected. -## Set Tooltip Placement +## Configure Tooltip Placement -Using [`ToolTipPlacement`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRating.XForms.SfRating.html#Syncfusion_SfRating_XForms_SfRating_TooltipPlacement) property, We can define where the ToolTip need to be displayed. [`ToolTipPlacement`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRating.XForms.SfRating.html#Syncfusion_SfRating_XForms_SfRating_TooltipPlacement) having the following three types of placement. +The [`ToolTipPlacement`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRating.XForms.SfRating.html#Syncfusion_SfRating_XForms_SfRating_TooltipPlacement) property specifies where the ToolTip is displayed in relation to the control. Options include: -* [`BottomRight`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRating.XForms.TooltipPlacement.html#Syncfusion_SfRating_XForms_TooltipPlacement_BottomRight) -* [`None`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRating.XForms.TooltipPlacement.html#Syncfusion_SfRating_XForms_TooltipPlacement_None), -* [`TopLeft`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRating.XForms.TooltipPlacement.html#Syncfusion_SfRating_XForms_TooltipPlacement_TopLeft). +- [`BottomRight`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRating.XForms.TooltipPlacement.html#Syncfusion_SfRating_XForms_TooltipPlacement_BottomRight) +- [`None`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRating.XForms.TooltipPlacement.html#Syncfusion_SfRating_XForms_TooltipPlacement_None) +- [`TopLeft`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRating.XForms.TooltipPlacement.html#Syncfusion_SfRating_XForms_TooltipPlacement_TopLeft) -N> By default, this property value is set to [`None`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRating.XForms.TooltipPlacement.html#Syncfusion_SfRating_XForms_TooltipPlacement_None). +> Note: The default placement is set to [`None`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRating.XForms.TooltipPlacement.html#Syncfusion_SfRating_XForms_TooltipPlacement_None). -### BottomRight +### BottomRight Placement The Tooltip will display on bottom of the [`SfRating`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRating.XForms.SfRating.html) control. @@ -49,9 +49,9 @@ public MainPage() {% endtabs %} -![SfRating right bottom ToolTip](images/rightBottom.jpg) +![SfRating BottomRight ToolTip](images/rightBottom.jpg) -### TopLeft +### TopLeft Placement The Tooltip will be displayed on top of the [`SfRating`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRating.XForms.SfRating.html) control. @@ -77,11 +77,11 @@ public MainPage() {% endtabs %} -![SfRating top left ToolTip](images/topLeft.jpg) +![SfRating TopLeft ToolTip](images/topLeft.jpg) ### None -When we set [`ToolTipPlacement`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRating.XForms.SfRating.html#Syncfusion_SfRating_XForms_SfRating_TooltipPlacement) as [`None`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRating.XForms.TooltipPlacement.html#Syncfusion_SfRating_XForms_TooltipPlacement_None), The ToolTip will be disappear. +Setting [`ToolTipPlacement`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRating.XForms.SfRating.html#Syncfusion_SfRating_XForms_SfRating_TooltipPlacement) to [`None`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRating.XForms.TooltipPlacement.html#Syncfusion_SfRating_XForms_TooltipPlacement_None) will disable the ToolTip. {% tabs %} @@ -105,13 +105,10 @@ public MainPage() {% endtabs %} -![No tooltip](images/null.jpg) +![No ToolTip](images/null.jpg) -## Set ToolTip Precision - -The [`ToolTipPrecision`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRating.XForms.SfRating.html#Syncfusion_SfRating_XForms_SfRating_TooltipPrecision) property sets the number precisions to be displayed after decimal point in ToolTip. - -N> The default value of ToolTip precision is 1. +## ToolTip Precision Configuration +The [`ToolTipPrecision`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRating.XForms.SfRating.html#Syncfusion_SfRating_XForms_SfRating_TooltipPrecision) property defines the number of decimal places shown in the ToolTip. Default precision is set to 1. {% tabs %} @@ -135,4 +132,4 @@ public MainPage() {% endtabs %} -![SfRating ToolTip precision](images/toolTipPrecision.jpg) +![SfRating ToolTip Precision](images/toolTipPrecision.jpg) diff --git a/Xamarin/Rating/View-Range-Selection.md b/Xamarin/Rating/View-Range-Selection.md index 04a936f9f..3efbd8fba 100644 --- a/Xamarin/Rating/View-Range-Selection.md +++ b/Xamarin/Rating/View-Range-Selection.md @@ -1,8 +1,8 @@ --- layout: post -title: Enable View Range Selection in Xamarin Rating control | Syncfusion -description: Learn here all about Enable View Range Selection support in Syncfusion Xamarin Rating (SfRating) control and more. +title: Enable View Range Selection in Xamarin Rating Control | Syncfusion +description: Learn how to utilize View Range Selection with CustomView in the Syncfusion Xamarin Rating (SfRating) control. platform: Xamarin control: Rating documentation: ug @@ -11,16 +11,18 @@ documentation: ug # Enable View Range Selection in Xamarin Rating (SfRating) -When using CustomView in [`SfRating`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRating.XForms.SfRating.html), Only one item will be rated. If you need to change the view of all rated CustomView items, Use the [`EnableViewRangeSelection`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRating.XForms.SfRating.html#Syncfusion_SfRating_XForms_SfRating_EnableViewRangeSelection) boolean property. +When using the `CustomView` in the [`SfRating`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRating.XForms.SfRating.html) control, only a single item is rated by default. To change the view of all rated `CustomView` items, employ the boolean property [`EnableViewRangeSelection`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRating.XForms.SfRating.html#Syncfusion_SfRating_XForms_SfRating_EnableViewRangeSelection). -N> The [`EnableViewRangeSelection`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRating.XForms.SfRating.html#Syncfusion_SfRating_XForms_SfRating_EnableViewRangeSelection) property is used only for CustomViews. +> Note: The `EnableViewRangeSelection` property is applicable only when using `CustomViews`. +## Example Usage + +Below are examples demonstrating how to set the `EnableViewRangeSelection` property: {% tabs %} {% highlight xaml %} - {% endhighlight %} {% highlight C# %} @@ -41,4 +43,4 @@ public MainPage() {% endtabs %} -![SfRating EnableViewRangeSelection](images/enableviewrangeselection.png) +![EnableViewRangeSelection in SfRating](images/enableviewrangeselection.png) diff --git a/Xamarin/Rotator/Accessibility.md b/Xamarin/Rotator/Accessibility.md index 22f161ea6..fda4d13e2 100644 --- a/Xamarin/Rotator/Accessibility.md +++ b/Xamarin/Rotator/Accessibility.md @@ -1,7 +1,7 @@ --- layout: post -title: Accessibility in Xamarin Rotator control | Syncfusion -description: Learn here all about Accessibility support in Syncfusion Xamarin Rotator (SfRotator) control and more. +title: Accessibility in Xamarin Rotator Control | Syncfusion +description: Understand the accessibility support in the Syncfusion Xamarin Rotator (SfRotator) control. platform: Xamarin control: SfRotator documentation: ug @@ -9,12 +9,12 @@ documentation: ug # Accessibility in Xamarin Rotator (SfRotator) -The [`SfRotator`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRotator.XForms.SfRotator.html) control has built-in `AutomationId` for inner elements. The `AutomationId` API allows the automation framework to find and interact with the inner elements of the [`SfRotator`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRotator.XForms.SfRotator.html) control. To keep unique AutomationId, these inner elements' AutomationIds are updated based on the control's `AutomationId`. +The [`SfRotator`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRotator.XForms.SfRotator.html) control includes built-in `AutomationId` support for its inner elements. The `AutomationId` API lets the automation framework locate and interact with the inner elements of the [`SfRotator`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRotator.XForms.SfRotator.html) control. To ensure unique `AutomationId` values, these IDs are updated based on the control's `AutomationId`. -For example, if you set SfRotator's `AutomationId` as "Book Display Rotator" and you want to select the fifth index, then the automation framework will interact with the [`Thumbnail`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRotator.XForms.NavigationStripMode.html#Syncfusion_SfRotator_XForms_NavigationStripMode_Thumbnail) as "Book Display Rotator Index 5 of 5". +For instance, if you set the SfRotator's `AutomationId` to "Book Display Rotator" and want to select the fifth index, the automation framework will interact with the [`Thumbnail`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRotator.XForms.NavigationStripMode.html#Syncfusion_SfRotator_XForms_NavigationStripMode_Thumbnail) as "Book Display Rotator Index 5 of 5." -The automation framework will interact only to the [`Dots`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRotator.XForms.NavigationStripMode.html#Syncfusion_SfRotator_XForms_NavigationStripMode_Dots) and [`Thumbnail`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRotator.XForms.NavigationStripMode.html#Syncfusion_SfRotator_XForms_NavigationStripMode_Thumbnail) [`NavigationStripMode`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRotator.XForms.SfRotator.html#Syncfusion_SfRotator_XForms_SfRotator_NavigationStripMode). You cannot interact with the rotator item when you want to select the index that is not visible in the view. +The automation framework will only interact with the [`Dots`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRotator.XForms.NavigationStripMode.html#Syncfusion_SfRotator_XForms_NavigationStripMode_Dots) and [`Thumbnail`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRotator.XForms.NavigationStripMode.html#Syncfusion_SfRotator_XForms_NavigationStripMode_Thumbnail) [`NavigationStripMode`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRotator.XForms.SfRotator.html#Syncfusion_SfRotator_XForms_SfRotator_NavigationStripMode). You cannot interact with the rotator item if you want to select an index that is not visible in the view. -N> You cannot provide AutomationId when the rotator item is populated with custom template. +> **Note:** Providing `AutomationId` is not possible when the rotator item is populated with a custom template. ![AutomationId Image](images/AutomationId.png) diff --git a/Xamarin/Rotator/Adding-Looping-and-Delays.md b/Xamarin/Rotator/Adding-Looping-and-Delays.md index 94a56f3d1..42f537031 100644 --- a/Xamarin/Rotator/Adding-Looping-and-Delays.md +++ b/Xamarin/Rotator/Adding-Looping-and-Delays.md @@ -1,19 +1,19 @@ --- layout: post -title: Adding Looping and Delays in Xamarin Rotator control | Syncfusion -description: Learn here all about Adding Looping and Delays support in Syncfusion Xamarin Rotator (SfRotator) control and more. -platform: xamarin +title: Adding Looping and Delays in Xamarin Rotator Control | Syncfusion +description: Discover how to add looping and delays in the Syncfusion Xamarin Rotator (SfRotator) control. +platform: Xamarin control: Rotator documentation: ug --- # Adding Looping and Delays in Xamarin Rotator (SfRotator) -Looping and delay can be enabled in [`SfRotator`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRotator.XForms.SfRotator.html) control and also we can customize the Text and Navigation direction. +The [`SfRotator`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRotator.XForms.SfRotator.html) control supports enabling looping and delays. You can also customize the text and navigation direction. ## Toggle AutoPlay -The [`EnableAutoPlay`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRotator.XForms.SfRotator.html#Syncfusion_SfRotator_XForms_SfRotator_EnableAutoPlay) property specifies whether the items should navigate automatically based on [`NavigationDelay`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRotator.XForms.SfRotator.html#Syncfusion_SfRotator_XForms_SfRotator_NavigationDelay) property, when the property value is set to true. +The [`EnableAutoPlay`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRotator.XForms.SfRotator.html#Syncfusion_SfRotator_XForms_SfRotator_EnableAutoPlay) property determines whether items should automatically navigate based on the [`NavigationDelay`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRotator.XForms.SfRotator.html#Syncfusion_SfRotator_XForms_SfRotator_NavigationDelay) property when set to `true`. N> By default, the property value is set to false. diff --git a/Xamarin/Rotator/DataTemplateSelector.md b/Xamarin/Rotator/DataTemplateSelector.md index eb5e80b82..181b74c4d 100644 --- a/Xamarin/Rotator/DataTemplateSelector.md +++ b/Xamarin/Rotator/DataTemplateSelector.md @@ -1,15 +1,15 @@ --- layout: post -title: DataTemplateSelector in Xamarin Rotator control | Syncfusion -description: Learn here all about DataTemplateSelector support in Syncfusion Xamarin Rotator (SfRotator) control and more. -platform: xamarin +title: DataTemplateSelector in Xamarin Rotator Control | Syncfusion +description: Learn about DataTemplateSelector support in the Syncfusion Xamarin Rotator (SfRotator) control. +platform: Xamarin control: Rotator documentation: ug --- # DataTemplateSelector in Xamarin Rotator (SfRotator) -[`SfRotator`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRotator.XForms.SfRotator.html) supports DataTemplateSelector which you can choose a DataTemplate based on the data object. +The [`SfRotator`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRotator.XForms.SfRotator.html) supports `DataTemplateSelector`, allowing you to choose a `DataTemplate` based on the data object. {% tabs %} @@ -150,7 +150,7 @@ The following screenshot illustrates the output of above code. ![DataTemplateSelector](images/DataTemplateSelector.png) -We have attached sample for reference. You can download the sample from the following link. +A sample is available for reference. You can download it from the following link: Sample link: [DataTemplateSelectorSample](https://github.com/SyncfusionExamples/data-template-selector-rotator) diff --git a/Xamarin/Rotator/Dots-Customization.md b/Xamarin/Rotator/Dots-Customization.md index 64d5d5426..7a266286f 100644 --- a/Xamarin/Rotator/Dots-Customization.md +++ b/Xamarin/Rotator/Dots-Customization.md @@ -1,7 +1,7 @@ --- layout: post -title: Dots Customization in Xamarin Rotator control | Syncfusion -description: Learn here all about Dots Customization support in Syncfusion Xamarin Rotator (SfRotator) control and more. +title: Dots Customization in Xamarin Rotator Control | Syncfusion +description: Explore the customization options for dots in the Syncfusion Xamarin Rotator (SfRotator) control, including border, selected, and unselected dot colors. platform: xamarin control: Rotator documentation: ug @@ -9,11 +9,10 @@ documentation: ug # Dots Customization in Xamarin Rotator (SfRotator) -The Rotator control supports to customize the dots border color, selected dots color and unselected dots color. +The Xamarin Rotator control allows you to customize the appearance of the pagination dots, including options to modify the border color of the dots, as well as the colors for selected and unselected dots. These customizations can enhance the aesthetics of your mobile application and provide visual feedback to users. +## Dots Border Color -## DotsBorder Color - -The [`DotsBorderColor`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRotator.XForms.SfRotator.html#Syncfusion_SfRotator_XForms_SfRotator_DotsBorderColor) property is used to customize the color of dots border in [`SfRotator`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRotator.XForms.SfRotator.html). +The [`DotsBorderColor`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRotator.XForms.SfRotator.html#Syncfusion_SfRotator_XForms_SfRotator_DotsBorderColor) property customizes the color of the dots' border within an [`SfRotator`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRotator.XForms.SfRotator.html) control. {% tabs %} {% highlight xaml %} @@ -295,3 +294,183 @@ namespace Rotator {% endtabs %} ![SfRotator with unselected dot color](images/UnselectedDotColor.png) + +## Selected Dot Color + +The [`SelectedDotColor`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRotator.XForms.SfRotator.html#Syncfusion_SfRotator_XForms_SfRotator_SelectedDotColor) property allows customization of the color for the currently selected dot in an [`SfRotator`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRotator.XForms.SfRotator.html) control. + +{% tabs %} +{% highlight xaml %} + + + + + + + + + + + + + + + + +{% endhighlight %} +{% highlight csharp %} + +using Syncfusion.SfRotator.XForms; +using Xamarin.Forms; +using Xamarin.Forms.Xaml; +using System.Collections.Generic; + +namespace Rotator +{ + [XamlCompilation(XamlCompilationOptions.Compile)] + public partial class Rotator : ContentPage + { + public Rotator() + { + InitializeComponent(); + SfRotator rotator = new SfRotator(); + var imageCollection = new List + { + new RotatorModel("movie1.png"), + new RotatorModel("movie2.png"), + new RotatorModel("movie3.png"), + new RotatorModel("movie4.png"), + new RotatorModel("movie5.png") + }; + var itemTemplate = new DataTemplate(() => + { + var grid = new Grid(); + var image = new Image(); + image.SetBinding(Image.SourceProperty, "Image"); + grid.Children.Add(image); + return grid; + }); + rotator.ItemTemplate = itemTemplate; + rotator.DotsBorderColor = Color.Aqua; + rotator.SelectedDotColor = Color.Blue; + rotator.ItemsSource = imageCollection; + this.Content = rotator; + } + } + + public class RotatorModel + { + public RotatorModel(string imageString) + { + Image = imageString; + } + + public string Image { get; set; } + } +} + +{% endhighlight %} +{% endtabs %} + +![SfRotator with selected dot color](images/SelectedDotColor.png) + +## Unselected Dot Color + +The [`UnselectedDotColor`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRotator.XForms.SfRotator.html#Syncfusion_SfRotator_XForms_SfRotator_UnselectedDotColor) property customizes the color of the unselected dots in an [`SfRotator`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRotator.XForms.SfRotator.html) control. + +{% tabs %} +{% highlight xaml %} + + + + + + + + + + + + + + + + +{% endhighlight %} +{% highlight csharp %} + +using Syncfusion.SfRotator.XForms; +using Xamarin.Forms; +using Xamarin.Forms.Xaml; +using System.Collections.Generic; + +namespace Rotator +{ + [XamlCompilation(XamlCompilationOptions.Compile)] + public partial class Rotator : ContentPage + { + public Rotator() + { + InitializeComponent(); + SfRotator rotator = new SfRotator(); + var imageCollection = new List + { + new RotatorModel("movie1.png"), + new RotatorModel("movie2.png"), + new RotatorModel("movie3.png"), + new RotatorModel("movie4.png"), + new RotatorModel("movie5.png") + }; + var itemTemplate = new DataTemplate(() => + { + var grid = new Grid(); + var image = new Image(); + image.SetBinding(Image.SourceProperty, "Image"); + grid.Children.Add(image); + return grid; + }); + rotator.ItemTemplate = itemTemplate; + rotator.DotsBorderColor = Color.Aqua; + rotator.SelectedDotColor = Color.Blue; + rotator.UnselectedDotColor = Color.Gray; + rotator.ItemsSource = imageCollection; + this.Content = rotator; + } + } + + public class RotatorModel + { + public RotatorModel(string imageString) + { + Image = imageString; + } + + public string Image { get; set; } + } +} + +{% endhighlight %} +{% endtabs %} + +![SfRotator with unselected dot color](images/UnselectedDotColor.png) diff --git a/Xamarin/Rotator/Events.md b/Xamarin/Rotator/Events.md index 76b8c9b3c..ced213c38 100644 --- a/Xamarin/Rotator/Events.md +++ b/Xamarin/Rotator/Events.md @@ -1,7 +1,7 @@ --- layout: post -title: Events in Xamarin Rotator control | Syncfusion -description: Learn here all about Events support in Syncfusion Xamarin Rotator (SfRotator) control, its elements and more. +title: Events in Xamarin Rotator Control | Syncfusion +description: Explore the various events supported by the Syncfusion Xamarin Rotator (SfRotator) control, their features, and implementations. platform: xamarin control: Rotator documentation: ug @@ -9,13 +9,15 @@ documentation: ug # Events in Xamarin Rotator (SfRotator) +The Rotator control in Xamarin enables users to interact with items through events such as `SelectionChanged` and `ItemTapped`. These events are crucial for handling user interactions and updating UI elements in real-time. + ## Selection Changed -The SelectionChanged event is used to notify when the selection is changed by swiping or dynamically setting the [`SelectedIndex`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRotator.XForms.SfRotator.html#Syncfusion_SfRotator_XForms_SfRotator_SelectedIndex) property of [`SfRotator`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRotator.XForms.SfRotator.html). +The `SelectionChanged` event is triggered when the selection of the rotator changes, either by swiping through the items or by dynamically updating the [`SelectedIndex`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRotator.XForms.SfRotator.html#Syncfusion_SfRotator_XForms_SfRotator_SelectedIndex) property of the [`SfRotator`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRotator.XForms.SfRotator.html). -## ItemTapped +## Item Tapped -The [`ItemTapped`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRotator.XForms.SfRotator.html#Syncfusion_SfRotator_XForms_SfRotator_ItemTapped) event will be triggered whenever tapping the item. +The [`ItemTapped`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRotator.XForms.SfRotator.html#Syncfusion_SfRotator_XForms_SfRotator_ItemTapped) event is fired whenever an item in the rotator is tapped. This can be used to trigger actions such as navigation or selection operations. {% tabs %} @@ -149,7 +151,7 @@ namespace Rotator {% endtabs %} -The following screenshot illustrates the output of above code. +The following screenshot illustrates the output of the above code. ![Rotator_SelectedIndexChanged](images/SelectedIndexChanged.png) ![Rotator_ItemTapped](images/ItemTapped.png) diff --git a/Xamarin/Rotator/Header-Visibility.md b/Xamarin/Rotator/Header-Visibility.md index f198160ed..6463622c6 100644 --- a/Xamarin/Rotator/Header-Visibility.md +++ b/Xamarin/Rotator/Header-Visibility.md @@ -1,7 +1,7 @@ --- layout: post -title: Header Visibility in Xamarin Rotator control | Syncfusion -description: Learn here all about Header Visibility support in Syncfusion Xamarin Rotator (SfRotator) control and more. +title: Header Visibility in Xamarin Rotator Control | Syncfusion +description: Discover how to manage header visibility in the Syncfusion Xamarin Rotator (SfRotator) control and enhance your application's interface. platform: xamarin control: Rotator documentation: ug diff --git a/Xamarin/Rotator/Loading-Online-Images.md b/Xamarin/Rotator/Loading-Online-Images.md index 831f90fe4..ddb24286d 100644 --- a/Xamarin/Rotator/Loading-Online-Images.md +++ b/Xamarin/Rotator/Loading-Online-Images.md @@ -1,7 +1,7 @@ --- layout: post -title: Loading Online Images in Xamarin Rotator control | Syncfusion -description: Learn here all about Loading Online Images support in Syncfusion Xamarin Rotator (SfRotator) control and more. +title: Loading Online Images in Xamarin Rotator Control | Syncfusion +description: Learn how to load online images into the Syncfusion Xamarin Rotator (SfRotator) control for enhanced user experience in your applications. platform: xamarin control: Rotator documentation: ug @@ -9,8 +9,15 @@ documentation: ug # Loading Online Images in Xamarin Rotator (SfRotator) -This section describes how to load the online images in [`SfRotator`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRotator.XForms.SfRotator.html) Control. +This guide demonstrates how to utilize the [`SfRotator`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRotator.XForms.SfRotator.html) control to display images sourced from online URLs, offering a dynamic user interface element for your mobile applications. +## Implementing Online Image Loading + +Here's how to set up the `SfRotator` to load images from the web: + +### XAML Setup + +Define the basic structure within your XAML page: {% tabs %} {% highlight xaml %} diff --git a/Xamarin/Rotator/Navigation-Modes.md b/Xamarin/Rotator/Navigation-Modes.md index 2df03be61..bdb0ffd6f 100644 --- a/Xamarin/Rotator/Navigation-Modes.md +++ b/Xamarin/Rotator/Navigation-Modes.md @@ -1,8 +1,8 @@ --- layout: post -title: Navigation Modes in Xamarin Rotator control | Syncfusion -description: Learn here all about Navigation Modes support in Syncfusion Xamarin Rotator (SfRotator) control and more. +title: Navigation Modes in Xamarin Rotator Control | Syncfusion +description: Explore the navigation modes supported by the Syncfusion Xamarin Rotator (SfRotator) control, and learn how to implement them effectively. platform: xamarin control: Rotator documentation: ug @@ -11,10 +11,11 @@ documentation: ug # Navigation Modes in Xamarin Rotator (SfRotator) -The [`NavigationStripMode`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRotator.XForms.SfRotator.html#Syncfusion_SfRotator_XForms_SfRotator_NavigationStripMode) property specifies the appearance of navigation bar items. The image data can be selected either by [`Thumbnail`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRotator.XForms.NavigationStripMode.html#Syncfusion_SfRotator_XForms_NavigationStripMode_Thumbnail) or by [`Dots`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRotator.XForms.NavigationStripMode.html#Syncfusion_SfRotator_XForms_NavigationStripMode_Dots) navigation modes. +The [`NavigationStripMode`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRotator.XForms.SfRotator.html#Syncfusion_SfRotator_XForms_SfRotator_NavigationStripMode) property defines how the navigation bar items appear in the `SfRotator` control. The items can be displayed using either the [`Thumbnail`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRotator.XForms.NavigationStripMode.html#Syncfusion_SfRotator_XForms_NavigationStripMode_Thumbnail) or [`Dots`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRotator.XForms.NavigationStripMode.html#Syncfusion_SfRotator_XForms_NavigationStripMode_Dots) mode. -* [`Thumbnail`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRotator.XForms.NavigationStripMode.html#Syncfusion_SfRotator_XForms_NavigationStripMode_Thumbnail) - The slider items will be loaded in thumbnail view additionally. When a thumbnail item is clicked, the slider will switch to the corresponding image data. +## Thumbnail Mode +Thumbnail mode displays slider items as small preview images. Clicking on a thumbnail item switches the slider to show the corresponding image data. {% tabs %} {% highlight xaml %} diff --git a/Xamarin/Rotator/Placement-Modes.md b/Xamarin/Rotator/Placement-Modes.md index 68efc0e56..405693ee1 100644 --- a/Xamarin/Rotator/Placement-Modes.md +++ b/Xamarin/Rotator/Placement-Modes.md @@ -1,7 +1,7 @@ --- layout: post -title: Placement Modes in Xamarin Rotator control | Syncfusion -description: Learn here all about Placement Modes support in Syncfusion Xamarin Rotator (SfRotator) control and more. +title: Placement Modes in Xamarin Rotator Control | Syncfusion +description: Explore the placement modes available in the Syncfusion Xamarin Rotator (SfRotator) control for customizing your mobile application interface. platform: xamarin control: Rotator documentation: ug @@ -9,13 +9,12 @@ documentation: ug # Placement Modes in Xamarin Rotator (SfRotator) -By default, the rotator control displays the dots of each rotator item. It can be changed to any of the following types: - -* [`Default`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRotator.XForms.DotPlacement.html#Syncfusion_SfRotator_XForms_DotPlacement_Default) -* [`None`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRotator.XForms.DotPlacement.html#Syncfusion_SfRotator_XForms_DotPlacement_None) -* [`Outside`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRotator.XForms.DotPlacement.html#Syncfusion_SfRotator_XForms_DotPlacement_OutSide) +The Xamarin Rotator, `SfRotator`, provides a flexible way to display navigation dots for image items. You can customize the appearance of these dots using the following placement modes: +- **[`Default`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRotator.XForms.DotPlacement.html#Syncfusion_SfRotator_XForms_DotPlacement_Default)**: Display dots at their default position. +- **[`None`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRotator.XForms.DotPlacement.html#Syncfusion_SfRotator_XForms_DotPlacement_None)**: Hide dots completely, useful when you want a clean, dot-free interface. +- **[`Outside`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRotator.XForms.DotPlacement.html#Syncfusion_SfRotator_XForms_DotPlacement_OutSide)**: Place dots outside the image area. -## DotsPlacement +## DotsPlacement Property The Display Type of Rotator can be modified using the [`DotsPlacement`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRotator.XForms.SfRotator.html#Syncfusion_SfRotator_XForms_SfRotator_DotPlacement) Mode. The [`“None”`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRotator.XForms.DotPlacement.html#Syncfusion_SfRotator_XForms_DotPlacement_None) type can be used when the dots are not needed for the rotator control. diff --git a/Xamarin/Rotator/Populating-Data.md b/Xamarin/Rotator/Populating-Data.md index 5f02f93c5..f0169c22b 100644 --- a/Xamarin/Rotator/Populating-Data.md +++ b/Xamarin/Rotator/Populating-Data.md @@ -1,21 +1,21 @@ --- -layout : post -title: Populating Data in Xamarin Rotator control | Syncfusion -description: Learn here all about Populating Data support in Syncfusion Xamarin Rotator (SfRotator) control and more. -platform : Xamarin -control : Rotator -documentation : ug +layout: post +title: Populating Data in Xamarin Rotator Control | Syncfusion +description: Learn how to effectively populate data within the Syncfusion Xamarin Rotator (SfRotator) control using a variety of data sources. +platform: Xamarin +control: Rotator +documentation: ug --- # Populating Data in Xamarin Rotator (SfRotator) -[`SfRotator`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRotator.XForms.SfRotator.html) control supports binding to different data sources such as IList Data Source, Observable Collection Data Source. +The [`SfRotator`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRotator.XForms.SfRotator.html) control supports binding to various data sources, including `IList` and `ObservableCollection`. This guide explains how to populate the control with image data, define custom templates, and utilize the `SfRotator` effectively. -## Through Binding +## Data Binding -This section explains about setting Item Source and applying custom template to the data. +This section covers setting the Item Source and applying a custom template to data in the `SfRotator`. -### Create a Model with Data +### Creating a Model with Data [`SfRotator`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRotator.XForms.SfRotator.html) items can be populated with a collection of image data. You can assign a collection to it. Collections include arrays, Lists and DataTables. For example you may wants to create a Rotator model with Image as follows. diff --git a/Xamarin/Rotator/Sliding-Direction.md b/Xamarin/Rotator/Sliding-Direction.md index e569960a9..9949882dd 100644 --- a/Xamarin/Rotator/Sliding-Direction.md +++ b/Xamarin/Rotator/Sliding-Direction.md @@ -1,7 +1,7 @@ --- layout: post -title: Sliding Direction in Xamarin Rotator control | Syncfusion -description: Learn here all about Sliding Direction support in Syncfusion Xamarin Rotator (SfRotator) control and more. +title: Sliding Direction in Xamarin Rotator Control | Syncfusion +description: Explore the sliding direction capabilities of the Syncfusion Xamarin Rotator (SfRotator) control. platform: xamarin control: Rotator documentation: ug @@ -9,12 +9,11 @@ documentation: ug # Sliding Direction in Xamarin Rotator (SfRotator) -The [`NavigationDirection`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRotator.XForms.SfRotator.html#Syncfusion_SfRotator_XForms_SfRotator_NavigationDirection) property specifies the direction in which items should be navigated in [`SfRotator`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRotator.XForms.SfRotator.html) control. +The [`NavigationDirection`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRotator.XForms.SfRotator.html#Syncfusion_SfRotator_XForms_SfRotator_NavigationDirection) property in the `SfRotator` control specifies the direction in which rotator items should move. This functionality provides enhanced interaction capabilities for navigating image collections. ## Horizontal -Rotator Items can be navigated in horizontal direction. - +Navigate rotator items horizontally to provide a lateral transition effect. {% tabs %} {% highlight xaml %} diff --git a/Xamarin/Rotator/getting-started.md b/Xamarin/Rotator/getting-started.md index 9ca7f0eb0..9690c12c7 100644 --- a/Xamarin/Rotator/getting-started.md +++ b/Xamarin/Rotator/getting-started.md @@ -1,7 +1,7 @@ --- layout: post -title: Getting Started with Xamarin Rotator control | Syncfusion -description: Learn here about getting started with Syncfusion Xamarin Rotator (SfRotator) control, its elements and more. +title: Getting Started with Xamarin Rotator Control | Syncfusion +description: Discover how to integrate and customize the Syncfusion Xamarin Rotator (SfRotator) control for use in your mobile applications. platform: xamarin control: Rotator documentation: ug @@ -9,19 +9,19 @@ documentation: ug # Getting Started with Xamarin Rotator (SfRotator) -This section explains you the steps to configure a [`SfRotator`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRotator.XForms.SfRotator.html) control in a real-time scenario and also provides a walk-through on some of the customization features available in [`SfRotator`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRotator.XForms.SfRotator.html) control. +This guide walks you through the steps needed to configure the [`SfRotator`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRotator.XForms.SfRotator.html) control in a real-world application. Additionally, it highlights some of the customization possibilities available in the `SfRotator` control. -## Assembly deployment +## Assembly Deployment -After installing [Essential Studio® for Xamarin](https://www.syncfusion.com/downloads/xamarin), you can find all the required assemblies in the installation folders, {Syncfusion Essential Studio Installed location} \Essential Studio\\{Version #}\Xamarin\lib. +Upon installing [Essential Studio® for Xamarin](https://www.syncfusion.com/downloads/xamarin), you will find all necessary assemblies in the installation folders constructed like `{Syncfusion Essential Studio Installed location}\Essential Studio\\{Version #}\Xamarin\lib`. E.g.: C:\Program Files (x86) \Syncfusion\Essential Studio\19.1.0.54\Xamarin\lib N> Assemblies can be found in unzipped package location(Documents/Syncfusion/{Version #}/Xamarin/lib) in Mac. -## Adding SfRotator reference +## Adding SfRotator References -You can add [`SfRotator`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRotator.XForms.SfRotator.html) reference using one of the following methods: +You can add the [`SfRotator`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRotator.XForms.SfRotator.html) reference using one of the following methods: **Method 1: Adding SfRotator reference from nuget.org** @@ -97,14 +97,11 @@ public override bool FinishedLaunching(UIApplication app, NSDictionary options) {% endtabs %} -### ReleaseMode issue in UWP platform +### UWP Release Mode Issue -There is a known Framework issue in UWP platform. The custom controls will not render when deployed the application in `Release Mode`. - -The above problem can be resolved by initializing the SfRotator assemblies in `App.xaml.cs` in UWP project as like in below code snippet. +A known UWP issue prevents rendering custom controls in `Release Mode`. Fix this by initializing SfRotator assemblies in `App.xaml.cs`: {% highlight C# %} - // In App.xaml.cs protected override void OnLaunched(LaunchActivatedEventArgs e) diff --git a/Xamarin/Rotator/overview.md b/Xamarin/Rotator/overview.md index f5e37e51a..945e6eb80 100644 --- a/Xamarin/Rotator/overview.md +++ b/Xamarin/Rotator/overview.md @@ -1,7 +1,7 @@ --- layout: post -title: About Xamarin Rotator control | Syncfusion -description: Learn here all about introduction of Syncfusion Xamarin Rotator (SfRotator) control, its elements and more. +title: About Xamarin Rotator Control | Syncfusion +description: Discover the Syncfusion Xamarin Rotator (SfRotator) control, its key features, and capabilities for navigating image data. platform: xamarin control: Rotator documentation: ug @@ -9,12 +9,12 @@ documentation: ug # Xamarin Rotator (SfRotator) Overview -The Rotator is a data control used to display image data and navigate through them. The images can be selected either by [`Thumbnail`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRotator.XForms.NavigationStripMode.html#Syncfusion_SfRotator_XForms_NavigationStripMode_Thumbnail) or by [`Dots`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRotator.XForms.NavigationStripMode.html#Syncfusion_SfRotator_XForms_NavigationStripMode_Dots) support. +The Syncfusion Xamarin Rotator, or `SfRotator`, is a versatile data control designed to display and navigate through a collection of images. It offers users interactive ways to engage with image data by using either [`Thumbnail`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRotator.XForms.NavigationStripMode.html#Syncfusion_SfRotator_XForms_NavigationStripMode_Thumbnail) or [`Dots`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRotator.XForms.NavigationStripMode.html#Syncfusion_SfRotator_XForms_NavigationStripMode_Dots) navigation modes, enhancing the visual presentation of applications. -![Rotator OverView](images/overview.png) +![Rotator Overview](images/overview.png) ## Key Features -* `Modes` - Options to navigate data using dots or thumbnail navigation modes. -* `Position` - Support to decide the placement position of dots or thumbnail items in any of the four sides. -* `Autoplay and Items Looping` - Options for auto playing items and navigate items in loop. \ No newline at end of file +- **Modes**: Navigate through data using either dots or thumbnail navigation modes for enhanced interactivity. +- **Position**: Supports the placement of navigation elements (dots or thumbnails) on any of the four sides of the rotator. +- **Autoplay and Item Looping**: Enables autoplay for a seamless slideshow experience and supports looping to continuously navigate items. diff --git a/Xamarin/Switch/Accessibility.md b/Xamarin/Switch/Accessibility.md index 058b43476..08a72720c 100644 --- a/Xamarin/Switch/Accessibility.md +++ b/Xamarin/Switch/Accessibility.md @@ -1,22 +1,22 @@ --- -layout : post -title: Accessibility in Xamarin Switch control | Syncfusion -description: Learn here all about Accessibility support in Syncfusion Xamarin Switch (SfSwitch) control and more. -platform : Xamarin.Forms -control : SfSwitch -documentation : ug +layout: post +title: Accessibility in Xamarin Switch Control | Syncfusion +description: Explore the accessibility support provided by the Syncfusion Xamarin Switch (SfSwitch) control. +platform: Xamarin.Forms +control: SfSwitch +documentation: ug --- -# Accessibility in Xamarin Switch(SfSwitch) +# Accessibility in Xamarin Switch (SfSwitch) ## AutomationId -The [`SfSwitch`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.SfSwitch.html) control has built-in `AutomationId` for inner elements. The `AutomationId` API allows the automation framework to find and interact with the inner elements of the [`SfSwitch`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.SfSwitch.html) control. To keep unique AutomationId, these inner elements' AutomationIds are updated based on the control's `AutomationId`. +The [`SfSwitch`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.SfSwitch.html) control includes built-in `AutomationId` properties for its inner elements. This `AutomationId` API allows automation frameworks to locate and interact with the inner elements of the [`SfSwitch`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.SfSwitch.html) control. Each inner element's AutomationId is uniquely set based on the main control's `AutomationId`. -For example, if you set SfSwitch's `AutomationId` as "Turn on Night mode", then the automation framework will interact the [`SfSwitch`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.SfSwitch.html) as "Turn on Night mode Track". +For instance, if the SfSwitch's `AutomationId` is set to "Turn on Night Mode," the automation framework will identify the [`SfSwitch`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.SfSwitch.html) as "Turn on Night Mode Track." -When you enable the [`Indeterminate state`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.IndeterminateState.html), then the Automation framework will interact the Off state as "Turn on Night mode Off Track", [`Indeterminate state`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.IndeterminateState.html) as "Turn on Night mode Indeterminate Track" and the On state as "Turn on Night mode On Track". +When the [`Indeterminate state`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.IndeterminateState.html) is enabled, the automation framework identifies the Off state as "Turn on Night Mode Off Track," the Indeterminate state as "Turn on Night Mode Indeterminate Track," and the On state as "Turn on Night Mode On Track." -N> AutomationId support works on Android only. +N> AutomationId support is available on Android only. ![AutomationId Image](images/AutomationId.png) diff --git a/Xamarin/Switch/customization.md b/Xamarin/Switch/customization.md index 11f5468de..aeec68f6a 100644 --- a/Xamarin/Switch/customization.md +++ b/Xamarin/Switch/customization.md @@ -1,7 +1,7 @@ --- layout: post -title: Customization in Xamarin Switch control | Syncfusion -description: Learn here all about Customization support in Syncfusion Xamarin Switch (SfSwitch) control and more. +title: Customization in Xamarin Switch Control | Syncfusion +description: Learn about customization support in the Syncfusion Xamarin Switch (SfSwitch) control. platform: Xamarin control: Switch documentation: ug @@ -9,16 +9,16 @@ documentation: ug # Customization in Xamarin Switch (SfSwitch) -The switch control provides options to customize the color based on states. The following code example demonstrates how to customize the switch control. +The Switch control offers options to customize its appearance based on different states. The following example demonstrates how to customize the Switch control. -## Solid colors +## Solid Colors -The following properties are used to apply solid colors to the thumb, track, border, and busy indicator, respectively: +The following properties are used to apply solid colors to the thumb, track, border, and busy indicator: -* [`ThumbColor`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.ISwitchSettings.html#Syncfusion_XForms_Buttons_ISwitchSettings_ThumbColor): Represents the color for the thumb. -* [`ThumbBorderColor`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.ISwitchSettings.html#Syncfusion_XForms_Buttons_ISwitchSettings_ThumbBorderColor): Represents the border color for the thumb. -* [`TrackBorderColor`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.ISwitchSettings.html#Syncfusion_XForms_Buttons_ISwitchSettings_TrackBorderColor): Represents the color for the border of the track. -* [`TrackColor`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.ISwitchSettings.html#Syncfusion_XForms_Buttons_ISwitchSettings_TrackColor): Represents the color for the track. +- [`ThumbColor`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.ISwitchSettings.html#Syncfusion_XForms_Buttons_ISwitchSettings_ThumbColor): Specifies the color for the thumb. +- [`ThumbBorderColor`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.ISwitchSettings.html#Syncfusion_XForms_Buttons_ISwitchSettings_ThumbBorderColor): Specifies the border color for the thumb. +- [`TrackBorderColor`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.ISwitchSettings.html#Syncfusion_XForms_Buttons_ISwitchSettings_TrackBorderColor): Specifies the color for the track border. +- [`TrackColor`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.ISwitchSettings.html#Syncfusion_XForms_Buttons_ISwitchSettings_TrackColor): Specifies the color for the track. {% tabs %} @@ -129,11 +129,11 @@ this.Content = sfSwitch; {% endtabs %} -![switch conrol with visual state customization](images/customization-with-visual-state.png) +![Switch control with visual state customization](images/customization-with-visual-state.png) ## Gradients -You can also specify a range of colors in thumb and track using [`ThumbGradient`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.ISwitchSettings.html#Syncfusion_XForms_Buttons_ISwitchSettings_ThumbGradient) and [`TrackGradient`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.ISwitchSettings.html#Syncfusion_XForms_Buttons_ISwitchSettings_TrackGradient) as demonstrates in the following code example. +Gradients can be applied to the thumb and track using [`ThumbGradient`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.ISwitchSettings.html#Syncfusion_XForms_Buttons_ISwitchSettings_ThumbGradient) and [`TrackGradient`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.ISwitchSettings.html#Syncfusion_XForms_Buttons_ISwitchSettings_TrackGradient). The following example demonstrates how to apply gradients. {% tabs %} @@ -264,24 +264,24 @@ this.Content = sfSwitch; {% endtabs %} -![switch conrol with gradient](images/gradient.png) +![Switch control with gradient](images/gradient.png) -N> Here [`ThumbGradient`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.ISwitchSettings.html#Syncfusion_XForms_Buttons_ISwitchSettings_ThumbGradient) and [`TrackGradient`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.ISwitchSettings.html#Syncfusion_XForms_Buttons_ISwitchSettings_TrackGradient) are type of [`SfLinearGradientBrush`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Graphics.SfLinearGradientBrush.html), So You can apply [`SfLinearGradientBrush`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Graphics.SfLinearGradientBrush.html) or [`SfRadialGradientBrush`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Graphics.SfRadialGradientBrush.html) on it. This [`SfLinearGradientBrush`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Graphics.SfLinearGradientBrush.html) is available in [`Syncfusion.Xamarin.Core`](https://www.nuget.org/packages/Syncfusion.Xamarin.Core) from [`nuget.org`](https://www.nuget.org/). To know more about gradient view refer this [`link`](https://help.syncfusion.com/xamarin/sfgradientview/getting-started). +> **Note:** [`ThumbGradient`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.ISwitchSettings.html#Syncfusion_XForms_Buttons_ISwitchSettings_ThumbGradient) and [`TrackGradient`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.ISwitchSettings.html#Syncfusion_XForms_Buttons_ISwitchSettings_TrackGradient) are of type [`SfLinearGradientBrush`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Graphics.SfLinearGradientBrush.html), and you can apply either `SfLinearGradientBrush` or [`SfRadialGradientBrush`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Graphics.SfRadialGradientBrush.html). This `SfLinearGradientBrush` is available in the [`Syncfusion.Xamarin.Core`](https://www.nuget.org/packages/Syncfusion.Xamarin.Core) package from [nuget.org](https://www.nuget.org/). For more information, refer to [this link](https://help.syncfusion.com/xamarin/sfgradientview/getting-started). ## Sizing -In the switch control, sizing of the thumb and the track can be controlled using the following properties: +In the Switch control, the sizing of the thumb and track can be controlled using the following properties: -* [`TrackCornerRadius`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.ISwitchSettings.html#Syncfusion_XForms_Buttons_ISwitchSettings_TrackCornerRadius): Represents a double value to create curved corner. -* [`TrackBorderWidth`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.ISwitchSettings.html#Syncfusion_XForms_Buttons_ISwitchSettings_TrackBorderWidth): Represents a double value for defining the track border width. -* [`TrackWidthRequest`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.ISwitchSettings.html#Syncfusion_XForms_Buttons_ISwitchSettings_TrackWidthRequest): Represents a double value for defining the track width. -* [`TrackHeightRequest`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.ISwitchSettings.html#Syncfusion_XForms_Buttons_ISwitchSettings_TrackHeightRequest): Represents double value for defining the track height. -* [`ThumbBorderWidth`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.ISwitchSettings.html#Syncfusion_XForms_Buttons_ISwitchSettings_ThumbBorderWidth): Represents a double value for defining the thumb border width. -* [`ThumbCornerRadius`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.ISwitchSettings.html#Syncfusion_XForms_Buttons_ISwitchSettings_ThumbCornerRadius): Represents a double value to create curved corner. -* [`ThumbHeightRequest`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.ISwitchSettings.html#Syncfusion_XForms_Buttons_ISwitchSettings_ThumbHeightRequest): Represents double value for defining the thumb height. -* [`ThumbWidthRequest`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.ISwitchSettings.html#Syncfusion_XForms_Buttons_ISwitchSettings_ThumbWidthRequest): Represents double value for defining the thumb width. +- [`TrackCornerRadius`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.ISwitchSettings.html#Syncfusion_XForms_Buttons_ISwitchSettings_TrackCornerRadius): Specifies the corner radius for the track. +- [`TrackBorderWidth`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.ISwitchSettings.html#Syncfusion_XForms_Buttons_ISwitchSettings_TrackBorderWidth): Specifies the border width for the track. +- [`TrackWidthRequest`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.ISwitchSettings.html#Syncfusion_XForms_Buttons_ISwitchSettings_TrackWidthRequest): Specifies the track width. +- [`TrackHeightRequest`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.ISwitchSettings.html#Syncfusion_XForms_Buttons_ISwitchSettings_TrackHeightRequest): Specifies the track height. +- [`ThumbBorderWidth`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.ISwitchSettings.html#Syncfusion_XForms_Buttons_ISwitchSettings_ThumbBorderWidth): Specifies the border width for the thumb. +- [`ThumbCornerRadius`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.ISwitchSettings.html#Syncfusion_XForms_Buttons_ISwitchSettings_ThumbCornerRadius): Specifies the corner radius for the thumb. +- [`ThumbHeightRequest`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.ISwitchSettings.html#Syncfusion_XForms_Buttons_ISwitchSettings_ThumbHeightRequest): Specifies the thumb height. +- [`ThumbWidthRequest`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.ISwitchSettings.html#Syncfusion_XForms_Buttons_ISwitchSettings_ThumbWidthRequest): Specifies the thumb width. -The following code example demonstrates how to customize the size of the track and thumb. +The example below demonstrates how to customize the size of the track and thumb. {% tabs %} @@ -377,16 +377,16 @@ this.Content = sfSwitch; {% endtabs %} -![switch conrol with sizing](images/sizing.png) +![Switch control with sizing](images/sizing.png) ## Images -Images can also be added to enhance the visual appearance. The following properties are used to add the images: +Images can be added to enhance the visual appearance. The following properties are used to add images: -* [`TrackImageSource`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.ISwitchSettings.html#Syncfusion_XForms_Buttons_ISwitchSettings_TrackImageSource): Represents the image source for the track. -* [`ThumbImageSource`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.ISwitchSettings.html#Syncfusion_XForms_Buttons_ISwitchSettings_ThumbImageSource): Represents the image source for thumb. +- [`TrackImageSource`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.ISwitchSettings.html#Syncfusion_XForms_Buttons_ISwitchSettings_TrackImageSource): Specifies the image source for the track. +- [`ThumbImageSource`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.ISwitchSettings.html#Syncfusion_XForms_Buttons_ISwitchSettings_ThumbImageSource): Specifies the image source for the thumb. -The following code example demonstrates how to customize the image. +The example below demonstrates how to customize the image. {% tabs %} diff --git a/Xamarin/Switch/gettingstarted.md b/Xamarin/Switch/gettingstarted.md index afd895333..4d3c47c1a 100644 --- a/Xamarin/Switch/gettingstarted.md +++ b/Xamarin/Switch/gettingstarted.md @@ -1,7 +1,7 @@ --- layout: post -title: Getting Started with Xamarin Switch control | Syncfusion -description: Learn here about getting started with Syncfusion Xamarin Switch (SfSwitch) control, its elements and more. +title: Getting Started with Xamarin Switch Control | Syncfusion +description: Learn how to get started with the Syncfusion Xamarin Switch (SfSwitch) control, its features, and more. platform: Xamarin control: Switch documentation: ug @@ -10,33 +10,33 @@ documentation: ug # Getting Started with Xamarin Switch (SfSwitch) -This section explains you the steps to add the SfSwitch control with basic functionalities in Xamarin.Forms. +This section provides step-by-step instructions to add the SfSwitch control with basic functionalities in Xamarin.Forms. -## Assembly deployment +## Assembly Deployment -After installing [Essential Studio® for Xamarin](https://www.syncfusion.com/downloads/xamarin), you can find all the required assemblies in the installation folders, {Syncfusion Essential Studio Installed location} \Essential Studio\\{Version #}\Xamarin\lib. +After installing [Essential Studio for Xamarin](https://www.syncfusion.com/downloads/xamarin), you can find all the required assemblies in the installation directory: `{Syncfusion Essential Studio Installed location}\Essential Studio\{Version #}\Xamarin\lib`. E.g.: C:\Program Files (x86) \Syncfusion\Essential Studio\19.1.0.54\Xamarin\lib -N> Assemblies can be found in unzipped package location(Documents/Syncfusion/{Version #}/Xamarin/lib) in Mac. +> **Note:** Assemblies can be found in the unzipped package location (`Documents/Syncfusion/{Version #}/Xamarin/lib`) on a Mac. -## Adding SfSwitch reference +## Adding SfSwitch Reference -You can add [`SfSwitch`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.SfSwitch.html) reference using one of the below methods. +You can add the [`SfSwitch`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.SfSwitch.html) reference using the following methods: -**Method 1: Adding SfSwitch reference from nuget.org** +**Method 1: Adding SfSwitch Reference from nuget.org** -Syncfusion Xamarin components are available in [nuget.org](https://www.nuget.org/#). To add [`SfSwitch`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.SfSwitch.html) to your project, open the NuGet package manager in Visual Studio, search for [Syncfusion.Xamarin.Core](https://www.nuget.org/packages/Syncfusion.Xamarin.Core), and then install it. +Syncfusion Xamarin components are available on [nuget.org](https://www.nuget.org/). To add [`SfSwitch`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.SfSwitch.html) to your project, open the NuGet package manager in Visual Studio, search for [Syncfusion.Xamarin.Core](https://www.nuget.org/packages/Syncfusion.Xamarin.Core), and install it. ![Add Packages](images/Adding-SfSwitch-reference.png) -**Method 2: Adding SfSwitch reference from toolbox** +**Method 2: Adding SfSwitch Reference from Toolbox** -Syncfusion provides Xamarin Toolbox. Using this toolbox, you can drag the [`SfSwitch`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.SfSwitch.html) control to the XAML page. It will automatically install the required NuGet packages and add the namespace to the page. To install Syncfusion Xamarin Toolbox, refer to [`Toolbox`](https://help.syncfusion.com/xamarin/utility#toolbox). +Syncfusion provides a Xamarin Toolbox. You can drag the [`SfSwitch`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.SfSwitch.html) control to the XAML page using this toolbox. It automatically installs the required NuGet packages and adds the namespace to the page. To install Syncfusion Xamarin Toolbox, refer to [`Toolbox`](https://help.syncfusion.com/xamarin/utility#toolbox). -**Method 3: Adding SfSwitch assemblies manually from the installed location** +**Method 3: Adding SfSwitch Assemblies Manually from the Installed Location** -If you prefer to manually reference the assemblies instead referencing from NuGet, add the following assemblies in respective projects. +If you prefer to manually reference the assemblies, add the following assemblies to your respective projects. Location: {Installed location}/{version}/Xamarin/lib @@ -96,12 +96,11 @@ return base.FinishedLaunching(app, options); {% endtabs %} -N> If you are adding the references from toolbox, this step is not needed. +> **Note:** This step is not necessary if references are added from the toolbox. -**Universal** **Windows** **Platform** **(****UWP****)** - -To deploy the switch in Release mode, you need to initialize the button assemblies in App.xaml.cs in UWP project as shown in the below code snippets. +### Universal Windows Platform (UWP) +To deploy the switch in release mode, initialize the button assemblies in `App.xaml.cs` in the UWP project as shown below: {% tabs %} {% highlight c# %} @@ -132,13 +131,12 @@ Xamarin.Forms.Forms.Init(e, assembliesToInclude); {% endtabs %} -**Android** - -The Android platform does not require any additional configuration to render the chart. +### Android +The Android platform does not require any additional configuration to render the switch. ## Initializing SfSwitch -Import the Button namespace as shown below in your respective Page, +Import the button namespace as shown below into your respective Page: {% tabs %} @@ -156,7 +154,7 @@ using Syncfusion.XForms.Buttons; {% endtabs %} -Then initialize the switch control as shown below using the code example. +Then, initialize the switch control as shown in the following code example: {% tabs %} @@ -174,13 +172,13 @@ SfSwitch sfSwitch = new SfSwitch(); {% endtabs %} -![Initializing switch conrol](images/switch.png) +![Initializing switch control](images/switch.png) -## Performing an action based on state +## Performing an Action Based on State -You can switch between the states. When the state is changed the [`StateChanging`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.SfSwitch.html#Syncfusion_XForms_Buttons_SfSwitch_StateChanging) and [`StateChanged`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.SfSwitch.html#Syncfusion_XForms_Buttons_SfSwitch_StateChanged) event will be triggered where you can perform an action based on the current state.The [`StateChanging`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.SfSwitch.html#Syncfusion_XForms_Buttons_SfSwitch_StateChanging) event allows you to cancel moving to a new state. +You can switch between states. When the state changes, the [`StateChanging`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.SfSwitch.html#Syncfusion_XForms_Buttons_SfSwitch_StateChanging) and [`StateChanged`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.SfSwitch.html#Syncfusion_XForms_Buttons_SfSwitch_StateChanged) events are triggered. These events allow actions based on the current state. The [`StateChanging`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.SfSwitch.html#Syncfusion_XForms_Buttons_SfSwitch_StateChanging) event allows canceling the transition to a new state. -The following code example displays a message box when switched to off state when work is completed. +The following code example shows a message box when switched to the "off" state after work is completed: {% tabs %} diff --git a/Xamarin/Switch/how-to.md b/Xamarin/Switch/how-to.md index 5a160c9b5..d1113b1bc 100644 --- a/Xamarin/Switch/how-to.md +++ b/Xamarin/Switch/how-to.md @@ -1,13 +1,13 @@ --- layout: post -title: States in Syncfusion Switch control for Xamarin.Forms. -description: Explaining about different states in Syncfusion Switch Control (SfSwitch) for Xamarin.Forms and how it performs. +title: Understanding States in Syncfusion Switch Control for Xamarin.Forms +description: An exploration of different states in the Syncfusion Switch Control (SfSwitch) for Xamarin.Forms and how it performs. platform: Xamarin control: Switch documentation: ug --- -# How to show busy indicator to perform async action +# How to Show Busy Indicator for Async Actions The busy indicator indicates users that something is on progress in the background. For instance, some data is being fetched from the back end. Here, when users about to switch the state, the [`StateChanging`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.SfSwitch.html#Syncfusion_XForms_Buttons_SfSwitch_StateChanging) event occurs, and users can set the [`IsBusy`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.SfSwitch.html#Syncfusion_XForms_Buttons_SfSwitch_IsBusy) property to true to show busy indicator and perform fetching the data from the server. After fetching the data, the [`IsOn`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.SfSwitch.html#Syncfusion_XForms_Buttons_SfSwitch_IsOn) property will be set to true or false based on validation. After validation, the [`IsBusy`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.SfSwitch.html#Syncfusion_XForms_Buttons_SfSwitch_IsBusy) property is set to false. @@ -51,9 +51,9 @@ The busy indicator indicates users that something is on progress in the backgrou {% endhighlight %} -![switch control with busy indicator](images/busy-indicator.png) +![Switch control with busy indicator](images/busy-indicator.png) -## Change thumb color alone based on its state and devices +## Customizing Thumb Color Based on State and Device You can customize the thumb color using the [`ThumbColor`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.ISwitchSettings.html#Syncfusion_XForms_Buttons_ISwitchSettings_ThumbColor) property based on its visual state and devices. @@ -154,9 +154,9 @@ You can customize the thumb color using the [`ThumbColor`](https://help.syncfusi {% endtabs %} -![switch control with busy indicator](images/thumb-color.png) +![Switch control with busy indicator](images/thumb-color.png) -## Change thumb color alone based on its state with Material theme for all devices +## Changing Thumb Color with Material Theme Across Devices By using the [`MaterialSwitchSettings`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.MaterialSwitchSettings-1.html), [`CupertinoSwitchSettings`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.CupertinoSwitchSettings-1.html), and [`FluentSwitchSettings`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.FluentSwitchSettings-1.html) properties, you can change the thumb color based on its state for all devices. @@ -257,9 +257,9 @@ By using the [`MaterialSwitchSettings`](https://help.syncfusion.com/cr/xamarin/S {% endtabs %} -![switch conrol with thumb color](images/thumb-color-based-on-device.png) +![Switch control with thumb color](images/thumb-color-based-on-device.png) -## Set color for disabled state +## Setting Color for Disabled States The Switch control provides options to customize the color based on the disabled states. The below code example illustrates this customization. @@ -354,9 +354,9 @@ this.Content = sfSwitch; {% endtabs %} -![switch conrol with image](images/thumb-color-in-disabled-state.png) +![Switch control with image in disabled state](images/thumb-color-in-disabled-state.png) -## Change busy indicator color +## Changing Busy Indicator Color You can customize the busy indicator color using the [`BusyIndicatorColor`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.ISwitchSettings.html#Syncfusion_XForms_Buttons_ISwitchSettings_BusyIndicatorColor) property based on its visual state and devices. @@ -483,7 +483,6 @@ All state can be customized in same look by setting the same state for all switc - @@ -553,9 +552,9 @@ this.Content = sfSwitch; {% endtabs %} -![switch control with same look](images/All-state-in-same-look.png) +![Switch control with same look](images/All-state-in-same-look.png) -## Set RTL to switch control +## Set RTL for Switch Control Switch supports to change the layout direction of the control in the right-to-left direction by setting the `FlowDirection` to `RightToLeft`. The device direction takes when we set the `FlowDirection` as `MatchParent`. @@ -581,9 +580,9 @@ this.Content = sfSwitch; {% endtabs %} -![switch control with RTL support](images/RTL-support.png) +![Switch control with RTL support](images/RTL-support.png) -### Setting match parent +### Setting Match Parent {% tabs %} @@ -608,9 +607,9 @@ this.Content = grid; {% endtabs %} -![switch control with RTL support](images/RTL-support.png) +![Switch control with RTL support](images/RTL-support.png) -## Get default color of the switches in all three state. +## Default Colors of Switches in Three States The following table illustrate the default color of the switches in all three state. @@ -2199,4 +2198,4 @@ The following table illustrate the default color of the switches in all three st
-
\ No newline at end of file + diff --git a/Xamarin/Switch/orientation.md b/Xamarin/Switch/orientation.md index aa599bd1d..319f67d75 100644 --- a/Xamarin/Switch/orientation.md +++ b/Xamarin/Switch/orientation.md @@ -1,7 +1,7 @@ --- layout: post -title: Orientation in Xamarin Switch control | Syncfusion -description: Learn here all about Orientation support in Syncfusion Xamarin Switch (SfSwitch) control, its elements and more. +title: Orientation in Xamarin Switch Control | Syncfusion +description: Learn about orientation support in the Syncfusion Xamarin Switch (SfSwitch) control and its elements. platform: Xamarin control: Switch documentation: ug @@ -9,11 +9,11 @@ documentation: ug # Orientation in Xamarin Switch (SfSwitch) -The switch control provides options to change the default [`orientation`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.SfSwitch.html#Syncfusion_XForms_Buttons_SfSwitch_Orientation). +The Switch control allows you to change the default [`Orientation`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.SfSwitch.html#Syncfusion_XForms_Buttons_SfSwitch_Orientation). -## Horizontal +## Horizontal Orientation -By default, it is displayed horizontally. You can also define the [`orientation`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.SfSwitch.html#Syncfusion_XForms_Buttons_SfSwitch_Orientation) as demonstrated in the following code example. +By default, the switch is displayed horizontally. You can explicitly set the [`Orientation`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.SfSwitch.html#Syncfusion_XForms_Buttons_SfSwitch_Orientation) as shown in the code example below. {% tabs %} @@ -33,11 +33,10 @@ sfSwitch.Orientation = SwitchOrientation.Horizontal; {% endtabs %} -![switch conrol has horizontal orientation](images/orientation.png) +![Switch control with horizontal orientation](images/orientation.png) -## Vertical - -To view the switch control vertically, you can define the vertical [`orientation`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.SfSwitch.html#Syncfusion_XForms_Buttons_SfSwitch_Orientation)as demonstrated in the following code example. +## Vertical Orientation +To display the switch control vertically, set the [`Orientation`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.SfSwitch.html#Syncfusion_XForms_Buttons_SfSwitch_Orientation) to `Vertical`, as demonstrated in the following code example. {% tabs %} @@ -57,4 +56,4 @@ sfSwitch.Orientation = SwitchOrientation.Vertical; {% endtabs %} -![switch conrol has vertical orientation](images/vertical.png) +![Switch control with vertical orientation](images/vertical.png) diff --git a/Xamarin/Switch/overview.md b/Xamarin/Switch/overview.md index e19484679..99d757ba8 100644 --- a/Xamarin/Switch/overview.md +++ b/Xamarin/Switch/overview.md @@ -1,23 +1,22 @@ --- layout: post -title: About Xamarin Switch control | Syncfusion -description: Learn here all about introduction of Syncfusion Xamarin Switch (SfSwitch) control, its elements and more. +title: Overview of Xamarin Switch Control | Syncfusion +description: Explore the introduction to the Syncfusion Xamarin Switch (SfSwitch) control, its elements, and more. platform: Xamarin control: Switch documentation: ug --- -# Xamarin Switch (SfSwitch) Overview - -The Switch control for Xamarin.Forms provides an efficient way to select between the states based on the toggled value. +# Overview of Xamarin Switch (SfSwitch) +The Switch control for Xamarin.Forms offers an efficient mechanism for toggling between states based on the switch's value. ![Xamarin.Forms switch overview.](images/overview.png) -## Key features +## Key Features -* Provides support for inbuilt visual types like [`Material`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.VisualType.html#Syncfusion_XForms_Buttons_VisualType_Material), [`Cupertino`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.VisualType.html#Syncfusion_XForms_Buttons_VisualType_Cupertino) or [`Fluent`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.VisualType.html#Syncfusion_XForms_Buttons_VisualType_Fluent) type. -* Customizable visual based on device platforms. -* Provides options to visualize indeterminate state. -* Performs async action with busy indicator. -* Supports [`horizontal`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.SwitchOrientation.html#Syncfusion_XForms_Buttons_SwitchOrientation_Horizontal) and [`vertical`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.SwitchOrientation.html#Syncfusion_XForms_Buttons_SwitchOrientation_Vertical) orientation. -* Allows you to add the images to enhance the look and feel. \ No newline at end of file +- Supports built-in visual types like [`Material`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.VisualType.html#Syncfusion_XForms_Buttons_VisualType_Material), [`Cupertino`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.VisualType.html#Syncfusion_XForms_Buttons_VisualType_Cupertino), and [`Fluent`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.VisualType.html#Syncfusion_XForms_Buttons_VisualType_Fluent). +- Offers customizable visuals based on device platforms. +- Enables visualization of the indeterminate state. +- Performs asynchronous actions with a busy indicator. +- Supports both [`horizontal`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.SwitchOrientation.html#Syncfusion_XForms_Buttons_SwitchOrientation_Horizontal) and [`vertical`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.SwitchOrientation.html#Syncfusion_XForms_Buttons_SwitchOrientation_Vertical) orientations. +- Allows adding images to enhance the look and feel. diff --git a/Xamarin/Switch/states.md b/Xamarin/Switch/states.md index fecff62b0..845122595 100644 --- a/Xamarin/Switch/states.md +++ b/Xamarin/Switch/states.md @@ -1,7 +1,7 @@ --- layout: post -title: States in Xamarin Switch control | Syncfusion -description: Learn here all about States support in Syncfusion Xamarin Switch (SfSwitch) control, its elements and more. +title: States in Xamarin Switch Control | Syncfusion +description: Discover the various states supported by the Syncfusion Xamarin Switch (SfSwitch) control, including its elements and features. platform: Xamarin control: Switch documentation: ug @@ -9,12 +9,11 @@ documentation: ug # States in Xamarin Switch (SfSwitch) -Switch allows you to configure the states as explained in the following sections. +The SfSwitch control allows you to configure the states as explained in the following sections. -## On - -You can switch to on state by tapping the switch button or by setting a value as demonstrated in the following code example. +## On State +To switch to the "On" state, tap the switch button or configure the value as shown in the following code examples. {% tabs %} {% highlight xaml %} @@ -33,12 +32,11 @@ sfSwitch.IsOn=true; {% endtabs %} -![switch control is displaying on state](images/on.png) - -## Off +![Switch control is displaying on state](images/on.png) -This is the default state. You can switch to off state by tapping the switch button or by defining as demonstrated in the following code example. +## Off State +The "Off" state is the default state. Tap the switch button or define the state as shown in these code examples. {% tabs %} {% highlight xaml %} @@ -57,11 +55,11 @@ sfSwitch.IsOn = false; {% endtabs %} -![switch control displaying off state](images/off.png) +![Switch control displaying off state](images/off.png) -## Indeterminate +## Indeterminate State -The indeterminate state can be enabled when you need to display the work progress. The following code example demonstrates how to load the switch in indeterminate state by setting the [`IsOn`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.SfSwitch.html#Syncfusion_XForms_Buttons_SfSwitch_IsOn) property to null. +The indeterminate state is useful for indicating ongoing work progress. Use the following code example to load the switch in the indeterminate state by setting the [`IsOn`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.SfSwitch.html#Syncfusion_XForms_Buttons_SfSwitch_IsOn) property to null. {% tabs %} @@ -83,13 +81,13 @@ sfSwitch.AllowIndeterminateState = true; {% endtabs %} -![switch conrol is displaying indeterminate state](images/intermediate.png) +![Switch control is displaying indeterminate state](images/intermediate.png) -N> By default, the switch control has only two states: on and off. +> **Note:** By default, the switch control supports only two states: on and off. -## Disabled On +## Disabled On State -You can switch to disabled on state by setting the [`IsOn`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.SfSwitch.html#Syncfusion_XForms_Buttons_SfSwitch_IsOn) property as true and `IsEnabled` property as false. +Set the [`IsOn`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.SfSwitch.html#Syncfusion_XForms_Buttons_SfSwitch_IsOn) property to true and the `IsEnabled` property to false to switch to the disabled on state. {% tabs %} @@ -109,11 +107,11 @@ sfSwitch.IsEnabled = false; {% endtabs %} -![switch control displaying disabled on state](images/disabled-on.png) +![Switch control displaying disabled on state](images/disabled-on.png) -## Disabled Off +## Disabled Off State -You can switch to disabled off state by setting the [`IsOn`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.SfSwitch.html#Syncfusion_XForms_Buttons_SfSwitch_IsOn) property as false and `IsEnabled` property as false. +Switch to the disabled off state by setting the [`IsOn`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.SfSwitch.html#Syncfusion_XForms_Buttons_SfSwitch_IsOn) property to false and the `IsEnabled` property to false. {% tabs %} @@ -133,11 +131,11 @@ sfSwitch.IsEnabled = false; {% endtabs %} -![switch control displaying disabled off state](images/disabled-off.png) +![Switch control displaying disabled off state](images/disabled-off.png) -## Disabled Indeterminate +## Disabled Indeterminate State -The disabled indeterminate state can be enabled when you need to display the work progress .The below code example demonstrates loading the switch in disabled indeterminate state by setting [`IsOn`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.SfSwitch.html#Syncfusion_XForms_Buttons_SfSwitch_IsOn) property value as null and `IsEnabled` property as false. +Enable the disabled indeterminate state to display ongoing work progress. Load the switch in the disabled indeterminate state by setting the [`IsOn`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.SfSwitch.html#Syncfusion_XForms_Buttons_SfSwitch_IsOn) property to null and the `IsEnabled` property to false, as shown below. {% tabs %} @@ -158,4 +156,4 @@ sfSwitch.IsEnabled = false; {% endtabs %} -![switch conrol displaying disabled indeterminate state](images/disabled-indeterminate.png) +![Switch control displaying disabled indeterminate state](images/disabled-indeterminate.png) diff --git a/Xamarin/Switch/visualtypes.md b/Xamarin/Switch/visualtypes.md index f23bc8da6..a3214e1ac 100644 --- a/Xamarin/Switch/visualtypes.md +++ b/Xamarin/Switch/visualtypes.md @@ -1,7 +1,7 @@ --- layout: post -title: Visual Types in Xamarin Switch control | Syncfusion -description: Learn here all about Visual Types support in Syncfusion Xamarin Switch (SfSwitch) control, its elements and more. +title: Visual Types in Xamarin Switch Control | Syncfusion +description: Explore the various visual types supported by the Syncfusion Xamarin Switch (SfSwitch) control, including elements and customization options. platform: Xamarin control: Switch documentation: ug @@ -9,24 +9,23 @@ documentation: ug # Visual Types in Xamarin Switch (SfSwitch) -[`SfSwitch`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.SfSwitch.html) supports customization using built-in [`visual types`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.SfSwitch.html#Syncfusion_XForms_Buttons_SfSwitch_VisualType). The [`visual types`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.SfSwitch.html#Syncfusion_XForms_Buttons_SfSwitch_VisualType) based on device platform are listed as follows. +The [`SfSwitch`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.SfSwitch.html) control supports customization through built-in [`visual types`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.SfSwitch.html#Syncfusion_XForms_Buttons_SfSwitch_VisualType). The visual types available based on the device platform are listed below: -* Android – [`Material`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.VisualType.html#Syncfusion_XForms_Buttons_VisualType_Material) -* iOS – [`Cupertino`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.VisualType.html#Syncfusion_XForms_Buttons_VisualType_Cupertino) -* Windows – [`Fluent`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.VisualType.html#Syncfusion_XForms_Buttons_VisualType_Fluent) +- Android – [`Material`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.VisualType.html#Syncfusion_XForms_Buttons_VisualType_Material) +- iOS – [`Cupertino`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.VisualType.html#Syncfusion_XForms_Buttons_VisualType_Cupertino) +- Windows – [`Fluent`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.VisualType.html#Syncfusion_XForms_Buttons_VisualType_Fluent) ## Default -This is the default value set for visual type. +This is the default visual type setting. -![switch conrol is having default visual type](images/default.png) +![Switch control with default visual type](images/default.png) -N> If you set [`default`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.VisualType.html#Syncfusion_XForms_Buttons_VisualType_Default), the visual type will be internally changed based on the device platform. +> **Note:** When set to [`Default`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.VisualType.html#Syncfusion_XForms_Buttons_VisualType_Default), the visual type changes internally based on the device platform. ## Material -[`Material`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.VisualType.html#Syncfusion_XForms_Buttons_VisualType_Material) visual type brings the appearance based on [`material`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.VisualType.html#Syncfusion_XForms_Buttons_VisualType_Material) guidelines. The following code example demonstrates how to define [`material`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.VisualType.html#Syncfusion_XForms_Buttons_VisualType_Material) visual type. - +The [`Material`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.VisualType.html#Syncfusion_XForms_Buttons_VisualType_Material) visual type provides an appearance based on material design guidelines. The following code example demonstrates how to define the `Material` visual type. {% tabs %} {% highlight xaml %} @@ -45,12 +44,11 @@ sfSwitch.VisualType = VisualType.Material; {% endtabs %} -![switch conrol is having material visual type](images/material.png) +![Switch control with material visual type](images/material.png) ## Cupertino -[`Cupertino`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.VisualType.html#Syncfusion_XForms_Buttons_VisualType_Cupertino) visual type brings the appearance based on [`Cupertino`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.VisualType.html#Syncfusion_XForms_Buttons_VisualType_Cupertino) guidelines. The following code example demonstrates how to define [`Cupertino`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.VisualType.html#Syncfusion_XForms_Buttons_VisualType_Cupertino) visual type. - +The [`Cupertino`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.VisualType.html#Syncfusion_XForms_Buttons_VisualType_Cupertino) visual type provides an appearance based on Cupertino design guidelines. See the code example below to define the `Cupertino` visual type. {% tabs %} {% highlight xaml %} @@ -69,12 +67,11 @@ sfSwitch.VisualType = VisualType.Cupertino; {% endtabs %} -![switch conrol is having cupertino visual type](images/cupertino.png) +![Switch control with Cupertino visual type](images/cupertino.png) ## Fluent -[`Fluent`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.VisualType.html#Syncfusion_XForms_Buttons_VisualType_Fluent) visual type brings the appearance based on[`Fluent`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.VisualType.html#Syncfusion_XForms_Buttons_VisualType_Fluent) guidelines. The following code example demonstrates how to define [`Fluent`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.VisualType.html#Syncfusion_XForms_Buttons_VisualType_Fluent) visual type. - +The [`Fluent`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.VisualType.html#Syncfusion_XForms_Buttons_VisualType_Fluent) visual type offers an appearance based on Fluent design guidelines. The following code example shows how to define the `Fluent` visual type. {% tabs %} {% highlight xaml %} @@ -93,9 +90,8 @@ sfSwitch.VisualType = VisualType.Fluent; {% endtabs %} -![switch conrol is having fluent visual type](images/fluent.png) +![Switch control with fluent visual type](images/fluent.png) ## Custom -[`Custom`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.VisualType.html#Syncfusion_XForms_Buttons_VisualType_Custom) type will allow you to customize the control, where you can handle the size, colors, images etc. of the control. Refer to this [`documentation`](https://help.syncfusion.com/xamarin/sfswitch/customization). - +The [`Custom`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.VisualType.html#Syncfusion_XForms_Buttons_VisualType_Custom) type allows you to customize the control, including aspects like size, colors, and images. Refer to this [documentation](https://help.syncfusion.com/xamarin/sfswitch/customization) for more details. diff --git a/Xamarin/Tabbed-View/Accessibility.md b/Xamarin/Tabbed-View/Accessibility.md index e78657162..b6208fabc 100644 --- a/Xamarin/Tabbed-View/Accessibility.md +++ b/Xamarin/Tabbed-View/Accessibility.md @@ -1,16 +1,16 @@ --- -layout : post -title: Accessibility in Xamarin Tabbed View control | Syncfusion -description: Learn here all about Accessibility support in Syncfusion Xamarin Tabbed View (SfTabView) control and more. -platform : Xamarin -control : SfTabView -documentation : ug +layout: post +title: Accessibility in Xamarin Tabbed View Control | Syncfusion +description: Learn about accessibility support in the Syncfusion Xamarin Tabbed View (SfTabView) control and more. +platform: Xamarin +control: SfTabView +documentation: ug --- # Accessibility in Xamarin Tabbed View (SfTabView) -The [`SfTabView`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html) control has built-in `AutomationId` for inner elements. The `AutomationId` API allows the automation framework to find and interact with the inner elements of the [`SfTabView`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html) control. To keep unique AutomationId, these inner elements' AutomationIds are updated based on the control's `AutomationId`. +The [`SfTabView`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html) control includes built-in `AutomationId` support for its inner elements. The `AutomationId` property enables automation frameworks to locate and interact with these inner elements within the [`SfTabView`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html) control. To ensure uniqueness, the `AutomationId` of inner elements is updated based on the control's `AutomationId`. -For example, if you set SfTabView's `AutomationId` as "Phone menu", then the Automation framework will interact with the More button as "Phone menu More Button". The following screenshot illustrates the AutomationIds of inner elements. The Automation framework will also interact with the Center Button and the element's inside the tab item content with the element's AutomationId. +For instance, if you set the `AutomationId` of SfTabView to "Phone menu", the automation framework will interact with the More button as "Phone menu More Button". The screenshot below illustrates the `AutomationId` setup for inner elements. The automation framework can also interact with the Center Button and the elements inside the tab item content using their respective `AutomationId`. ![AutomationId Image](images/AutomationId/AutomationId.png) diff --git a/Xamarin/Tabbed-View/CenterButtonSettings.md b/Xamarin/Tabbed-View/CenterButtonSettings.md index 009390964..dcb7a3ff0 100644 --- a/Xamarin/Tabbed-View/CenterButtonSettings.md +++ b/Xamarin/Tabbed-View/CenterButtonSettings.md @@ -1,14 +1,14 @@ --- layout: post -title: CenterButton Customization in Xamarin Tabbed View control | Syncfusion -description: Learn here all about CenterButton Customization support in Syncfusion Xamarin Tabbed View (SfTabView) control and more. +title: CenterButton Customization in Xamarin Tabbed View Control | Syncfusion +description: Explore the customization options for the CenterButton in Syncfusion Xamarin Tabbed View (SfTabView) control and more. control: TabView documentation: ug --- # CenterButton Customization in Xamarin Tabbed View (SfTabView) -This section explains how to create and customize The Xamarin.Forms [`SfTabView`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html) CenterButton. To enable CenterButton, set the [`OverFlowMode`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html#Syncfusion_XForms_TabView_SfTabView_OverflowMode) of Xamarin.Forms [`SfTabView`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html) to [`CenterButton`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.OverflowMode.html#Syncfusion_XForms_TabView_OverflowMode_CenterButton). +This section explains how to create and customize the CenterButton in the Xamarin.Forms [`SfTabView`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html). To enable the CenterButton, set the [`OverflowMode`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html#Syncfusion_XForms_TabView_SfTabView_OverflowMode) of the Xamarin.Forms [`SfTabView`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html) to [`CenterButton`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.OverflowMode.html#Syncfusion_XForms_TabView_OverflowMode_CenterButton). {% tabs %} @@ -34,9 +34,9 @@ public MainPage() {% endtabs %} -## Customize CenterButtonSettings +## Customizing CenterButtonSettings -We can customize the CenterButton using the properties of [`CenterButtonSetting`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html#Syncfusion_XForms_TabView_SfTabView_CenterButtonSettings). The following properties are used to customize the view of CenterButton [`BackgroundColor`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.CenterButtonSettings.html#Syncfusion_XForms_TabView_CenterButtonSettings_BackgroundColor), [`BorderColor`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.CenterButtonSettings.html#Syncfusion_XForms_TabView_CenterButtonSettings_BorderColor), [`BorderThickness`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.CenterButtonSettings.html#Syncfusion_XForms_TabView_CenterButtonSettings_BorderThickness), [`Height`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.CenterButtonSettings.html#Syncfusion_XForms_TabView_CenterButtonSettings_Height), [`Title`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.CenterButtonSettings.html#Syncfusion_XForms_TabView_CenterButtonSettings_Title), [`TitleFontAttributes`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.CenterButtonSettings.html#Syncfusion_XForms_TabView_CenterButtonSettings_TitleFontAttributes), [`TitleFontColor`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.CenterButtonSettings.html#Syncfusion_XForms_TabView_CenterButtonSettings_TitleFontColor), [`TitleFontSize`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.CenterButtonSettings.html#Syncfusion_XForms_TabView_CenterButtonSettings_TitleFontSize), [`Width`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.CenterButtonSettings.html#Syncfusion_XForms_TabView_CenterButtonSettings_Width). +You can customize the CenterButton using the properties of the [`CenterButtonSettings`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html#Syncfusion_XForms_TabView_SfTabView_CenterButtonSettings). The properties available for customization include [`BackgroundColor`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.CenterButtonSettings.html#Syncfusion_XForms_TabView_CenterButtonSettings_BackgroundColor), [`BorderColor`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.CenterButtonSettings.html#Syncfusion_XForms_TabView_CenterButtonSettings_BorderColor), [`BorderThickness`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.CenterButtonSettings.html#Syncfusion_XForms_TabView_CenterButtonSettings_BorderThickness), [`Height`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.CenterButtonSettings.html#Syncfusion_XForms_TabView_CenterButtonSettings_Height), [`Title`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.CenterButtonSettings.html#Syncfusion_XForms_TabView_CenterButtonSettings_Title), [`TitleFontAttributes`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.CenterButtonSettings.html#Syncfusion_XForms_TabView_CenterButtonSettings_TitleFontAttributes), [`TitleFontColor`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.CenterButtonSettings.html#Syncfusion_XForms_TabView_CenterButtonSettings_TitleFontColor), [`TitleFontSize`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.CenterButtonSettings.html#Syncfusion_XForms_TabView_CenterButtonSettings_TitleFontSize), and [`Width`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.CenterButtonSettings.html#Syncfusion_XForms_TabView_CenterButtonSettings_Width). {% tabs %} @@ -68,9 +68,9 @@ public MainPage() {% endtabs %} -## CenterButtonTapped event +## CenterButtonTapped Event -When [`CenterButton`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.OverflowMode.html#Syncfusion_XForms_TabView_OverflowMode_CenterButton) is tapped, the [`CenterButtonTapped`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html#Syncfusion_XForms_TabView_SfTabView_CenterButtonTapped) event occurs. Using this event we can set alert message. +When the [`CenterButton`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.OverflowMode.html#Syncfusion_XForms_TabView_OverflowMode_CenterButton) is tapped, the [`CenterButtonTapped`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html#Syncfusion_XForms_TabView_SfTabView_CenterButtonTapped) event is triggered. This event can be used to display an alert message. {% tabs %} @@ -100,7 +100,7 @@ private void TabView_CenterButtonTapped(object sender, EventArgs e) ## Custom CenterButton -When built-in view is not needed, it can be overridden by adding custom views to the [`CenterButtonView`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html#Syncfusion_XForms_TabView_SfTabView_CenterButtonView). The [`CenterButton`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.OverflowMode.html#Syncfusion_XForms_TabView_OverflowMode_CenterButton) view can be customized by adding images, labels, buttons inside the [`CenterButtonView`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html#Syncfusion_XForms_TabView_SfTabView_CenterButtonView). Refer the following code sample to know about customizing the view of [`CenterButton`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.OverflowMode.html#Syncfusion_XForms_TabView_OverflowMode_CenterButton). +If the built-in view does not meet your needs, you can override it by adding custom views to the [`CenterButtonView`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html#Syncfusion_XForms_TabView_SfTabView_CenterButtonView). The [`CenterButton`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.OverflowMode.html#Syncfusion_XForms_TabView_OverflowMode_CenterButton) view can be customized by adding images, labels, or buttons within the [`CenterButtonView`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html#Syncfusion_XForms_TabView_SfTabView_CenterButtonView). Refer to the following code example for guidance on customizing the [`CenterButton`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.OverflowMode.html#Syncfusion_XForms_TabView_OverflowMode_CenterButton). {% tabs %} @@ -154,4 +154,4 @@ private void TapGestureRecognizer_Tapped(object sender, EventArgs e) ![TabViewImage](images/Center-Button/Center_Button_Customization.png) -Please find the sample from the following [Sample](https://github.com/SyncfusionExamples/center-button-tabview). +You can find an example in this [sample](https://github.com/SyncfusionExamples/center-button-tabview). diff --git a/Xamarin/Tabbed-View/Display-Type.md b/Xamarin/Tabbed-View/Display-Type.md index ef0f3fe5c..602f1860d 100644 --- a/Xamarin/Tabbed-View/Display-Type.md +++ b/Xamarin/Tabbed-View/Display-Type.md @@ -1,7 +1,7 @@ --- layout: post -title: Display Type in Xamarin Tabbed View control | Syncfusion -description: Learn here all about Display Type support in Syncfusion Xamarin Tabbed View (SfTabView) control and more. +title: Display Type in Xamarin Tabbed View Control | Syncfusion +description: Learn about the various display types supported by the Syncfusion Xamarin Tabbed View (SfTabView) control. platform: Xamarin control: TabView documentation: ug @@ -11,15 +11,14 @@ documentation: ug By default, the tab view control displays the title of each tab item. It 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 ![Image for DisplayMode](images/Display-Type/tabstyle01.png) - -The tab view can be changed by setting the [`DisplayMode`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html#Syncfusion_XForms_TabView_SfTabView_DisplayMode) property of [`SfTabView`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html). +The tab view can be adjusted by setting the [`DisplayMode`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html#Syncfusion_XForms_TabView_SfTabView_DisplayMode) property of the [`SfTabView`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html). {% tabs %} @@ -150,7 +149,6 @@ namespace TabView {% endtabs %} -The "no header" type can be used when the header is not needed for the tab view control. So, the content space will be occupied to the entire available height. - -N> [`Image`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.TabDisplayMode.html#Syncfusion_XForms_TabView_TabDisplayMode_Image) appearance in the header can be achieved through font icons. +The "no header" type can be utilized when a header is not needed for the tab view control, allowing the content to occupy the entire available height. +> **Note:** The [`Image`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.TabDisplayMode.html#Syncfusion_XForms_TabView_TabDisplayMode_Image) appearance in the header can be achieved using font icons. diff --git a/Xamarin/Tabbed-View/Getting-Started.md b/Xamarin/Tabbed-View/Getting-Started.md index 3198618a1..5dec6345b 100644 --- a/Xamarin/Tabbed-View/Getting-Started.md +++ b/Xamarin/Tabbed-View/Getting-Started.md @@ -1,7 +1,7 @@ --- layout: post -title: Getting Started with Xamarin Tabbed View control | Syncfusion -description: Learn here about getting started with Syncfusion Xamarin Tabbed View (SfTabView) control, its elements and more. +title: Getting Started with Xamarin Tabbed View Control | Syncfusion +description: Learn how to get started with the Syncfusion Xamarin Tabbed View (SfTabView) control, its elements, and more. platform: Xamarin control: TabView documentation: ug @@ -9,35 +9,35 @@ documentation: ug # Getting Started with Xamarin Tabbed View (SfTabView) -This section provides an overview for working with the [Xamarin.Forms Tabbed View](https://www.syncfusion.com/xamarin-ui-controls/xamarin-tabbed-view) control. Walk through the entire process of creating a real-world application with the tab view. +This section provides an overview of working with the [Xamarin.Forms Tabbed View](https://www.syncfusion.com/xamarin-ui-controls/xamarin-tabbed-view) control. Follow the process to create a real-world application using the tab view. -## Assembly deployment +## Assembly Deployment -After installing [Essential Studio® for Xamarin](https://www.syncfusion.com/downloads/xamarin), you can find all the required assemblies in the installation folders, {Syncfusion Essential Studio Installed location} \Essential Studio\\{Version #}\Xamarin\lib. +After installing [Essential Studio for Xamarin](https://www.syncfusion.com/downloads/xamarin), you can find all the required assemblies in the installation directories: {Syncfusion Essential Studio Installed location}\Essential Studio\\{Version #}\Xamarin\lib. E.g.: C:\Program Files (x86) \Syncfusion\Essential Studio\19.1.0.54\Xamarin\lib -N> Assemblies can be found in unzipped package location(Documents/Syncfusion/{Version #}/Xamarin/lib) in Mac. +> **Note:** Assemblies can be found in the unzipped package location (Documents/Syncfusion/{Version #}/Xamarin/lib) on a Mac. -## Adding SfTabView reference +## Adding SfTabView Reference -You can add [`SfTabView`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html) reference using one of the following methods: +You can add the [`SfTabView`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html) reference using one of the following methods: -**Method 1: Adding SfTabView reference from nuget.org** +**Method 1: Adding SfTabView Reference from NuGet.org** -Syncfusion Xamarin components are available in [nuget.org](https://www.nuget.org/). To add SfTabView to your project, open the [NuGet package](https://help.syncfusion.com/xamarin/visual-studio-integration/nuget-packages) manager in Visual Studio, search for [Syncfusion.Xamarin.SfTabView](https://www.nuget.org/packages/Syncfusion.Xamarin.SfTabView), and then install it. +Syncfusion Xamarin components are available on [NuGet.org](https://www.nuget.org/). To add SfTabView to your project, open the [NuGet package manager](https://help.syncfusion.com/xamarin/visual-studio-integration/nuget-packages) in Visual Studio, search for [Syncfusion.Xamarin.SfTabView](https://www.nuget.org/packages/Syncfusion.Xamarin.SfTabView), and install it. ![Adding SfTabView reference from NuGet](images/Getting-Started/Adding SfTabView reference.png) -N> Install the same version of SfTabView NuGet in all the projects. +> **Note:** Install the same version of SfTabView NuGet in all projects. -**Method 2: Adding SfTabView reference from toolbox** +**Method 2: Adding SfTabView Reference from Toolbox** -Syncfusion also provides Xamarin Toolbox. Using this toolbox, you can drag the [`SfTabView`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html) control to the XAML page. It will automatically install the required NuGet packages and add the namespace to the page. To install Syncfusion Xamarin Toolbox, refer to [Toolbox](https://help.syncfusion.com/xamarin/utility#toolbox). +Syncfusion provides a Xamarin Toolbox. Using this toolbox, you can drag the [`SfTabView`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html) control to the XAML page, and it will automatically install the required NuGet packages and add the namespace to the page. For installation details, refer to the [Toolbox documentation](https://help.syncfusion.com/xamarin/utility#toolbox). -**Method 3: Adding SfTabView assemblies manually from the installed location** +**Method 3: Adding SfTabView Assemblies Manually from the Installed Location** -If you prefer to manually reference the assemblies instead referencing from NuGet, add the following assemblies in respective projects. +If you prefer manual referencing of assemblies instead of using NuGet, add the following assemblies to the respective projects: Location: {Installed location}/{version}/Xamarin/lib @@ -70,13 +70,13 @@ To use the tab view inside an application, each platform application must initia ### Android and UWP -Android launches the tab view without any initialization, and it is enough to only initialize the Xamarin.Forms Framework to launch the application. +Android launches the tab view without any initialization. It is sufficient to initialize the Xamarin.Forms Framework to launch the application. -N> If you are adding the references from toolbox, this step is not needed. +> **Note:** If you add references from the toolbox, this step is unnecessary. ### iOS -To launch the tab view in iOS, call the SfTabViewRenderer.Init() in the `FinishedLaunching` overridden method of the `AppDelegate` class after the Xamarin.Forms Framework has been initialized and before the `LoadApplication` is called, as demonstrated in the following code example. +To launch the tab view in iOS, call `SfTabViewRenderer.Init()` in the `FinishedLaunching` method of the `AppDelegate` class, after initializing the Xamarin.Forms Framework and before calling `LoadApplication`, as demonstrated below: {% highlight C# %} @@ -92,11 +92,11 @@ public override bool FinishedLaunching(UIApplication app, NSDictionary options) {% endhighlight %} -### ReleaseMode issue in UWP platform +### Release Mode Issue on UWP Platform -There is a known Framework issue in UWP platform. The custom controls will not render when deployed the application in `Release Mode`. +There is a known framework issue on the UWP platform where custom controls do not render when the application is deployed in `Release Mode`. -The above problem can be resolved by initializing the [`SfTabView`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html) assemblies in `App.xaml.cs` in UWP project as like in below code snippet. +This problem can be resolved by initializing the [`SfTabView`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html) assemblies in `App.xaml.cs` in the UWP project as shown below: {% highlight C# %} @@ -121,21 +121,21 @@ protected override void OnLaunched(LaunchActivatedEventArgs e) } {% endhighlight %} -## Create a simple SfTabView +## Creating a Simple SfTabView -This section explains how to create a tab view and configure it. The control can be configured entirely in C# code or by using XAML markup. The following screenshot illustrates the output of tab view on iOS, Android and UWP devices. +This section explains how to create and configure a tab view. The control can be configured entirely in C# code or using XAML markup. The screenshot below illustrates the output of a tab view on iOS, Android, and UWP devices. ![TabViewImage](images/Getting-Started/xamarin_forms_tabview.png) -### Creating the project +### Creating the Project -Create a new BlankApp (Xamarin.Forms.Portable) application in Xamarin Studio or Visual Studio for Xamarin.Forms. +Create a new BlankApp (Xamarin.Forms.Portable) application in Xamarin Studio or Visual Studio for Xamarin.Forms. ### Adding SfTabView in Xamarin.Forms -Add the required assembly references to the PCL and renderer projects as discussed in the Assembly deployment section. +Add the required assembly references to the PCL and renderer projects, as discussed in the Assembly Deployment section. -Import the control namespace as shown in the following code. +Import the control namespace as follows: {% tabs %} @@ -153,7 +153,7 @@ using Syncfusion.XForms.TabView; {% endtabs %} -Set the control to content in `ContentPage`. +Set the control to the content in `ContentPage`. {% tabs %} @@ -194,9 +194,9 @@ namespace GettingStarted {% endtabs %} -## Populating tab items +## Populating Tab Items -Tab items can be configured in tab view through the [`Items`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html#Syncfusion_XForms_TabView_SfTabView_Items) property of [`SfTabView`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html), which holds the collection of [`SfTabItem`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabItem.html) through [`TabItemCollection`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.TabItemCollection.html). +Tab items can be configured within the tab view using the [`Items`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html#Syncfusion_XForms_TabView_SfTabView_Items) property of the [`SfTabView`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html). This property holds a collection of [`SfTabItem`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabItem.html) objects via the [`TabItemCollection`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.TabItemCollection.html). {% tabs %} @@ -278,9 +278,9 @@ namespace TabViewAutomationSample ## Adding ListView in SfTabView -## UseCase Sample with Contacts Information stored as a ListView in SfTabView Control +### Use Case: Sample with Contacts Information Stored as a ListView in SfTabView Control -Create a view model class with the `ContactsInfo` collection property, which is 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# %} @@ -315,9 +315,9 @@ public class ContactsViewModel : INotifyPropertyChanged {% endhighlight %} -## Binding data to ListView +## Binding Data to ListView -Bind the items source of the `ListView`, and set the required appearance in its `ItemTemplate` property in which the list view can be hosted within the content region of tab item. +Bind the items source of the `ListView`, and set the required appearance in its `ItemTemplate` property. The list view can be hosted within the content region of a tab item. {% highlight xaml %} @@ -372,12 +372,12 @@ Bind the items source of the `ListView`, and set the required appearance in its {% endhighlight %} -Similarly, content region for other tabs also can be configured. +Similarly, the content region for other tabs can be configured. -![LisViewImage](images/Getting-Started/ListView.png) +![ListViewImage](images/Getting-Started/ListView.png) ## Swiping -By default, both the vertical swiping for list view and horizontal swiping for tab view will work. If it is not required, it can be customized by using the [`EnableSwiping`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html#Syncfusion_XForms_TabView_SfTabView_EnableSwiping) property of [`SfTabView`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html). +By default, both vertical swiping for list view and horizontal swiping for tab view are enabled. If not required, this can be customized using the [`EnableSwiping`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html#Syncfusion_XForms_TabView_SfTabView_EnableSwiping) property of [`SfTabView`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html). -Note: Getting started sample can be downloaded from this [link](https://github.com/SyncfusionExamples/xamarin-forms-sftabview). \ No newline at end of file +> **Note:** The getting started sample can be downloaded from this [link](https://github.com/SyncfusionExamples/xamarin-forms-sftabview). diff --git a/Xamarin/Tabbed-View/NestedTab.md b/Xamarin/Tabbed-View/NestedTab.md index 9142306f3..903f27415 100644 --- a/Xamarin/Tabbed-View/NestedTab.md +++ b/Xamarin/Tabbed-View/NestedTab.md @@ -1,15 +1,15 @@ --- layout: post -title: NestedTab in Xamarin Tabbed View control | Syncfusion -description: Learn here all about NestedTab support in Syncfusion Xamarin Tabbed View (SfTabView) control and more. +title: Nested Tabs in Xamarin Tabbed View Control | Syncfusion +description: Explore the support for nested tabs in the Syncfusion Xamarin Tabbed View (SfTabView) control, including configuration and more. platform: Xamarin control: TabView documentation: ug --- -# NestedTab in Xamarin Tabbed View (SfTabView) +# Nested Tabs in Xamarin Tabbed View (SfTabView) -Nested Tab items can be configured in tab view through the [`Items`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html#Syncfusion_XForms_TabView_SfTabView_Items) property of [`SfTabView`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html), which holds the nested collection of [`SfTabItem`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabItem.html) through [`TabItemCollection`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.TabItemCollection.html). +Nested tab items can be configured in the tab view using the [`Items`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html#Syncfusion_XForms_TabView_SfTabView_Items) property of the [`SfTabView`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html), which holds a nested collection of [`SfTabItem`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabItem.html) entries through the [`TabItemCollection`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.TabItemCollection.html). {% tabs %} @@ -220,7 +220,7 @@ namespace TabViewAutomationSample ## Lazy Loading -Lazy loading improves performance of [`SfTabView`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html) at initial loading. To enable this support, set the [EnableVirtualization](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html#Syncfusion_XForms_TabView_SfTabView_EnableVirtualization) property to true in [`SfTabView`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html). +Lazy loading enhances the performance of the [`SfTabView`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html) during initial loading. Enable this feature by setting the [EnableVirtualization](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html#Syncfusion_XForms_TabView_SfTabView_EnableVirtualization) property to true in [`SfTabView`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html). {% tabs %} @@ -242,4 +242,4 @@ tabView.EnableVirtualization = true; {% endtabs %} -Lazy loading sample is available in this [link](https://github.com/SyncfusionExamples/lazy-loading-in-sftabview). +A lazy loading sample is available at this [link](https://github.com/SyncfusionExamples/lazy-loading-in-sftabview). diff --git a/Xamarin/Tabbed-View/Overview.md b/Xamarin/Tabbed-View/Overview.md index 22659e80b..0b73387c5 100644 --- a/Xamarin/Tabbed-View/Overview.md +++ b/Xamarin/Tabbed-View/Overview.md @@ -1,21 +1,21 @@ --- layout: post -title: About Xamarin Tabbed View control | Syncfusion -description: Learn here all about introduction of Syncfusion Xamarin Tabbed View (SfTabView) control, its elements and more. -platform: xamarin +title: Overview of Xamarin Tabbed View Control | Syncfusion +description: Explore the introduction to the Syncfusion Xamarin Tabbed View (SfTabView) control, its elements, and features. +platform: Xamarin control: SfTabView documentation: ug --- # Xamarin Tabbed View (SfTabView) Overview -The Tabbed View control is available in Xamarin.Forms, Xamarin.Android and Xamarin.iOS. It helps you to create the customizable features that are used to explore and switch among the different views. The key features of tab view control in Xamarin.Forms, Xamarin.Android and Xamarin.iOS are given as follows. +The Tabbed View control is available in Xamarin.Forms, Xamarin.Android, and Xamarin.iOS. It helps you create customizable features for exploring and switching among different views. The key features of the tab view control across Xamarin.Forms, Xamarin.Android, and Xamarin.iOS are outlined below. -## Key features +## Key Features -* Tab header type with text, font icons, and no header. -* Scrollable content and header. -* Top and bottom placements of header. -* Layout option for overflow tabs. +- Tab header type with text, font icons, and optional header. +- Scrollable content and header. +- Top and bottom placements for the header. +- Layout options for overflow tabs. ![Tabbed View overview](images/Overview/xamarin_forms_tabview.png) diff --git a/Xamarin/Tabbed-View/Swiping.md b/Xamarin/Tabbed-View/Swiping.md index 18ec1c462..02e35fd73 100644 --- a/Xamarin/Tabbed-View/Swiping.md +++ b/Xamarin/Tabbed-View/Swiping.md @@ -1,7 +1,7 @@ --- layout: post title: Swiping in Xamarin Tabbed View | Syncfusion -description: Learn here all about swiping support in Syncfusion Xamarin Tabbed View (SfTabView) control and more. +description: Discover how to enable and customize swiping in the Syncfusion Xamarin Tabbed View (SfTabView) control. platform: Xamarin control: TabView documentation: ug @@ -9,9 +9,9 @@ documentation: ug # Swiping in Xamarin Tabbed View (SfTabView) -By default, both the vertical swiping for list view and horizontal swiping for tab view will work. +By default, both vertical swiping for the list view and horizontal swiping for the tab view are enabled. -## Enable swiping +## Enable Swiping Swiping can be customized by using the [`EnableSwiping`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html#Syncfusion_XForms_TabView_SfTabView_EnableSwiping) property of SfTabView. By default, [`EnableSwiping`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html#Syncfusion_XForms_TabView_SfTabView_EnableSwiping) is set to true. To limit the user interaction, set the [`EnableSwiping`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html#Syncfusion_XForms_TabView_SfTabView_EnableSwiping) property of [`SfTabView`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html) to false. diff --git a/Xamarin/Tabbed-View/TabItem-Customization.md b/Xamarin/Tabbed-View/TabItem-Customization.md index b93fd369b..e3f951374 100644 --- a/Xamarin/Tabbed-View/TabItem-Customization.md +++ b/Xamarin/Tabbed-View/TabItem-Customization.md @@ -1,15 +1,15 @@ --- layout: post title: TabItem Customization in Xamarin Tabbed View | Syncfusion -description: Learn here all about Tabitem Customization support in Syncfusion Xamarin Tabbed View (SfTabView) control and more. +description: Learn about TabItem customization support in the Syncfusion Xamarin Tabbed View (SfTabView) control and more. platform: Xamarin control: TabView documentation: ug --- -# TabView TabItem Customization in Xamarin Tabbed View (SfTabView) +# TabItem Customization in Xamarin Tabbed View (SfTabView) -Tab items can be configured in tab view through the [`Items`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html#Syncfusion_XForms_TabView_SfTabView_Items) property of [`SfTabView`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html), which holds the collection of [`SfTabItem`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabItem.html) through [`TabItemCollection`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.TabItemCollection.html). +Tab items can be configured in the tab view using the [`Items`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html#Syncfusion_XForms_TabView_SfTabView_Items) property of [`SfTabView`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html), which holds a collection of [`SfTabItem`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabItem.html) objects through [`TabItemCollection`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.TabItemCollection.html). {% tabs %} @@ -92,9 +92,9 @@ namespace TabViewAutomationSample ![TabItems](images/TabItems/TabItems.png) -## Selection color for text and font icons +## Selection Color for Text and Font Icons -The selected index can be differentiated by setting the [`SelectionColor`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabItem.html#Syncfusion_XForms_TabView_SfTabItem_SelectionColor) property of [`SfTabItem`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabItem.html). +You can differentiate the selected index by setting the [`SelectionColor`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabItem.html#Syncfusion_XForms_TabView_SfTabItem_SelectionColor) property of [`SfTabItem`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabItem.html). {% tabs %} diff --git a/Xamarin/Tabbed-View/TabView-events.md b/Xamarin/Tabbed-View/TabView-events.md index e8acb1cd9..1c713a88a 100644 --- a/Xamarin/Tabbed-View/TabView-events.md +++ b/Xamarin/Tabbed-View/TabView-events.md @@ -1,7 +1,7 @@ --- layout: post -title: TabView Events in Xamarin Tabbed View control | Syncfusion -description: Learn here all about TabView Events support in Syncfusion Xamarin Tabbed View (SfTabView) control and more. +title: TabView Events in Xamarin Tabbed View Control | Syncfusion +description: Discover the various events supported by the Syncfusion Xamarin Tabbed View (SfTabView) control. platform: Xamarin control: TabView documentation: ug @@ -11,7 +11,7 @@ documentation: ug ## TabItem Tapped in Xamarin Tabbed View (SfTabView) -Whenever the TabItem is tapped, the [`TabItemTapped`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html#Syncfusion_XForms_TabView_SfTabView_TabItemTapped) event will occur. Using this event, you can modify the selected Tab Item properties. +Whenever a TabItem is tapped, the [`TabItemTapped`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html#Syncfusion_XForms_TabView_SfTabView_TabItemTapped) event occurs. This event allows you to modify the properties of the selected TabItem. {% tabs %} @@ -60,17 +60,16 @@ private void TabView_TabItemTapped(object sender, Syncfusion.XForms.TabView.TabI {% endtabs %} -Note: Please refer to this [Link](https://www.syncfusion.com/kb/11562/how-to-turn-events-into-commands-with-behaviors-in-xamarin-forms-tabbed-view) for how to turn Events into Commands with Behaviors in Xamarin.Forms Tabbed View. +> **Note:** Refer to this [link](https://www.syncfusion.com/kb/11562/how-to-turn-events-into-commands-with-behaviors-in-xamarin-forms-tabbed-view) for converting Events to Commands with Behaviors in Xamarin.Forms Tabbed View. ## SelectionChanging in Xamarin Tabbed View (SfTabView) -The [`SelectionChanging`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html#Syncfusion_XForms_TabView_SfTabView_SelectionChanging) event is used to notify, before the selection is going to change by swiping, tapping the tab header, and dynamically setting the [`SelectedIndex`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html#Syncfusion_XForms_TabView_SfTabView_SelectedIndex) property of [`SfTabView`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html). +The [`SelectionChanging`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html#Syncfusion_XForms_TabView_SfTabView_SelectionChanging) event notifies you before the selection changes due to swiping, tapping the tab header, or dynamically setting the [`SelectedIndex`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html#Syncfusion_XForms_TabView_SfTabView_SelectedIndex) property of [`SfTabView`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html). -### SelectionChanging event args +### SelectionChanging Event Arguments -[`Index`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SelectionChangingEventArgs.html#Syncfusion_XForms_TabView_SelectionChangingEventArgs_Index) - Gets the value of the index that will be selected. - -[`Cancel`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SelectionChangingEventArgs.html#Syncfusion_XForms_TabView_SelectionChangingEventArgs_Cancel)- Gets or sets the bool value of the tab item that will be selected or not. +- [`Index`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SelectionChangingEventArgs.html#Syncfusion_XForms_TabView_SelectionChangingEventArgs_Index): Gets the value of the index that will be selected. +- [`Cancel`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SelectionChangingEventArgs.html#Syncfusion_XForms_TabView_SelectionChangingEventArgs_Cancel): Gets or sets the boolean value determining if the tab item selection should be canceled. {% tabs %} @@ -188,7 +187,7 @@ namespace TabView ## Selection Changed in Xamarin Tabbed View (SfTabView) -The [`SelectionChanged`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html#Syncfusion_XForms_TabView_SfTabView_SelectionChanged) event is used to notify when the selection is changed by swiping or dynamically setting the [`SelectedIndex`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html#Syncfusion_XForms_TabView_SfTabView_SelectedIndex) property of [`SfTabView`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html). +The [`SelectionChanged`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html#Syncfusion_XForms_TabView_SfTabView_SelectionChanged) event occurs when the selection changes due to swiping or dynamically setting the [`SelectedIndex`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html#Syncfusion_XForms_TabView_SfTabView_SelectedIndex) property of [`SfTabView`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html). {% tabs %} diff --git a/Xamarin/Tabbed-View/TabViewHeaderCustomization.md b/Xamarin/Tabbed-View/TabViewHeaderCustomization.md index 8c86ef253..114aa3927 100644 --- a/Xamarin/Tabbed-View/TabViewHeaderCustomization.md +++ b/Xamarin/Tabbed-View/TabViewHeaderCustomization.md @@ -1,7 +1,7 @@ --- layout: post title: TabView Header Customization in Xamarin Tabbed View | Syncfusion -description: Learn here all about TabView Header Customization support in Syncfusion Xamarin Tabbed View (SfTabView) control and more. +description: Explore header customization options in the Syncfusion Xamarin Tabbed View (SfTabView) control. platform: Xamarin control: TabView documentation: ug @@ -9,11 +9,11 @@ documentation: ug # TabView Header Customization in Xamarin Tabbed View (SfTabView) -## Tab header arrangement +## Tab Header Arrangement -### Share the header space equally +### Share the Header Space Equally -To share the header space to the tabs equally, set the number of tabs that can be distributed in the available space though the [VisibleHeaderCount](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html#Syncfusion_XForms_TabView_SfTabView_VisibleHeaderCount) of [`SfTabView`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html). +To distribute header space equally among the tabs, set the number of tabs that can be spread across the available space using the [VisibleHeaderCount](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html#Syncfusion_XForms_TabView_SfTabView_VisibleHeaderCount) property of [`SfTabView`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html). {% tabs %} @@ -107,9 +107,9 @@ namespace TabViewAutomationSample ![VisibleHeaderCount](images/TabItems/VisibleHeaderCount.png) -### Add all tab items in a single view +### Display All Tab Items in a Single View -When you set the [VisibleHeaderCount](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html#Syncfusion_XForms_TabView_SfTabView_VisibleHeaderCount) to -1, you get all the tab items in a single view based on the width of the visible area in the control and tab count. +When you set the [VisibleHeaderCount](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html#Syncfusion_XForms_TabView_SfTabView_VisibleHeaderCount) to `-1`, all tab items are displayed in a single view based on the control's visible area width and the number of tabs. {% tabs %} @@ -218,15 +218,15 @@ namespace TabViewAutomationSample {% endtabs %} -N> The nullable support for [VisibleHeaderCount](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html#Syncfusion_XForms_TabView_SfTabView_VisibleHeaderCount) only works when [OverFlowMode](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html#Syncfusion_XForms_TabView_SfTabView_OverflowMode) is set to [`Scroll`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.OverflowMode.html#Syncfusion_XForms_TabView_OverflowMode_Scroll) or [`DropDown`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.OverflowMode.html#Syncfusion_XForms_TabView_OverflowMode_DropDown). +> **Note:** Nullable support for [VisibleHeaderCount](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html#Syncfusion_XForms_TabView_SfTabView_VisibleHeaderCount) works only when [OverflowMode](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html#Syncfusion_XForms_TabView_SfTabView_OverflowMode) is set to [`Scroll`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.OverflowMode.html#Syncfusion_XForms_TabView_OverflowMode_Scroll) or [`DropDown`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.OverflowMode.html#Syncfusion_XForms_TabView_OverflowMode_DropDown). ![VisibleHeaderCount](images/TabItems/NullVisibleHeaderCount.jpg) -### Add tab items at auto size +### Add Tab Items at Auto Size -When setting the [`TabWidthMode`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html#Syncfusion_XForms_TabView_SfTabView_TabWidthMode) property as [`BasedOnText`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.TabWidthMode.html#Syncfusion_XForms_TabView_TabWidthMode_BasedOnText) option, tab width is calculated based on the length of the tab item [`Title`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabItem.html#Syncfusion_XForms_TabView_SfTabItem_Title) string. +By setting the [`TabWidthMode`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html#Syncfusion_XForms_TabView_SfTabView_TabWidthMode) property to [`BasedOnText`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.TabWidthMode.html#Syncfusion_XForms_TabView_TabWidthMode_BasedOnText), the tab width is calculated based on the length of the tab item [`Title`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabItem.html#Syncfusion_XForms_TabView_SfTabItem_Title) string. -The default option of [`TabWidthMode`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html#Syncfusion_XForms_TabView_SfTabView_TabWidthMode) property is [`Default`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.TabWidthMode.html#Syncfusion_XForms_TabView_TabWidthMode_Default). +The default setting for [`TabWidthMode`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html#Syncfusion_XForms_TabView_SfTabView_TabWidthMode) is [`Default`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.TabWidthMode.html#Syncfusion_XForms_TabView_TabWidthMode_Default). {% tabs %} @@ -337,12 +337,11 @@ namespace TabViewAutomationSample ![TabItems](images/TabItems/IsAutoTabWidth.gif) - -N> The [`TabWidthMode`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html#Syncfusion_XForms_TabView_SfTabView_TabWidthMode) for [`BasedOnText`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.TabWidthMode.html#Syncfusion_XForms_TabView_TabWidthMode_BasedOnText) is supported only when the [VisibleHeaderCount](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html#Syncfusion_XForms_TabView_SfTabView_VisibleHeaderCount) is not set and [`OverFlowMode`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html#Syncfusion_XForms_TabView_SfTabView_OverflowMode) is set to [`Scroll`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.OverflowMode.html#Syncfusion_XForms_TabView_OverflowMode_Scroll). +> **Note:** The [`TabWidthMode`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html#Syncfusion_XForms_TabView_SfTabView_TabWidthMode) for [`BasedOnText`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.TabWidthMode.html#Syncfusion_XForms_TabView_TabWidthMode_BasedOnText) is supported only when [VisibleHeaderCount](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html#Syncfusion_XForms_TabView_SfTabView_VisibleHeaderCount) is not set and [`OverflowMode`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html#Syncfusion_XForms_TabView_SfTabView_OverflowMode) is set to [`Scroll`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.OverflowMode.html#Syncfusion_XForms_TabView_OverflowMode_Scroll). ## Position of Header in Xamarin Tabbed View (SfTabView) -Tab headers can be positioned either above the content or below the content. This can be done by setting the [`TabHeaderPosition`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html#Syncfusion_XForms_TabView_SfTabView_TabHeaderPosition) property of [`SfTabView`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html). +Tab headers can be positioned either above or below the content. This is configured by setting the [`TabHeaderPosition`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html#Syncfusion_XForms_TabView_SfTabView_TabHeaderPosition) property of [`SfTabView`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html). {% tabs %} @@ -443,7 +442,7 @@ namespace TabView {% endtabs %} -When the header is not needed, set the [`DisplayMode`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html#Syncfusion_XForms_TabView_SfTabView_DisplayMode) property of [`SfTabView`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html) to [`NoHeader`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.TabDisplayMode.html#Syncfusion_XForms_TabView_TabDisplayMode_NoHeader). +To hide the header, set the [`DisplayMode`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html#Syncfusion_XForms_TabView_SfTabView_DisplayMode) property of [`SfTabView`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.SfTabView.html) to [`NoHeader`](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TabView.TabDisplayMode.html#Syncfusion_XForms_TabView_TabDisplayMode_NoHeader). ![Positioning of Header](images/Position-of-Header/HeaderPosition.png)