Fixed up control catalog sidebar.

samples/ControlCatalog/SideBar.paml

@@ -2,38 +2,39 @@
   <Style Selector="TabControl.sidebar">
     <Setter Property="Template">
       <ControlTemplate>
-        <Grid ColumnDefinitions="Auto,*">
+        <DockPanel>
-          <Border Width="190" Background="#1976D2">
+          <Border MinWidth="190" Background="#1976D2" DockPanel.Dock="Left">
-            <TabStrip Classes="sidebar"
+            <TabStrip Name="PART_TabStrip"
+                      MemberSelector="{Static TabControl.HeaderSelector}"
                       Items="{TemplateBinding Items}"
                       SelectedIndex="{TemplateBinding Path=SelectedIndex, Mode=TwoWay}">
               <TabStrip.ItemsPanel>
                 <ItemsPanelTemplate>
-                  <StackPanel Orientation="Vertical" Gap="4" Margin="0,10,0,0"/>
+                  <StackPanel Orientation="Vertical"/>
                 </ItemsPanelTemplate>
               </TabStrip.ItemsPanel>
             </TabStrip>
           </Border>
-          <ScrollViewer Grid.Column="1">
+          <Carousel Name="PART_Content"
-            <Carousel Items="{TemplateBinding Items}"
+                    Margin="8 0 0 0"
-                      MemberSelector="Content"
+                    MemberSelector="{Static TabControl.ContentSelector}"
-                      SelectedIndex="{TemplateBinding Path=SelectedIndex}"
+                    Items="{TemplateBinding Items}"
-                      Transition="{TemplateBinding Transition}"
+                    SelectedIndex="{TemplateBinding Path=SelectedIndex}"
-                      Margin="8,0,0,0"/>
+                    Transition="{TemplateBinding Transition}"
-          </ScrollViewer>
+                    Grid.Row="1"/>
-        </Grid>
+        </DockPanel>
       </ControlTemplate>
     </Setter>
   </Style>
 
-  <Style Selector="TabStrip.sidebar TabItem">
+  <Style Selector="TabControl.sidebar TabStripItem">
     <Setter Property="Foreground" Value="White"/>
     <Setter Property="FontSize" Value="14"/>
     <Setter Property="Margin" Value="0"/>
-    <Setter Property="Padding" Value="8"/>
+    <Setter Property="Padding" Value="16"/>
   </Style>
 
-  <Style Selector="TabStrip.sidebar TabItem:selected">
+  <Style Selector="TabControl.sidebar TabStripItem:selected">
     <Setter Property="Background" Value="#20ffffff"/>
   </Style>
 </Styles>

src/Perspex.Themes.Default/TabStripItem.paml

@@ -4,9 +4,13 @@
     <Setter Property="Foreground" Value="Gray"/>
     <Setter Property="Template">
       <ControlTemplate>
-        <ContentPresenter Name="PART_ContentPresenter"
+        <Border Background="{TemplateBinding Background}"
+                BorderBrush="{TemplateBinding BorderBrush}"
+                BorderThickness="{TemplateBinding BorderThickness}">
+          <ContentPresenter Name="PART_ContentPresenter"
                           Content="{TemplateBinding Content}"
                           Margin="{TemplateBinding Padding}"/>
+        </Border>
       </ControlTemplate>
     </Setter>
   </Style>