Improve TabStrip reference page (#601)

* Improve TabStrip reference page

* address TabStrip review, improve clarity

* fix TabStripItem markup

Author: stevemonaco

docs/reference/controls/tabstrip.md

@@ -9,28 +9,36 @@ import TabStripNavigation from '/img/reference/controls/tabstrip/tabstrip-naviga
 
 Displays a strip of tab headers. You can use this control as a horizontal menu.
 
-The tab strip is comprised `<TabItem>` elements. These are displayed in the sequence that they appear in the XAML. 
+The `TabStrip` is composed of `TabStripItem` children. `TabStripItem`s are displayed in order of appearance and can be created by either: 1. a collection of `TabStripItem`s or 2. generated by `ItemsSource`.
 
-## Useful Property
+Unlike `TabControl`, `TabStrip` is not responsible for presenting the content of the selected tab. Instead, `TabStrip` requires developers to respond to `SelectionChanged` events or `SelectedItem` property changes and then present the desired content with a separate control, such as `ContentControl`. This gives developers full control over the displayed content and enables use cases such as custom view caching.
 
-You will probably use this property most often:
-
-<table><thead><tr><th width="244">Property</th><th>Description</th></tr></thead><tbody><tr><td><code>TabItem.Header</code></td><td>The text for the tab.</td></tr></tbody></table>
-
-## Example
+## Example: TabStrip with TabStripItem
 
 ```xml
 <TabStrip Margin="5">
-  <TabItem Header="Tab 1"/>
-  <TabItem Header="Tab 2"/>
-  <TabItem Header="Tab 3"/>
+  <TabStripItem>Tab 1</TabStripItem>
+  <TabStripItem>Tab 2</TabStripItem>
+  <TabStripItem>Tab 3</TabStripItem>
 </TabStrip>
 ```
 
 It looks like this running on Windows:
 
 <img src={TabStripNavigation} alt="" />
 
+## Example: TabStrip with ItemsSource
+
+```xml
+<TabStrip ItemsSource="{Binding MyTabs}" SelectedItem="{Binding MySelectedItem}">
+    <TabStrip.ItemTemplate>
+        <DataTemplate x:DataType="vm:MyViewModel">
+            <TextBlock Text="{Binding Header}"/>
+        </DataTemplate>
+    </TabStrip.ItemTemplate>
+</TabStrip>
+```
+
 ## More Information
 
 :::info

i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/tabstrip.md

@@ -8,21 +8,15 @@ import TabStripNavigation from '/img/reference/controls/tabstrip/tabstrip-naviga
 
 显示一条选项卡头的条带。您可以将此控件用作水平菜单。
 
-选项卡条由 `<TabItem>` 元素组成。这些元素按它们在 XAML 中出现的顺序显示。
-
-## 有用的属性
-
-您可能最常使用此属性：
-
-<table><thead><tr><th width="244">属性</th><th>描述</th></tr></thead><tbody><tr><td><code>TabItem.Header</code></td><td>选项卡的文本。</td></tr></tbody></table>
+选项卡条由 `<TabStripItem>` 元素组成。这些元素按它们在 XAML 中出现的顺序显示。
 
 ## 示例
 
 ```xml
 <TabStrip Margin="5">
-  <TabItem Header="Tab 1"/>
-  <TabItem Header="Tab 2"/>
-  <TabItem Header="Tab 3"/>
+  <TabStripItem>Tab 1</TabStripItem>
+  <TabStripItem>Tab 2</TabStripItem>
+  <TabStripItem>Tab 3</TabStripItem>
 </TabStrip>
 ```