Tab control extended (#2544)

* Uncomment TabControl and TabItem default style and Tweak it a bit and format the document * Enable the new TabControl/TabItem Styles by default for Material 2/3 * Add a new Tabs UserControl to the Main Demo App to show the new styles * Tabs page in demo app rework, wip TopIcon for TabItem * TabItem Foreground bug fix * Demo page edited * Removed unnecessary properties * Placement fix for TabControl header when left or right * Filled style implemented * Update MainDemo.Wpf/Domain/MainWindowViewModel.cs Co-authored-by: Kevin B <Keboo@users.noreply.github.com> * Different sizes added to Demo app * Shadows fixed * PART_ColorZone renamed to PART_HeaderCard Co-authored-by: Ahmed Mohamed Abdel-Razek <ahmed_master23@hotmail.com> Co-authored-by: Kevin B <Keboo@users.noreply.github.com>
MaterialDesignInXAML · Dec 30, 2021 · 73187ef · 73187ef
1 parent 42c475b
commit 73187ef
Show file tree

Hide file tree

Showing 7 changed files with 856 additions and 316 deletions.
diff --git a/MainDemo.Wpf/Domain/MainWindowViewModel.cs b/MainDemo.Wpf/Domain/MainWindowViewModel.cs
@@ -286,6 +286,15 @@ private static IEnumerable<DemoItem> GenerateDemoItems(ISnackbarMessageQueue sna
                     DocumentationLink.StyleLink("ListView")
                 });
 
