Skip to content

Commit ea73711

Browse files
Implementation for uniform with tabs (#2879)
Co-authored-by: Nils Berghs <[email protected]>
1 parent 74a2388 commit ea73711

File tree

3 files changed

+138
-22
lines changed

3 files changed

+138
-22
lines changed

MainDemo.Wpf/Tabs.xaml

Lines changed: 57 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -432,29 +432,76 @@
432432
<materialDesign:Card>
433433
<TabControl HorizontalContentAlignment="Left">
434434
<TabItem Header="TAB1">
435-
<TextBlock Margin="8" Text="Not filled example tab 1" />
435+
<TextBlock Margin="8" Text="Not filled, required width, tab 1" />
436436
</TabItem>
437-
<TabItem Header="TAB 2">
438-
<TextBlock Margin="8" Text="Not filled example tab 2" />
437+
<TabItem Header="TAB 2 Wide">
438+
<TextBlock Margin="8" Text="Not filled, required width, tab 2" />
439+
</TabItem>
440+
<TabItem Header="TAB 3 Extremely Wide">
441+
<TextBlock Margin="8" Text="Not filled, required width, tab 3" />
442+
</TabItem>
443+
<TabItem Header="TAB 4">
444+
<TextBlock Margin="8" Text="Not filled, required width, tab 4" />
439445
</TabItem>
440446
</TabControl>
441447
</materialDesign:Card>
442448
</smtx:XamlDisplay>
443-
444449
<smtx:XamlDisplay Margin="0,0,0,16" UniqueKey="tabs_20">
445450
<materialDesign:Card>
446-
<TabControl HorizontalContentAlignment="Left" Style="{StaticResource MaterialDesignFilledTabControl}">
451+
<TabControl HorizontalContentAlignment="Left" Style="{StaticResource MaterialDesignUniformTabControl}">
447452
<TabItem Header="TAB1">
448-
<TextBlock Margin="8" Text="Filled example tab 1" />
453+
<TextBlock Margin="8" Text="Not filled, uniform width, tab 1" />
449454
</TabItem>
450-
<TabItem Header="TAB 2">
451-
<TextBlock Margin="8" Text="Filled example tab 2" />
455+
<TabItem Header="TAB 2 Wide">
456+
<TextBlock Margin="8" Text="Not filled, uniform width, tab 2" />
457+
</TabItem>
458+
<TabItem Header="TAB 3 Extremely Wide">
459+
<TextBlock Margin="8" Text="Not filled, uniform width, tab 3" />
460+
</TabItem>
461+
<TabItem Header="TAB 4">
462+
<TextBlock Margin="8" Text="Not filled, uniform width, tab 4" />
452463
</TabItem>
453464
</TabControl>
454465
</materialDesign:Card>
455466
</smtx:XamlDisplay>
456-
457467
<smtx:XamlDisplay Margin="0,0,0,16" UniqueKey="tabs_21">
468+
<materialDesign:Card>
469+
<TabControl HorizontalContentAlignment="Center" Style="{StaticResource MaterialDesignFilledTabControl}">
470+
<TabItem Header="TAB1">
471+
<TextBlock Margin="8" Text="Filled, centered, required width, tab 1" />
472+
</TabItem>
473+
<TabItem Header="TAB 2 Wide">
474+
<TextBlock Margin="8" Text="Filled, centered, required width, tab 2" />
475+
</TabItem>
476+
<TabItem Header="TAB 3 Extremely Wide">
477+
<TextBlock Margin="8" Text="Filled, centered, required width, tab 3" />
478+
</TabItem>
479+
<TabItem Header="TAB 4">
480+
<TextBlock Margin="8" Text="Filled, centered, required width, tab 4" />
481+
</TabItem>
482+
</TabControl>
483+
</materialDesign:Card>
484+
</smtx:XamlDisplay>
485+
<smtx:XamlDisplay Margin="0,0,0,16" UniqueKey="tabs_22">
486+
<materialDesign:Card>
487+
<TabControl HorizontalContentAlignment="Center" Style="{StaticResource MaterialDesignFilledUniformTabControl}">
488+
<TabItem Header="TAB1">
489+
<TextBlock Margin="8" Text="Filled, centered, uniform width, tab 1" />
490+
</TabItem>
491+
<TabItem Header="TAB 2 Wide">
492+
<TextBlock Margin="8" Text="Filled, centered, uniform width, tab 2" />
493+
</TabItem>
494+
<TabItem Header="TAB 3 Extremely Wide">
495+
<TextBlock Margin="8" Text="Filled, centered, uniform width, tab 3" />
496+
</TabItem>
497+
<TabItem Header="TAB 4">
498+
<TextBlock Margin="8" Text="Filled, centered, uniform width, tab 4" />
499+
</TabItem>
500+
</TabControl>
501+
</materialDesign:Card>
502+
</smtx:XamlDisplay>
503+
504+
<smtx:XamlDisplay Margin="0,0,0,16" UniqueKey="tabs_23">
458505
<materialDesign:Card>
459506
<TabControl HorizontalContentAlignment="Left" materialDesign:ColorZoneAssist.Mode="SecondaryMid">
460507
<TabItem Header="TAB1">
@@ -491,7 +538,7 @@
491538
</materialDesign:Card>
492539
</smtx:XamlDisplay>
493540

494-
<smtx:XamlDisplay Margin="0,0,0,16" UniqueKey="tabs_22">
541+
<smtx:XamlDisplay Margin="0,0,0,16" UniqueKey="tabs_24">
495542
<materialDesign:Card>
496543
<TabControl
497544
HorizontalContentAlignment="Left"

MaterialDesignThemes.Wpf/TabAssist.cs

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,5 +9,12 @@ public static class TabAssist
99

1010
public static bool GetHasFilledTab(DependencyObject element) => (bool)element.GetValue(HasFilledTabProperty);
1111

12+
public static readonly DependencyProperty HasUniformTabWidthProperty = DependencyProperty.RegisterAttached(
13+
"HasUniformTabWidth", typeof(bool), typeof(TabAssist), new PropertyMetadata(false));
14+
15+
public static void SetHasUniformTabWidth(DependencyObject element, bool value) => element.SetValue(HasUniformTabWidthProperty, value);
16+
17+
public static bool GetHasUniformTabWidth(DependencyObject element) => (bool)element.GetValue(HasUniformTabWidthProperty);
18+
1219
}
1320
}

MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.TabControl.xaml

Lines changed: 74 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@
3636
<Setter Property="wpf:ColorZoneAssist.Mode" Value="PrimaryMid" />
3737
<Setter Property="wpf:ElevationAssist.Elevation" Value="Dp4" />
3838
<Setter Property="wpf:ShadowAssist.ShadowEdges" Value="Bottom" />
39+
<Setter Property="wpf:TabAssist.HasUniformTabWidth" Value="False"/>
3940
<Setter Property="Template">
4041
<Setter.Value>
4142
<ControlTemplate TargetType="{x:Type TabControl}">
@@ -98,18 +99,67 @@
9899
<Setter TargetName="HeaderPanel" Property="Visibility" Value="Collapsed" />
99100
<Setter TargetName="CenteredHeaderPanel" Property="Visibility" Value="Visible" />
100101
</Trigger>
101-
<Trigger Property="HorizontalContentAlignment" Value="Center">
102-
<Setter TargetName="HeaderPanel" Property="Visibility" Value="Collapsed" />
103-
<Setter TargetName="CenteredHeaderPanel" Property="Visibility" Value="Visible" />
104-
</Trigger>
105-
<Trigger Property="HorizontalContentAlignment" Value="Left">
106-
<Setter TargetName="HeaderPanel" Property="Visibility" Value="Visible" />
107-
<Setter TargetName="CenteredHeaderPanel" Property="Visibility" Value="Collapsed" />
108-
</Trigger>
109-
<Trigger Property="HorizontalContentAlignment" Value="Right">
110-
<Setter TargetName="HeaderPanel" Property="Visibility" Value="Visible" />
111-
<Setter TargetName="CenteredHeaderPanel" Property="Visibility" Value="Collapsed" />
112-
</Trigger>
102+
<MultiTrigger>
103+
<MultiTrigger.Conditions>
104+
<Condition Property="HorizontalContentAlignment" Value="Center"/>
105+
<Condition Property="wpf:TabAssist.HasUniformTabWidth" Value="False"/>
106+
</MultiTrigger.Conditions>
107+
<MultiTrigger.Setters>
108+
<Setter TargetName="HeaderPanel" Property="Visibility" Value="Visible" />
109+
<Setter TargetName="CenteredHeaderPanel" Property="Visibility" Value="Collapsed" />
110+
</MultiTrigger.Setters>
111+
</MultiTrigger>
112+
<MultiTrigger>
113+
<MultiTrigger.Conditions>
114+
<Condition Property="HorizontalContentAlignment" Value="Center"/>
115+
<Condition Property="wpf:TabAssist.HasUniformTabWidth" Value="True"/>
116+
</MultiTrigger.Conditions>
117+
<MultiTrigger.Setters>
118+
<Setter TargetName="HeaderPanel" Property="Visibility" Value="Collapsed" />
119+
<Setter TargetName="CenteredHeaderPanel" Property="Visibility" Value="Visible" />
120+
</MultiTrigger.Setters>
121+
</MultiTrigger>
122+
123+
<MultiTrigger>
124+
<MultiTrigger.Conditions>
125+
<Condition Property="HorizontalContentAlignment" Value="Left"/>
126+
<Condition Property="wpf:TabAssist.HasUniformTabWidth" Value="False"/>
127+
</MultiTrigger.Conditions>
128+
<MultiTrigger.Setters>
129+
<Setter TargetName="HeaderPanel" Property="Visibility" Value="Visible" />
130+
<Setter TargetName="CenteredHeaderPanel" Property="Visibility" Value="Collapsed" />
131+
</MultiTrigger.Setters>
132+
</MultiTrigger>
133+
<MultiTrigger>
134+
<MultiTrigger.Conditions>
135+
<Condition Property="HorizontalContentAlignment" Value="Left"/>
136+
<Condition Property="wpf:TabAssist.HasUniformTabWidth" Value="True"/>
137+
</MultiTrigger.Conditions>
138+
<MultiTrigger.Setters>
139+
<Setter TargetName="HeaderPanel" Property="Visibility" Value="Collapsed" />
140+
<Setter TargetName="CenteredHeaderPanel" Property="Visibility" Value="Visible" />
141+
</MultiTrigger.Setters>
142+
</MultiTrigger>
143+
<MultiTrigger>
144+
<MultiTrigger.Conditions>
145+
<Condition Property="HorizontalContentAlignment" Value="Right"/>
146+
<Condition Property="wpf:TabAssist.HasUniformTabWidth" Value="False"/>
147+
</MultiTrigger.Conditions>
148+
<MultiTrigger.Setters>
149+
<Setter TargetName="HeaderPanel" Property="Visibility" Value="Visible" />
150+
<Setter TargetName="CenteredHeaderPanel" Property="Visibility" Value="Collapsed" />
151+
</MultiTrigger.Setters>
152+
</MultiTrigger>
153+
<MultiTrigger>
154+
<MultiTrigger.Conditions>
155+
<Condition Property="HorizontalContentAlignment" Value="Right"/>
156+
<Condition Property="wpf:TabAssist.HasUniformTabWidth" Value="True"/>
157+
</MultiTrigger.Conditions>
158+
<MultiTrigger.Setters>
159+
<Setter TargetName="HeaderPanel" Property="Visibility" Value="Collapsed" />
160+
<Setter TargetName="CenteredHeaderPanel" Property="Visibility" Value="Visible" />
161+
</MultiTrigger.Setters>
162+
</MultiTrigger>
113163
<Trigger Property="TabStripPlacement" Value="Bottom">
114164
<Setter TargetName="PART_HeaderZone" Property="DockPanel.Dock" Value="Bottom" />
115165
<Setter Property="wpf:ShadowAssist.ShadowEdges" Value="Top" />
@@ -142,6 +192,12 @@
142192
<Setter Property="wpf:ColorZoneAssist.Background" Value="Transparent" />
143193
</Style>
144194

195+
<Style x:Key="MaterialDesignUniformTabControl"
196+
BasedOn="{StaticResource MaterialDesignTabControl}"
197+
TargetType="{x:Type TabControl}">
198+
<Setter Property="wpf:TabAssist.HasUniformTabWidth" Value="True"/>
199+
</Style>
200+
145201
<Style x:Key="MaterialDesignFilledTabControl"
146202
BasedOn="{StaticResource MaterialDesignTabControlBase}"
147203
TargetType="{x:Type TabControl}">
@@ -183,6 +239,12 @@
183239
</Style.Triggers>
184240
</Style>
185241

242+
<Style x:Key="MaterialDesignFilledUniformTabControl"
243+
BasedOn="{StaticResource MaterialDesignFilledTabControl}"
244+
TargetType="{x:Type TabControl}">
245+
<Setter Property="wpf:TabAssist.HasUniformTabWidth" Value="True"/>
246+
</Style>
247+
186248
<Style x:Key="MaterialDesignTabItem" TargetType="{x:Type TabItem}">
187249
<Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}" />
188250
<Setter Property="Background" Value="Transparent" />

0 commit comments

Comments
 (0)