Added TabControl to ControlCatalog

samples/ControlCatalog/ControlCatalog.csproj

@@ -73,6 +73,9 @@
     <Compile Include="Pages\MenuPage.xaml.cs">
       <DependentUpon>MenuPage.xaml</DependentUpon>
     </Compile>
+    <Compile Include="Pages\TabControlPage.xaml.cs">
+      <DependentUpon>TabControlPage.xaml</DependentUpon>
+    </Compile>
     <Compile Include="Pages\ToolTipPage.xaml.cs">
       <DependentUpon>ToolTipPage.xaml</DependentUpon>
     </Compile>
@@ -267,6 +270,11 @@
       <SubType>Designer</SubType>
     </EmbeddedResource>
   </ItemGroup>
+  <ItemGroup>
+    <EmbeddedResource Include="Pages\TabControlPage.xaml">
+      <SubType>Designer</SubType>
+    </EmbeddedResource>
+  </ItemGroup>
   <Import Project="$(MSBuildToolsPath)\Microsoft.CSharp.targets" />
   <!-- To modify your build process, add your task inside one of the targets below and uncomment it. 
        Other similar extension points exist, see Microsoft.Common.targets.

samples/ControlCatalog/MainWindow.xaml

@@ -17,6 +17,7 @@
     <TabItem Header="Menu"><pages:MenuPage/></TabItem>
     <TabItem Header="RadioButton"><pages:RadioButtonPage/></TabItem>
     <TabItem Header="Slider"><pages:SliderPage/></TabItem>
+    <TabItem Header="TabControl"><pages:TabControlPage/></TabItem>
     <TabItem Header="TextBox"><pages:TextBoxPage/></TabItem>
     <TabItem Header="ToolTip"><pages:ToolTipPage/></TabItem>
   </TabControl>

samples/ControlCatalog/Pages/TabControlPage.xaml

@@ -0,0 +1,23 @@
+<UserControl xmlns="https://github.com/perspex">
+  <StackPanel Orientation="Vertical" Gap="4">
+    <TextBlock Classes="h1">TabControl</TextBlock>
+    <TextBlock Classes="h2">A tab control that displays a tab strip along with the content of the selected tab</TextBlock>
+
+    <StackPanel Orientation="Vertical"
+                Margin="0,16,0,0"
+                HorizontalAlignment="Center"
+                Gap="16">
+      <TabControl MinWidth="300">
+        <TabItem Header="Arch">
+          <Image Source="resm:ControlCatalog.Assets.delicate-arch-896885_640.jpg" Height="200"/>
+        </TabItem>
+        <TabItem Header="Deer">
+          <Image Source="resm:ControlCatalog.Assets.hirsch-899118_640.jpg" Height="200"/>
+        </TabItem>
+        <TabItem Header="Maple Leaf">
+          <Image Source="resm:ControlCatalog.Assets.maple-leaf-888807_640.jpg" Height="200"/>
+        </TabItem>
+      </TabControl>
+    </StackPanel>
+  </StackPanel>
+</UserControl>

samples/ControlCatalog/Pages/TabControlPage.xaml.cs

@@ -0,0 +1,18 @@
+using Perspex.Controls;
+using Perspex.Markup.Xaml;
+
+namespace ControlCatalog.Pages
+{
+    public class TabControlPage : UserControl
+    {
+        public TabControlPage()
+        {
+            this.InitializeComponent();
+        }
+
+        private void InitializeComponent()
+        {
+            PerspexXamlLoader.Load(this);
+        }
+    }
+}

samples/ControlCatalog/SideBar.xaml

@@ -27,14 +27,14 @@
     </Setter>
   </Style>
 
-  <Style Selector="TabControl.sidebar TabStripItem">
+  <Style Selector="TabControl.sidebar /template/ TabStripItem">
     <Setter Property="Foreground" Value="White"/>
     <Setter Property="FontSize" Value="14"/>
     <Setter Property="Margin" Value="0"/>
     <Setter Property="Padding" Value="16"/>
   </Style>
 
-  <Style Selector="TabControl.sidebar TabStripItem:selected">
+  <Style Selector="TabControl.sidebar /template/ TabStripItem:selected">
     <Setter Property="Background" Value="{StyleResource ThemeAccentBrush2}"/>
   </Style>
 </Styles>