Skip to content

Commit 73187ef

Browse files
MichelMichelsahmed-abdelrazekKeboo
authored
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 <[email protected]> * Different sizes added to Demo app * Shadows fixed * PART_ColorZone renamed to PART_HeaderCard Co-authored-by: Ahmed Mohamed Abdel-Razek <[email protected]> Co-authored-by: Kevin B <[email protected]>
1 parent 42c475b commit 73187ef

File tree

7 files changed

+856
-316
lines changed

7 files changed

+856
-316
lines changed

‎MainDemo.Wpf/Domain/MainWindowViewModel.cs

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -286,6 +286,15 @@ private static IEnumerable<DemoItem> GenerateDemoItems(ISnackbarMessageQueue sna
286286
DocumentationLink.StyleLink("ListView")
287287
});
288288

289+
yield return new DemoItem(
290+
"Tabs",
291+
typeof(Tabs),
292+
new[]
293+
{
294+
DocumentationLink.DemoPageLink<Tabs>(),
295+
DocumentationLink.StyleLink("TabControl")
296+
});
297+
289298
yield return new DemoItem(
290299
"Trees",
291300
typeof(Trees),

‎MainDemo.Wpf/Tabs.xaml

Lines changed: 382 additions & 0 deletions
Large diffs are not rendered by default.

‎MainDemo.Wpf/Tabs.xaml.cs

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
using System;
2+
using System.Collections.Generic;
3+
using System.Linq;
4+
using System.Text;
5+
using System.Threading.Tasks;
6+
using System.Windows;
7+
using System.Windows.Controls;
8+
using System.Windows.Data;
9+
using System.Windows.Documents;
10+
using System.Windows.Input;
11+
using System.Windows.Media;
12+
using System.Windows.Media.Imaging;
13+
using System.Windows.Navigation;
14+
using System.Windows.Shapes;
15+
16+
namespace MaterialDesignDemo
17+
{
18+
/// <summary>
19+
/// Interaction logic for Tabs.xaml
20+
/// </summary>
21+
public partial class Tabs : UserControl
22+
{
23+
public Tabs()
24+
{
25+
InitializeComponent();
26+
}
27+
}
28+
}

‎MaterialDesignThemes.Wpf/Themes/MaterialDesign2.Defaults.xaml

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,8 @@
8181
<Style TargetType="{x:Type ScrollBar}" BasedOn="{StaticResource MaterialDesignScrollBar}" />
8282
<Style TargetType="{x:Type ScrollViewer}" BasedOn="{StaticResource MaterialDesignScrollViewer}" />
8383
<Style TargetType="{x:Type Slider}" BasedOn="{StaticResource MaterialDesignSlider}" />
84+
<Style TargetType="{x:Type TabControl}" BasedOn="{StaticResource MaterialDesignTabControl}" />
85+
<Style TargetType="{x:Type TabItem}" BasedOn="{StaticResource MaterialDesignTabItem}" />
8486
<Style TargetType="{x:Type TextBox}" BasedOn="{StaticResource MaterialDesignTextBox}" />
8587
<Style TargetType="{x:Type ToggleButton}" BasedOn="{StaticResource MaterialDesignSwitchToggleButton}" />
8688
<Style TargetType="{x:Type ToolBar}" BasedOn="{StaticResource MaterialDesignToolBar}" />

‎MaterialDesignThemes.Wpf/Themes/MaterialDesign3.Defaults.xaml

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,8 @@
8383
<Style TargetType="{x:Type ScrollBar}" BasedOn="{StaticResource MaterialDesignScrollBar}" />
8484
<Style TargetType="{x:Type ScrollViewer}" BasedOn="{StaticResource MaterialDesignScrollViewer}" />
8585
<Style TargetType="{x:Type Slider}" BasedOn="{StaticResource MaterialDesignSlider}" />
86+
<Style TargetType="{x:Type TabControl}" BasedOn="{StaticResource MaterialDesignTabControl}" />
87+
<Style TargetType="{x:Type TabItem}" BasedOn="{StaticResource MaterialDesignTabItem}" />
8688
<Style TargetType="{x:Type TextBox}" BasedOn="{StaticResource MaterialDesignTextBox}" />
8789
<Style TargetType="{x:Type ToggleButton}" BasedOn="{StaticResource MaterialDesignSwitchToggleButton}" />
8890
<Style TargetType="{x:Type ToolBar}" BasedOn="{StaticResource MaterialDesignToolBar}" />

‎MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.Defaults.xaml

Lines changed: 63 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
1-
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
2-
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
1+
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
32

4-
<!-- use this resource dictionary to set up the most common themese for standard controls -->
3+
<!-- use this resource dictionary to set up the most common themese for standard controls -->
54

65
<ResourceDictionary.MergedDictionaries>
76
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Button.xaml" />
@@ -43,59 +42,70 @@
4342
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.ValidationErrorTemplate.xaml" />
4443
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Window.xaml" />
4544
</ResourceDictionary.MergedDictionaries>
46-
47-
<SolidColorBrush x:Key="MaterialDesignLightBackground" Color="#FFFAFAFA"/>
48-
<SolidColorBrush x:Key="MaterialDesignLightForeground" Color="#DD000000"/>
49-
<SolidColorBrush x:Key="MaterialDesignDarkBackground" Color="#FF303030"/>
50-
<SolidColorBrush x:Key="MaterialDesignDarkForeground" Color="#FFFAFAFA"/>
45+
46+
<SolidColorBrush x:Key="MaterialDesignLightBackground" Color="#FFFAFAFA" />
47+
<SolidColorBrush x:Key="MaterialDesignLightForeground" Color="#DD000000" />
48+
<SolidColorBrush x:Key="MaterialDesignDarkBackground" Color="#FF303030" />
49+
<SolidColorBrush x:Key="MaterialDesignDarkForeground" Color="#FFFAFAFA" />
5150
<SolidColorBrush x:Key="MaterialDesignDarkSeparatorBackground" Color="#1F000000" />
5251
<SolidColorBrush x:Key="MaterialDesignLightSeparatorBackground" Color="#1FFFFFFF" />
53-
54-
<Style TargetType="{x:Type Button}" BasedOn="{StaticResource MaterialDesignRaisedButton}" />
55-
<Style TargetType="{x:Type Calendar}" BasedOn="{StaticResource MaterialDesignCalendarPortrait}" />
56-
<Style TargetType="{x:Type CheckBox}" BasedOn="{StaticResource MaterialDesignCheckBox}" />
57-
<Style TargetType="{x:Type ComboBox}" BasedOn="{StaticResource MaterialDesignComboBox}" />
58-
<Style TargetType="{x:Type ContextMenu}" BasedOn="{StaticResource MaterialDesignContextMenu}" />
59-
<Style TargetType="{x:Type Thumb}" BasedOn="{StaticResource MaterialDesignThumb}" />
60-
<Style TargetType="{x:Type DataGrid}" BasedOn="{StaticResource MaterialDesignDataGrid}" />
61-
<Style TargetType="{x:Type DataGridCell}" BasedOn="{StaticResource MaterialDesignDataGridCell}" />
62-
<Style TargetType="{x:Type DataGridColumnHeader}" BasedOn="{StaticResource MaterialDesignDataGridColumnHeader}" />
63-
<Style TargetType="{x:Type DataGridRow}" BasedOn="{StaticResource MaterialDesignDataGridRow}" />
64-
<Style TargetType="{x:Type DataGridRowHeader}" BasedOn="{StaticResource MaterialDesignDataGridRowHeader}" />
65-
<Style TargetType="{x:Type DatePicker}" BasedOn="{StaticResource MaterialDesignDatePicker}" />
66-
<Style TargetType="{x:Type Expander}" BasedOn="{StaticResource MaterialDesignExpander}" />
67-
<Style TargetType="{x:Type GridSplitter}" BasedOn="{StaticResource MaterialDesignGridSplitter}" />
68-
<Style TargetType="{x:Type GroupBox}" BasedOn="{StaticResource MaterialDesignGroupBox}" />
69-
<Style TargetType="{x:Type Label}" BasedOn="{StaticResource MaterialDesignLabel}" />
70-
<Style TargetType="{x:Type ListBox}" BasedOn="{StaticResource MaterialDesignListBox}" />
71-
<Style TargetType="{x:Type ListBoxItem}" BasedOn="{StaticResource MaterialDesignListBoxItem}" />
72-
<Style TargetType="{x:Type ListView}" BasedOn="{StaticResource MaterialDesignListView}" />
73-
<Style TargetType="{x:Type ListViewItem}" BasedOn="{StaticResource MaterialDesignListBoxItem}" />
74-
<Style TargetType="{x:Type Menu}" BasedOn="{StaticResource MaterialDesignMenu}" />
75-
<Style TargetType="{x:Type MenuItem}" BasedOn="{StaticResource MaterialDesignMenuItem}" />
76-
<Style TargetType="{x:Type PasswordBox}" BasedOn="{StaticResource MaterialDesignPasswordBox}" />
77-
<Style TargetType="{x:Type ProgressBar}" BasedOn="{StaticResource MaterialDesignLinearProgressBar}" />
78-
<Style TargetType="{x:Type RadioButton}" BasedOn="{StaticResource MaterialDesignRadioButton}" />
79-
<Style TargetType="{x:Type RepeatButton}" BasedOn="{StaticResource MaterialDesignRaisedButton}" />
80-
<Style TargetType="{x:Type RichTextBox}" BasedOn="{StaticResource MaterialDesignRichTextBox}" />
81-
<Style TargetType="{x:Type ScrollBar}" BasedOn="{StaticResource MaterialDesignScrollBar}" />
82-
<Style TargetType="{x:Type ScrollViewer}" BasedOn="{StaticResource MaterialDesignScrollViewer}" />
83-
<Style TargetType="{x:Type Slider}" BasedOn="{StaticResource MaterialDesignSlider}" />
84-
<Style TargetType="{x:Type TextBox}" BasedOn="{StaticResource MaterialDesignTextBox}" />
85-
<Style TargetType="{x:Type ToggleButton}" BasedOn="{StaticResource MaterialDesignSwitchToggleButton}" />
86-
<Style TargetType="{x:Type ToolBar}" BasedOn="{StaticResource MaterialDesignToolBar}" />
87-
<Style TargetType="{x:Type ToolBarTray}" BasedOn="{StaticResource MaterialDesignToolBarTray}" />
88-
<Style TargetType="{x:Type ToolTip}" BasedOn="{StaticResource MaterialDesignToolTip}" />
89-
<Style TargetType="{x:Type TreeView}" BasedOn="{StaticResource MaterialDesignTreeView}" />
90-
<Style TargetType="{x:Type TreeViewItem}" BasedOn="{StaticResource MaterialDesignTreeViewItem}" />
9152

92-
<Style x:Key="{x:Static MenuItem.SeparatorStyleKey}" TargetType="{x:Type Separator}" BasedOn="{StaticResource MaterialDesignSeparator}" />
93-
<Style x:Key="MaterialDesignDarkSeparator" TargetType="{x:Type Separator}" BasedOn="{StaticResource MaterialDesignSeparator}">
94-
<Setter Property="Background" Value="{DynamicResource MaterialDesignDarkSeparatorBackground}"/>
95-
<Setter Property="BorderBrush" Value="{DynamicResource MaterialDesignDarkSeparatorBackground}"/>
53+
<Style BasedOn="{StaticResource MaterialDesignRaisedButton}" TargetType="{x:Type Button}" />
54+
<Style BasedOn="{StaticResource MaterialDesignCalendarPortrait}" TargetType="{x:Type Calendar}" />
55+
<Style BasedOn="{StaticResource MaterialDesignCheckBox}" TargetType="{x:Type CheckBox}" />
56+
<Style BasedOn="{StaticResource MaterialDesignComboBox}" TargetType="{x:Type ComboBox}" />
57+
<Style BasedOn="{StaticResource MaterialDesignContextMenu}" TargetType="{x:Type ContextMenu}" />
58+
<Style BasedOn="{StaticResource MaterialDesignThumb}" TargetType="{x:Type Thumb}" />
59+
<Style BasedOn="{StaticResource MaterialDesignDataGrid}" TargetType="{x:Type DataGrid}" />
60+
<Style BasedOn="{StaticResource MaterialDesignDataGridCell}" TargetType="{x:Type DataGridCell}" />
61+
<Style BasedOn="{StaticResource MaterialDesignDataGridColumnHeader}" TargetType="{x:Type DataGridColumnHeader}" />
62+
<Style BasedOn="{StaticResource MaterialDesignDataGridRow}" TargetType="{x:Type DataGridRow}" />
63+
<Style BasedOn="{StaticResource MaterialDesignDataGridRowHeader}" TargetType="{x:Type DataGridRowHeader}" />
64+
<Style BasedOn="{StaticResource MaterialDesignDatePicker}" TargetType="{x:Type DatePicker}" />
65+
<Style BasedOn="{StaticResource MaterialDesignExpander}" TargetType="{x:Type Expander}" />
66+
<Style BasedOn="{StaticResource MaterialDesignGridSplitter}" TargetType="{x:Type GridSplitter}" />
67+
<Style BasedOn="{StaticResource MaterialDesignGroupBox}" TargetType="{x:Type GroupBox}" />
68+
<Style BasedOn="{StaticResource MaterialDesignLabel}" TargetType="{x:Type Label}" />
69+
<Style BasedOn="{StaticResource MaterialDesignListBox}" TargetType="{x:Type ListBox}" />
70+
<Style BasedOn="{StaticResource MaterialDesignListBoxItem}" TargetType="{x:Type ListBoxItem}" />
71+
<Style BasedOn="{StaticResource MaterialDesignListView}" TargetType="{x:Type ListView}" />
72+
<Style BasedOn="{StaticResource MaterialDesignListBoxItem}" TargetType="{x:Type ListViewItem}" />
73+
<Style BasedOn="{StaticResource MaterialDesignMenu}" TargetType="{x:Type Menu}" />
74+
<Style BasedOn="{StaticResource MaterialDesignMenuItem}" TargetType="{x:Type MenuItem}" />
75+
<Style BasedOn="{StaticResource MaterialDesignPasswordBox}" TargetType="{x:Type PasswordBox}" />
76+
<Style BasedOn="{StaticResource MaterialDesignLinearProgressBar}" TargetType="{x:Type ProgressBar}" />
77+
<Style BasedOn="{StaticResource MaterialDesignRadioButton}" TargetType="{x:Type RadioButton}" />
78+
<Style BasedOn="{StaticResource MaterialDesignRaisedButton}" TargetType="{x:Type RepeatButton}" />
79+
<Style BasedOn="{StaticResource MaterialDesignRichTextBox}" TargetType="{x:Type RichTextBox}" />
80+
<Style BasedOn="{StaticResource MaterialDesignScrollBar}" TargetType="{x:Type ScrollBar}" />
81+
<Style BasedOn="{StaticResource MaterialDesignScrollViewer}" TargetType="{x:Type ScrollViewer}" />
82+
<Style BasedOn="{StaticResource MaterialDesignSlider}" TargetType="{x:Type Slider}" />
83+
<Style BasedOn="{StaticResource MaterialDesignTabControl}" TargetType="{x:Type TabControl}" />
84+
<Style BasedOn="{StaticResource MaterialDesignTabItem}" TargetType="{x:Type TabItem}" />
85+
<Style BasedOn="{StaticResource MaterialDesignTextBox}" TargetType="{x:Type TextBox}" />
86+
<Style BasedOn="{StaticResource MaterialDesignSwitchToggleButton}" TargetType="{x:Type ToggleButton}" />
87+
<Style BasedOn="{StaticResource MaterialDesignToolBar}" TargetType="{x:Type ToolBar}" />
88+
<Style BasedOn="{StaticResource MaterialDesignToolBarTray}" TargetType="{x:Type ToolBarTray}" />
89+
<Style BasedOn="{StaticResource MaterialDesignToolTip}" TargetType="{x:Type ToolTip}" />
90+
<Style BasedOn="{StaticResource MaterialDesignTreeView}" TargetType="{x:Type TreeView}" />
91+
<Style BasedOn="{StaticResource MaterialDesignTreeViewItem}" TargetType="{x:Type TreeViewItem}" />
92+
93+
<Style
94+
x:Key="{x:Static MenuItem.SeparatorStyleKey}"
95+
BasedOn="{StaticResource MaterialDesignSeparator}"
96+
TargetType="{x:Type Separator}" />
97+
<Style
98+
x:Key="MaterialDesignDarkSeparator"
99+
BasedOn="{StaticResource MaterialDesignSeparator}"
100+
TargetType="{x:Type Separator}">
101+
<Setter Property="Background" Value="{DynamicResource MaterialDesignDarkSeparatorBackground}" />
102+
<Setter Property="BorderBrush" Value="{DynamicResource MaterialDesignDarkSeparatorBackground}" />
96103
</Style>
97-
<Style x:Key="MaterialDesignLightSeparator" TargetType="{x:Type Separator}" BasedOn="{StaticResource MaterialDesignSeparator}">
98-
<Setter Property="Background" Value="{DynamicResource MaterialDesignLightSeparatorBackground}"/>
99-
<Setter Property="BorderBrush" Value="{DynamicResource MaterialDesignLightSeparatorBackground}"/>
104+
<Style
105+
x:Key="MaterialDesignLightSeparator"
106+
BasedOn="{StaticResource MaterialDesignSeparator}"
107+
TargetType="{x:Type Separator}">
108+
<Setter Property="Background" Value="{DynamicResource MaterialDesignLightSeparatorBackground}" />
109+
<Setter Property="BorderBrush" Value="{DynamicResource MaterialDesignLightSeparatorBackground}" />
100110
</Style>
101111
</ResourceDictionary>

0 commit comments

Comments
 (0)