Merge pull request #1192 from telerik/didi/update-tabview-images-docs

Didi/update tabview images docs

Author: didiyordanova

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.

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

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

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.
 
 <snippet id='tabview-getting-started-xaml'/>
+<snippet id='tabview-getting-started-csharp'/>
 
 **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:
 

controls/tabview/images/header-position.png

@@ -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. 

controls/tabview/images/visual-structure.png

@@ -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**
 

controls/tabview/overview.md

@@ -34,14 +34,21 @@ The following example shows how to add TabView items directly to the Items colle
 	<telerik:TabViewItem HeaderText="View" />
 </telerik:RadTabView>
 ```
+```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**
 
 <snippet id='tabview-getting-started-xaml' />
+<snippet id='tabview-getting-started-csharp' />
 
 > The TabView control displays only the content of the selected item.
 

controls/tabview/selection.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
 </telerik:RadTabView>
 ```
 
-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