diff --git a/controls/autocomplete/configuration.md b/controls/autocomplete/configuration.md index 43ddba19e..5726f107e 100644 --- a/controls/autocomplete/configuration.md +++ b/controls/autocomplete/configuration.md @@ -65,7 +65,7 @@ By default the search is triggered as soon as the user types into the input fiel * `ShowSuggestionView` (`bool`)—Determine the visibility of the popup containing the search results of the AutoComplete. The default value is `True`. * `SuggestionViewHeight` (`double`)—Defines the height of the `SuggestionView`. -* `SuggestionViewMaxHeight` (`double`)—Defines the max height of the `SuggestionView`. Always set the `SuggestionViewMaxHeight`, so that you can have a predefined heigh for the suggestion view. If using both the `SuggestionViewMaxHeight` and `SuggestionViewHeight` properties, the max height value must be heigher. +* `SuggestionViewMaxHeight` (`double`)—Defines the max height of the `SuggestionView`. Always set the `SuggestionViewMaxHeight`, so that you can have a predefined height for the suggestion view. If using both the `SuggestionViewMaxHeight` and `SuggestionViewHeight` properties, the max height value must be higher. * `SuggestionViewBorderColor` (`Color`)—Defines the color of the suggestion view border (drop-down). * `SuggestionViewBorderThickness` (`Thickness`)—Defines the thickness of the border around the suggestion view. * `SuggestionViewCornerRadius` (`Thickness`)—Defines the corner radius applied to the suggestion view. diff --git a/controls/autocomplete/display-text.md b/controls/autocomplete/display-text.md index 6b059e1e8..f6d7fb1c7 100644 --- a/controls/autocomplete/display-text.md +++ b/controls/autocomplete/display-text.md @@ -14,7 +14,7 @@ The AutoComplete control provides the option to format the visualized text in th To define the formatter of the selected item, you can use the following options: -* Set the `DisplayTextFortammer` property and define the name of the property from the business object which will be displayed after formatting. +* Set the `DisplayTextFormatter` property and define the name of the property from the business object which will be displayed after formatting. * Create a custom class that inherits from `IDisplayTextFormatter` and implement a custom logic how the selected item can be formatted. ## Example diff --git a/controls/autocomplete/overview.md b/controls/autocomplete/overview.md index b51ffd38b..6b32b61f3 100644 --- a/controls/autocomplete/overview.md +++ b/controls/autocomplete/overview.md @@ -23,9 +23,9 @@ The Telerik UI for .NET MAUI AutoComplete can automatically complete user input * [Custom Templates]({%slug autocomplete-custom-templates%})—If any of the default templates do not fit in a particular scenario, you can define a custom template. * [Remote Search]({%slug autocomplete-remote-search%})—Allows you to take the user input, trigger a custom searching algorithm and assign the results to the ItemSource of the AutoComplete. * [Suggestion view visibility]({%slug autocomplete-configuration%}#suggestionview-visibility)—AutoComplete provides the ability to hide the view with the suggestions. -* [Suggestion view position]—AutoComplete gives your the option to specify whether the `SuggestionView` will be displayed—above or under the control. +* [Suggestion view position]({%slug autocomplete-configuration%}#suggestionview-position)—AutoComplete gives you the option to specify whether the `SuggestionView` will be displayed—above or under the control. * [Highlight customization]({%slug autocomplete-styling%}#hightlight-customization)—You can customize the highlight color of the suggestion items. -* [Nested properties support]()—This allows binding of a complex object to the `TextSearchPath` property. +* [Nested properties support]({%slug autocomplete-data-binding%})—This allows binding of a complex object to the `TextSearchPath` property. * [Styling options]({%slug autocomplete-styling%})—For changing the control's border brush and thickness, font options, suggestion item highlight text color and more. # Next Steps diff --git a/controls/tabview/getting-started.md b/controls/tabview/getting-started.md index 0be179a2d..4d5745f31 100644 --- a/controls/tabview/getting-started.md +++ b/controls/tabview/getting-started.md @@ -33,12 +33,16 @@ Before adding the TabView, you need to: * To define the header of a `TabViewItem` use its `HeaderText` property as in the example. + **2.** Add the following namespace: ```XAML xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui" ``` + ```C# + using Telerik.Maui.Controls; + ``` **3.** Register the Telerik controls through the `Telerik.Maui.Controls.Compatibility.UseTelerik` extension method called inside the `CreateMauiApp` method of the `MauiProgram.cs` file of your project: diff --git a/controls/tabview/images/header-position.png b/controls/tabview/images/header-position.png index c6d5768fe..39a216f15 100644 Binary files a/controls/tabview/images/header-position.png and b/controls/tabview/images/header-position.png differ diff --git a/controls/tabview/images/visual-structure.png b/controls/tabview/images/visual-structure.png index ae59c1ce1..05398fad7 100644 Binary files a/controls/tabview/images/visual-structure.png and b/controls/tabview/images/visual-structure.png differ diff --git a/controls/tabview/overview.md b/controls/tabview/overview.md index abbbe2569..c973d27fb 100644 --- a/controls/tabview/overview.md +++ b/controls/tabview/overview.md @@ -27,6 +27,7 @@ If you prefer video instructions, watch this short MAUI TabView video tutorial. * [Header Customization]({%slug tabview-configuration%})—TabView provides means for customizing the header area containing the tabs—through the `HeaderStyle` property you can change its position, orientation, and spacing between the tabs; through the `HeaderTemplate` property you can modify its look and feel. * [Image support in the header]({%slug tabview-item%})—add images inside the header. In addition you can controls the position of the image and the spacing between the image and the header text. * [Change the header position]({%slug tabview-configuration%}#setting-the-headers-position) to top, bottom, left or right. +* [Data Binding]({%slug tabview-data-binding%})—TabView supports binding to a complex object through the `ItemsSource` property. * [Tabs Customization]({%slug tabview-item%})—You can customize the appearance of each tab. Each tab has a header and content. The `TabViewItem` class gives you the option to set Tab's header text, add an image which will be displayed in the header, add a content and decide whether the tab will be selected, visible and enabled. * [Flexible styling API]({%slug tabview-styling%})—The TabView provides a number of styling capabilities, which enable you to style its header, header items and content. In addition, there is a styling option for the TabView control. * [Templates]({%slug tabview-templates%})—The TabView provides templates for its header, header items and content. diff --git a/controls/tabview/selection.md b/controls/tabview/selection.md index 025170cec..807b44d3c 100644 --- a/controls/tabview/selection.md +++ b/controls/tabview/selection.md @@ -11,13 +11,23 @@ position: 7 The Telerik TabView for .NET MAUI exposes properties that help you work with the item selection: +## Selection through the UI + +The `TabViewItem` can be selected through the UI by tapping on the header item. When tapping on the header item, the `SelectedIndex` and `SelectedItem` properties get updated. + +## Programmatic Selection + +You can programmatically select a `TabViewItem` by setting the following properties: + * `SelectedItem` (of type `Telerik.Maui.Controls.TabViewItem`)—Defines the selected item. The value of this property affects which header item is selected in the header area and which content is displayed in the content area. * `SelectedIndex` (`int`)—Specifies the index of the currently selected `TabViewItem`. The value of this property affects which header item is selected in the header area and which content is displayed in the content area. -* `TabViewItem` can be selected by setting its `IsSelected`(`bool`) property to `True`. +* `IsSelected` (`bool`)—Set the property directly to the `TabViewItem` to initiale a selection. + +### Animation -* `AnimationEasing` (`Microsoft.Maui.Easing`)—Specifies the easing of the animation that is run when the selected index changes. -* `AnimationDuration` (`int`)—Specifies the duration in milliseconds of the animation that is run when the selected index changes. +* `AnimationEasing` (`Microsoft.Maui.Easing`)—Specifies the easing of the animation that is run when the value of the `SelectedIndex` property changes. +* `AnimationDuration` (`int`)—Specifies the duration in milliseconds of the animation that is run when the value of the `SelectedIndex` property changes. **Example with Selected Item** diff --git a/controls/tabview/tabviewitem.md b/controls/tabview/tabviewitem.md index 4d2c8136b..d692b147a 100644 --- a/controls/tabview/tabviewitem.md +++ b/controls/tabview/tabviewitem.md @@ -34,14 +34,21 @@ The following example shows how to add TabView items directly to the Items colle ``` +```C# +var tabView = new RadTabView(); +tabView.Items.Add(new Telerik.Maui.Controls.TabViewItem { HeaderText="Home" }); +tabView.Items.Add(new Telerik.Maui.Controls.TabViewItem { HeaderText = "Folder" }); +tabView.Items.Add(new Telerik.Maui.Controls.TabViewItem { HeaderText = "View" }); +``` ## Defining Content You can define the content of a `TabViewItem` via its `Content` property or `ContentTemplate` property. -### Example with Content Property +**Example with Content Property** + > The TabView control displays only the content of the selected item. diff --git a/controls/tabview/templates.md b/controls/tabview/templates.md index 98301c0b5..d14374bd3 100644 --- a/controls/tabview/templates.md +++ b/controls/tabview/templates.md @@ -11,9 +11,9 @@ position: 14 The TabView provides set of templates for its elements. If you want to change the TabView appearance you can use the provided templates: -* `HeaderTemplate` (`ControlTemplate`)—Defines the template of the entire header area. This includes the tabs in the Header (Header area + Header items). +* `HeaderTemplate` (`ControlTemplate`)—Defines the template of the entire TabView Header. This includes the tabs in the Header (Header area + Header items). * `HeaderItemTemplate` (`ControlTemplate`)—Defines the template of the individual header items. -* `ContentTemplate` (`ControlTemplate`)—Defined the template of the entire content area. +* `ContentTemplate` (`ControlTemplate`)—Defined the template of the entire TabView Content. ![.NET MAUI TabView Visual Structure](images/visual-structure.png "Visual elements of TabView control") @@ -39,13 +39,8 @@ The TabView provides set of templates for its elements. If you want to change th ``` -And the namespace used: - -```XAML -xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui" -``` - ->note If you do not want to change the default templates you can customize the look of the TabView, TabView Header, TabView `HeaderItem` and TabView Content using the flexible styling API. For more details review the [TabView Styling article]({%slug tabview-styling%}). +> If you want to review the default TabView `HeaderTemplate`, `HeaderItemTemplate` and `ContentTemplate`, add the [TelerikTheming]({%slug themes-overview%}) to the project and go to `TelerikTheming/Styles/Platform/TabView.xaml` file. +> If you do not want to change the default templates you can customize the look of the TabView, TabView Header, TabView `HeaderItem` and TabView Content using the flexible styling API. For more details review the [TabView Styling article]({%slug tabview-styling%}). ## See Also diff --git a/controls/tabview/visual-structure.md b/controls/tabview/visual-structure.md index 5dcf2cab1..c7deeecbb 100644 --- a/controls/tabview/visual-structure.md +++ b/controls/tabview/visual-structure.md @@ -15,9 +15,11 @@ The TabView uses a set of visual elements when rendered. ## Displayed Elements -- **Header area**—The area with the TabView header. The Header holds all TabView header items. -- **Header items**—The TabView header items. -- **Content area**—The content area corresponding to each header item. +- **TabView Header**—The area that holds all TabView header items. +- **Header Item**—The item that represents single header item of the `TabViewItem`. +- **Header Text**—The text inside the header item. +- **Selected Item**—The selected tab item. The header item background color changes and the content of the corresponding header item that is selected. +- **TabView Content**—The content area corresponding to each header item. ## See Also diff --git a/demos-and-sample-apps/crypto-app.md b/demos-and-sample-apps/crypto-app.md index 9960b033a..7b514e4c9 100644 --- a/demos-and-sample-apps/crypto-app.md +++ b/demos-and-sample-apps/crypto-app.md @@ -62,10 +62,10 @@ You can access the SDKBrowser application in the following ways: `dotnet build -t:Run -f net8.0-ios`—This command starts a default simulator. To run the application on specific device, you need to provide the device ID. For example: `dotnet build -t:Run -f net8.0-ios -p:_DeviceName=:v2:udid=02C556DA-64B8-440B-8F06-F8C56BB7CC22` where the device ID is `02C556DA-64B8-440B-8F06-F8C56BB7CC22`. To find the ID: - 1. Open Xcode, - 2. Click Devices from the Window menu. - 3. Select Connected device. - 4. Under Device Information, you will get an identifier, or UDID, of the device. + 1. Open Xcode. + 2. Click Devices from the Window menu. + 3. Select Connected device. + 4. Under Device Information, you will get an identifier, or UDID, of the device. * CryptoTracker application on iOS.