diff --git a/docs/guides/data-binding/how-to-bind-tabs.md b/docs/guides/data-binding/how-to-bind-tabs.md index ef8b2247e..61dbd89c2 100644 --- a/docs/guides/data-binding/how-to-bind-tabs.md +++ b/docs/guides/data-binding/how-to-bind-tabs.md @@ -6,20 +6,20 @@ title: How To Bind Tabs ## Binding Support Example -You can dynamically create tab items with **data binding**. To do this, bind the `ItemsSource` property of a tab control to an array of objects representing the tab header and content. +You can dynamically create tab items with **data binding**. To do this, bind the `ItemsSource` property of a tab control to a collection of objects representing the tab header and content. You can then use a **data template** to display the objects. -This example uses an array of objects created from this `TabItemViewModel` class: +This example uses a collection of objects created from this `TabItemTemplate` class: ```csharp namespace MyApp.ViewModel; -public class TabItemViewModel +public class TabItemTemplate { public string Header { get; } public string Content { get; } - public TabItemViewModel(string header, string content) + public TabItemTemplate(string header, string content) { Header = header; Content = content; @@ -27,21 +27,21 @@ public class TabItemViewModel } ``` -Create an array of two `TabItemViewModel` instances and bind it to the DataContext. +Create a property that accesses a collection of `TabItemTemplate` instances. ```csharp -DataContext = new TabItemViewModel[] { - new TabItemViewModel("One", "Some content on first tab"), - new TabItemViewModel("Two", "Some content on second tab"), +public ObservableCollection Items { get; set; } = new() { + new TabItemTemplate("One", "Some content on first tab"), + new TabItemTemplate("Two", "Some content on second tab"), }; ``` The `TabStrip` header content is defined by ItemTemplate property, while `TabItem`'s content is defined by ContentTemplate property. -Finally create a `TabControl` and bind its `ItemsSource` property to the DataContext. +Finally create a `TabControl` and bind its `ItemsSource` property to the `Items`. ```xml - + @@ -54,7 +54,7 @@ Finally create a `TabControl` and bind its `ItemsSource` property to the DataCon xmlns:vm="using:MyApp.ViewModel" or xmlns:vm="clr-namespace:MyApp.ViewModel;assembly=MyApp.ViewModel" --> - +