From da8e31a3bf2f678d09338c639b104da4d4cd4ef4 Mon Sep 17 00:00:00 2001
From: Ranjesh <28935693+ranjeshj@users.noreply.github.com>
Date: Wed, 15 Jan 2020 10:08:52 -0800
Subject: [PATCH] Make TabItems as content property of TabView (#1845)

---
 dev/TabView/TabView.idl             |   1 +
 dev/TabView/TestUI/TabViewPage.xaml | 117 ++++++++++++++--------------
 2 files changed, 58 insertions(+), 60 deletions(-)

diff --git a/dev/TabView/TabView.idl b/dev/TabView/TabView.idl
index 17a7d13200..c9b824bba9 100644
--- a/dev/TabView/TabView.idl
+++ b/dev/TabView/TabView.idl
@@ -46,6 +46,7 @@ runtimeclass TabViewTabDragCompletedEventArgs
 
 [WUXC_VERSION_MUXONLY]
 [webhosthidden]
+[contentproperty("TabItems")]
 unsealed runtimeclass TabView : Windows.UI.Xaml.Controls.Control
 {
     TabView();
diff --git a/dev/TabView/TestUI/TabViewPage.xaml b/dev/TabView/TestUI/TabViewPage.xaml
index 109cb027ab..798379a988 100644
--- a/dev/TabView/TestUI/TabViewPage.xaml
+++ b/dev/TabView/TestUI/TabViewPage.xaml
@@ -111,66 +111,63 @@
                         </Grid>
                     </controls:TabView.TabStripFooter>
 
-                    <controls:TabView.TabItems>
-
-                        <controls:TabViewItem x:Name="FirstTab" AutomationProperties.Name="FirstTab" Header="Home" CloseRequested="FirstTab_CloseRequested" ToolTipService.ToolTip="Custom Tooltip">
-                            <controls:TabViewItem.IconSource>
-                                <controls:SymbolIconSource Symbol="Home"/>
-                            </controls:TabViewItem.IconSource>
-
-                            <StackPanel x:Name="FirstTabContent" AutomationProperties.Name="FirstTabContent">
-                                <Button x:Name="FirstTabButton" AutomationProperties.Name="FirstTabButton" Margin="8" FontSize="20">Home Button</Button>
-                                <Button x:Name="TabViewSizingPageButton" AutomationProperties.Name="TabViewSizingPageButton" Margin="8" Click="TabViewSizingPageButton_Click" FontSize="20">TabView Sizing Page</Button>
-                            </StackPanel>
-                        </controls:TabViewItem>
-
-                        <controls:TabViewItem x:Name="SecondTab" Header="SecondTab" IsClosable="True">
-                            <controls:TabViewItem.IconSource>
-                                <controls:SymbolIconSource Symbol="Shop"/>
-                            </controls:TabViewItem.IconSource>
-
-                            <StackPanel Padding="16">
-                                <TextBlock>Shop text</TextBlock>
-                                <Button Content="SecondTabButton" AutomationProperties.Name="SecondTabButton"/>
-                            </StackPanel>
-                        </controls:TabViewItem>
-
-                        <controls:TabViewItem x:Name="LongHeaderTab" AutomationProperties.Name="LongHeaderTab" Header="Long Header No Icon">
-                            <StackPanel Padding="16">
-                                <TextBlock >Emoji text</TextBlock>
-                                <Button Content="Button 3"/>
-                            </StackPanel>
-                        </controls:TabViewItem>
-
-                        <controls:TabViewItem x:Name="NotCloseableTab" AutomationProperties.Name="NotCloseableTab" Header="Video" IsClosable="False">
-                            <controls:TabViewItem.IconSource>
-                                <controls:SymbolIconSource Symbol="Video"/>
-                            </controls:TabViewItem.IconSource>
-
-                            <StackPanel>
-                                <TextBlock Padding="16">This tab can't be closed.</TextBlock>
-                            </StackPanel>
-                        </controls:TabViewItem>
-
-                        <controls:TabViewItem x:Name="DisabledTab" AutomationProperties.Name="DisabledTab" Header="Disabled" IsEnabled="False">
-                            <controls:TabViewItem.IconSource>
-                                <controls:SymbolIconSource Symbol="Admin"/>
-                            </controls:TabViewItem.IconSource>
-
-                            <StackPanel>
-                                <TextBlock Padding="16">This tab can't be selected.</TextBlock>
-                            </StackPanel>
-                        </controls:TabViewItem>
-
-                        <controls:TabViewItem x:Name="LastTab" AutomationProperties.Name="LastTab" Header="Contact">
-                            <controls:TabViewItem.IconSource>
-                                <controls:SymbolIconSource Symbol="Contact"/>
-                            </controls:TabViewItem.IconSource>
-
-                            <TextBlock x:Name="LastTabContent" AutomationProperties.Name="LastTabContent" Padding="16">Contact text</TextBlock>
-                        </controls:TabViewItem>
-
-                    </controls:TabView.TabItems>
+                    <controls:TabViewItem x:Name="FirstTab" AutomationProperties.Name="FirstTab" Header="Home" CloseRequested="FirstTab_CloseRequested" ToolTipService.ToolTip="Custom Tooltip">
+                        <controls:TabViewItem.IconSource>
+                            <controls:SymbolIconSource Symbol="Home"/>
+                        </controls:TabViewItem.IconSource>
+
+                        <StackPanel x:Name="FirstTabContent" AutomationProperties.Name="FirstTabContent">
+                            <Button x:Name="FirstTabButton" AutomationProperties.Name="FirstTabButton" Margin="8" FontSize="20">Home Button</Button>
+                            <Button x:Name="TabViewSizingPageButton" AutomationProperties.Name="TabViewSizingPageButton" Margin="8" Click="TabViewSizingPageButton_Click" FontSize="20">TabView Sizing Page</Button>
+                        </StackPanel>
+                    </controls:TabViewItem>
+
+                    <controls:TabViewItem x:Name="SecondTab" Header="SecondTab" IsClosable="True">
+                        <controls:TabViewItem.IconSource>
+                            <controls:SymbolIconSource Symbol="Shop"/>
+                        </controls:TabViewItem.IconSource>
+
+                        <StackPanel Padding="16">
+                            <TextBlock>Shop text</TextBlock>
+                            <Button Content="SecondTabButton" AutomationProperties.Name="SecondTabButton"/>
+                        </StackPanel>
+                    </controls:TabViewItem>
+
+                    <controls:TabViewItem x:Name="LongHeaderTab" AutomationProperties.Name="LongHeaderTab" Header="Long Header No Icon">
+                        <StackPanel Padding="16">
+                            <TextBlock >Emoji text</TextBlock>
+                            <Button Content="Button 3"/>
+                        </StackPanel>
+                    </controls:TabViewItem>
+
+                    <controls:TabViewItem x:Name="NotCloseableTab" AutomationProperties.Name="NotCloseableTab" Header="Video" IsClosable="False">
+                        <controls:TabViewItem.IconSource>
+                            <controls:SymbolIconSource Symbol="Video"/>
+                        </controls:TabViewItem.IconSource>
+
+                        <StackPanel>
+                            <TextBlock Padding="16">This tab can't be closed.</TextBlock>
+                        </StackPanel>
+                    </controls:TabViewItem>
+
+                    <controls:TabViewItem x:Name="DisabledTab" AutomationProperties.Name="DisabledTab" Header="Disabled" IsEnabled="False">
+                        <controls:TabViewItem.IconSource>
+                            <controls:SymbolIconSource Symbol="Admin"/>
+                        </controls:TabViewItem.IconSource>
+
+                        <StackPanel>
+                            <TextBlock Padding="16">This tab can't be selected.</TextBlock>
+                        </StackPanel>
+                    </controls:TabViewItem>
+
+                    <controls:TabViewItem x:Name="LastTab" AutomationProperties.Name="LastTab" Header="Contact">
+                        <controls:TabViewItem.IconSource>
+                            <controls:SymbolIconSource Symbol="Contact"/>
+                        </controls:TabViewItem.IconSource>
+
+                        <TextBlock x:Name="LastTabContent" AutomationProperties.Name="LastTabContent" Padding="16">Contact text</TextBlock>
+                    </controls:TabViewItem>
+
                 </controls:TabView>
 
                 <Grid Grid.Row="1">