+            yield return new DemoItem(
+                "Tabs",
+                typeof(Tabs),
+                new[]
+                {
+                    DocumentationLink.DemoPageLink<Tabs>(),
+                    DocumentationLink.StyleLink("TabControl")
+                });
+
             yield return new DemoItem(
                 "Trees",
                 typeof(Trees),

diff --git a/MainDemo.Wpf/Tabs.xaml b/MainDemo.Wpf/Tabs.xaml
diff --git a/MainDemo.Wpf/Tabs.xaml.cs b/MainDemo.Wpf/Tabs.xaml.cs
@@ -0,0 +1,28 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Data;
+using System.Windows.Documents;
+using System.Windows.Input;
+using System.Windows.Media;
+using System.Windows.Media.Imaging;
+using System.Windows.Navigation;
+using System.Windows.Shapes;
+
+namespace MaterialDesignDemo
+{
+    /// <summary>
+    /// Interaction logic for Tabs.xaml
+    /// </summary>
+    public partial class Tabs : UserControl
+    {
+        public Tabs()
+        {
+            InitializeComponent();
+        }
+    }
+}
diff --git a/MaterialDesignThemes.Wpf/Themes/MaterialDesign2.Defaults.xaml b/MaterialDesignThemes.Wpf/Themes/MaterialDesign2.Defaults.xaml
@@ -81,6 +81,8 @@
     <Style TargetType="{x:Type ScrollBar}" BasedOn="{StaticResource MaterialDesignScrollBar}" />
     <Style TargetType="{x:Type ScrollViewer}" BasedOn="{StaticResource MaterialDesignScrollViewer}" />
     <Style TargetType="{x:Type Slider}" BasedOn="{StaticResource MaterialDesignSlider}" />
+    <Style TargetType="{x:Type TabControl}" BasedOn="{StaticResource MaterialDesignTabControl}" />
+    <Style TargetType="{x:Type TabItem}" BasedOn="{StaticResource MaterialDesignTabItem}" />
     <Style TargetType="{x:Type TextBox}" BasedOn="{StaticResource MaterialDesignTextBox}" />
     <Style TargetType="{x:Type ToggleButton}" BasedOn="{StaticResource MaterialDesignSwitchToggleButton}" />
     <Style TargetType="{x:Type ToolBar}" BasedOn="{StaticResource MaterialDesignToolBar}" />

diff --git a/MaterialDesignThemes.Wpf/Themes/MaterialDesign3.Defaults.xaml b/MaterialDesignThemes.Wpf/Themes/MaterialDesign3.Defaults.xaml
@@ -83,6 +83,8 @@
     <Style TargetType="{x:Type ScrollBar}" BasedOn="{StaticResource MaterialDesignScrollBar}" />
     <Style TargetType="{x:Type ScrollViewer}" BasedOn="{StaticResource MaterialDesignScrollViewer}" />
     <Style TargetType="{x:Type Slider}" BasedOn="{StaticResource MaterialDesignSlider}" />
+    <Style TargetType="{x:Type TabControl}" BasedOn="{StaticResource MaterialDesignTabControl}" />
+    <Style TargetType="{x:Type TabItem}" BasedOn="{StaticResource MaterialDesignTabItem}" />
     <Style TargetType="{x:Type TextBox}" BasedOn="{StaticResource MaterialDesignTextBox}" />
     <Style TargetType="{x:Type ToggleButton}" BasedOn="{StaticResource MaterialDesignSwitchToggleButton}" />
     <Style TargetType="{x:Type ToolBar}" BasedOn="{StaticResource MaterialDesignToolBar}" />

diff --git a/MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.Defaults.xaml b/MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.Defaults.xaml
@@ -1,7 +1,6 @@
-<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
 
-    <!-- use this resource dictionary to set up the most common themese for standard controls -->
+    <!--  use this resource dictionary to set up the most common themese for standard controls  -->
 
     <ResourceDictionary.MergedDictionaries>
         <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Button.xaml" />
@@ -43,59 +42,70 @@
         <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.ValidationErrorTemplate.xaml" />
         <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Window.xaml" />
     </ResourceDictionary.MergedDictionaries>
-    
-    <SolidColorBrush x:Key="MaterialDesignLightBackground" Color="#FFFAFAFA"/>
-    <SolidColorBrush x:Key="MaterialDesignLightForeground" Color="#DD000000"/>
-    <SolidColorBrush x:Key="MaterialDesignDarkBackground" Color="#FF303030"/>
-    <SolidColorBrush x:Key="MaterialDesignDarkForeground" Color="#FFFAFAFA"/>
+
+    <SolidColorBrush x:Key="MaterialDesignLightBackground" Color="#FFFAFAFA" />
+    <SolidColorBrush x:Key="MaterialDesignLightForeground" Color="#DD000000" />
+    <SolidColorBrush x:Key="MaterialDesignDarkBackground" Color="#FF303030" />
+    <SolidColorBrush x:Key="MaterialDesignDarkForeground" Color="#FFFAFAFA" />
     <SolidColorBrush x:Key="MaterialDesignDarkSeparatorBackground" Color="#1F000000" />
     <SolidColorBrush x:Key="MaterialDesignLightSeparatorBackground" Color="#1FFFFFFF" />
-
-    <Style TargetType="{x:Type Button}" BasedOn="{StaticResource MaterialDesignRaisedButton}" />
-    <Style TargetType="{x:Type Calendar}" BasedOn="{StaticResource MaterialDesignCalendarPortrait}" />
-    <Style TargetType="{x:Type CheckBox}" BasedOn="{StaticResource MaterialDesignCheckBox}" />
-    <Style TargetType="{x:Type ComboBox}" BasedOn="{StaticResource MaterialDesignComboBox}" />
-    <Style TargetType="{x:Type ContextMenu}" BasedOn="{StaticResource MaterialDesignContextMenu}" />
-    <Style TargetType="{x:Type Thumb}" BasedOn="{StaticResource MaterialDesignThumb}" />
-    <Style TargetType="{x:Type DataGrid}" BasedOn="{StaticResource MaterialDesignDataGrid}" />
-    <Style TargetType="{x:Type DataGridCell}" BasedOn="{StaticResource MaterialDesignDataGridCell}" />
-    <Style TargetType="{x:Type DataGridColumnHeader}" BasedOn="{StaticResource MaterialDesignDataGridColumnHeader}" />
-    <Style TargetType="{x:Type DataGridRow}" BasedOn="{StaticResource MaterialDesignDataGridRow}" />
-    <Style TargetType="{x:Type DataGridRowHeader}" BasedOn="{StaticResource MaterialDesignDataGridRowHeader}" />
-    <Style TargetType="{x:Type DatePicker}" BasedOn="{StaticResource MaterialDesignDatePicker}" />
-    <Style TargetType="{x:Type Expander}" BasedOn="{StaticResource MaterialDesignExpander}" />
-    <Style TargetType="{x:Type GridSplitter}" BasedOn="{StaticResource MaterialDesignGridSplitter}" />
-    <Style TargetType="{x:Type GroupBox}" BasedOn="{StaticResource MaterialDesignGroupBox}" />
-    <Style TargetType="{x:Type Label}" BasedOn="{StaticResource MaterialDesignLabel}" />
-    <Style TargetType="{x:Type ListBox}" BasedOn="{StaticResource MaterialDesignListBox}" />
-    <Style TargetType="{x:Type ListBoxItem}" BasedOn="{StaticResource MaterialDesignListBoxItem}" />
-    <Style TargetType="{x:Type ListView}" BasedOn="{StaticResource MaterialDesignListView}" />
-    <Style TargetType="{x:Type ListViewItem}" BasedOn="{StaticResource MaterialDesignListBoxItem}" />
-    <Style TargetType="{x:Type Menu}" BasedOn="{StaticResource MaterialDesignMenu}" />
-    <Style TargetType="{x:Type MenuItem}" BasedOn="{StaticResource MaterialDesignMenuItem}" />
-    <Style TargetType="{x:Type PasswordBox}" BasedOn="{StaticResource MaterialDesignPasswordBox}" />
-    <Style TargetType="{x:Type ProgressBar}" BasedOn="{StaticResource MaterialDesignLinearProgressBar}" />
-    <Style TargetType="{x:Type RadioButton}" BasedOn="{StaticResource MaterialDesignRadioButton}" />
-    <Style TargetType="{x:Type RepeatButton}" BasedOn="{StaticResource MaterialDesignRaisedButton}" />
-    <Style TargetType="{x:Type RichTextBox}" BasedOn="{StaticResource MaterialDesignRichTextBox}" />
-    <Style TargetType="{x:Type ScrollBar}" BasedOn="{StaticResource MaterialDesignScrollBar}" />
-    <Style TargetType="{x:Type ScrollViewer}" BasedOn="{StaticResource MaterialDesignScrollViewer}" />
-    <Style TargetType="{x:Type Slider}" BasedOn="{StaticResource MaterialDesignSlider}" />
-    <Style TargetType="{x:Type TextBox}" BasedOn="{StaticResource MaterialDesignTextBox}" />
-    <Style TargetType="{x:Type ToggleButton}" BasedOn="{StaticResource MaterialDesignSwitchToggleButton}" />
-    <Style TargetType="{x:Type ToolBar}" BasedOn="{StaticResource MaterialDesignToolBar}" />
-    <Style TargetType="{x:Type ToolBarTray}" BasedOn="{StaticResource MaterialDesignToolBarTray}" />
-    <Style TargetType="{x:Type ToolTip}" BasedOn="{StaticResource MaterialDesignToolTip}" />
-    <Style TargetType="{x:Type TreeView}" BasedOn="{StaticResource MaterialDesignTreeView}" />
-    <Style TargetType="{x:Type TreeViewItem}" BasedOn="{StaticResource MaterialDesignTreeViewItem}" />
 
-    <Style x:Key="{x:Static MenuItem.SeparatorStyleKey}" TargetType="{x:Type Separator}" BasedOn="{StaticResource MaterialDesignSeparator}" />
-    <Style x:Key="MaterialDesignDarkSeparator" TargetType="{x:Type Separator}" BasedOn="{StaticResource MaterialDesignSeparator}">
-        <Setter Property="Background" Value="{DynamicResource MaterialDesignDarkSeparatorBackground}"/>
-        <Setter Property="BorderBrush" Value="{DynamicResource MaterialDesignDarkSeparatorBackground}"/>
+    <Style BasedOn="{StaticResource MaterialDesignRaisedButton}" TargetType="{x:Type Button}" />
+    <Style BasedOn="{StaticResource MaterialDesignCalendarPortrait}" TargetType="{x:Type Calendar}" />
+    <Style BasedOn="{StaticResource MaterialDesignCheckBox}" TargetType="{x:Type CheckBox}" />
+    <Style BasedOn="{StaticResource MaterialDesignComboBox}" TargetType="{x:Type ComboBox}" />
+    <Style BasedOn="{StaticResource MaterialDesignContextMenu}" TargetType="{x:Type ContextMenu}" />
+    <Style BasedOn="{StaticResource MaterialDesignThumb}" TargetType="{x:Type Thumb}" />
+    <Style BasedOn="{StaticResource MaterialDesignDataGrid}" TargetType="{x:Type DataGrid}" />
+    <Style BasedOn="{StaticResource MaterialDesignDataGridCell}" TargetType="{x:Type DataGridCell}" />
+    <Style BasedOn="{StaticResource MaterialDesignDataGridColumnHeader}" TargetType="{x:Type DataGridColumnHeader}" />
+    <Style BasedOn="{StaticResource MaterialDesignDataGridRow}" TargetType="{x:Type DataGridRow}" />
+    <Style BasedOn="{StaticResource MaterialDesignDataGridRowHeader}" TargetType="{x:Type DataGridRowHeader}" />
+    <Style BasedOn="{StaticResource MaterialDesignDatePicker}" TargetType="{x:Type DatePicker}" />
+    <Style BasedOn="{StaticResource MaterialDesignExpander}" TargetType="{x:Type Expander}" />
+    <Style BasedOn="{StaticResource MaterialDesignGridSplitter}" TargetType="{x:Type GridSplitter}" />
+    <Style BasedOn="{StaticResource MaterialDesignGroupBox}" TargetType="{x:Type GroupBox}" />
+    <Style BasedOn="{StaticResource MaterialDesignLabel}" TargetType="{x:Type Label}" />
+    <Style BasedOn="{StaticResource MaterialDesignListBox}" TargetType="{x:Type ListBox}" />
+    <Style BasedOn="{StaticResource MaterialDesignListBoxItem}" TargetType="{x:Type ListBoxItem}" />
+    <Style BasedOn="{StaticResource MaterialDesignListView}" TargetType="{x:Type ListView}" />
+    <Style BasedOn="{StaticResource MaterialDesignListBoxItem}" TargetType="{x:Type ListViewItem}" />
+    <Style BasedOn="{StaticResource MaterialDesignMenu}" TargetType="{x:Type Menu}" />
+    <Style BasedOn="{StaticResource MaterialDesignMenuItem}" TargetType="{x:Type MenuItem}" />
+    <Style BasedOn="{StaticResource MaterialDesignPasswordBox}" TargetType="{x:Type PasswordBox}" />
+    <Style BasedOn="{StaticResource MaterialDesignLinearProgressBar}" TargetType="{x:Type ProgressBar}" />
+    <Style BasedOn="{StaticResource MaterialDesignRadioButton}" TargetType="{x:Type RadioButton}" />
+    <Style BasedOn="{StaticResource MaterialDesignRaisedButton}" TargetType="{x:Type RepeatButton}" />
+    <Style BasedOn="{StaticResource MaterialDesignRichTextBox}" TargetType="{x:Type RichTextBox}" />
+    <Style BasedOn="{StaticResource MaterialDesignScrollBar}" TargetType="{x:Type ScrollBar}" />
+    <Style BasedOn="{StaticResource MaterialDesignScrollViewer}" TargetType="{x:Type ScrollViewer}" />
+    <Style BasedOn="{StaticResource MaterialDesignSlider}" TargetType="{x:Type Slider}" />
+    <Style BasedOn="{StaticResource MaterialDesignTabControl}" TargetType="{x:Type TabControl}" />
+    <Style BasedOn="{StaticResource MaterialDesignTabItem}" TargetType="{x:Type TabItem}" />
+    <Style BasedOn="{StaticResource MaterialDesignTextBox}" TargetType="{x:Type TextBox}" />
+    <Style BasedOn="{StaticResource MaterialDesignSwitchToggleButton}" TargetType="{x:Type ToggleButton}" />
+    <Style BasedOn="{StaticResource MaterialDesignToolBar}" TargetType="{x:Type ToolBar}" />
+    <Style BasedOn="{StaticResource MaterialDesignToolBarTray}" TargetType="{x:Type ToolBarTray}" />
+    <Style BasedOn="{StaticResource MaterialDesignToolTip}" TargetType="{x:Type ToolTip}" />
+    <Style BasedOn="{StaticResource MaterialDesignTreeView}" TargetType="{x:Type TreeView}" />
+    <Style BasedOn="{StaticResource MaterialDesignTreeViewItem}" TargetType="{x:Type TreeViewItem}" />
+
+    <Style
+        x:Key="{x:Static MenuItem.SeparatorStyleKey}"
+        BasedOn="{StaticResource MaterialDesignSeparator}"
+        TargetType="{x:Type Separator}" />
+    <Style
+        x:Key="MaterialDesignDarkSeparator"
+        BasedOn="{StaticResource MaterialDesignSeparator}"
+        TargetType="{x:Type Separator}">
+        <Setter Property="Background" Value="{DynamicResource MaterialDesignDarkSeparatorBackground}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource MaterialDesignDarkSeparatorBackground}" />
     </Style>
-    <Style x:Key="MaterialDesignLightSeparator" TargetType="{x:Type Separator}" BasedOn="{StaticResource MaterialDesignSeparator}">
-        <Setter Property="Background" Value="{DynamicResource MaterialDesignLightSeparatorBackground}"/>
-        <Setter Property="BorderBrush" Value="{DynamicResource MaterialDesignLightSeparatorBackground}"/>
+    <Style
+        x:Key="MaterialDesignLightSeparator"
+        BasedOn="{StaticResource MaterialDesignSeparator}"
+        TargetType="{x:Type Separator}">
+        <Setter Property="Background" Value="{DynamicResource MaterialDesignLightSeparatorBackground}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource MaterialDesignLightSeparatorBackground}" />
     </Style>
 </ResourceDictionary>