Skip to content

Implementation for uniform width tabs #2879

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Keboo merged 1 commit into from
Oct 3, 2022
Merged

Implementation for uniform width tabs #2879

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Implementation for uniform with tabs
  • Loading branch information
@WhyDoUserNamesNeedToBeUnique
WhyDoUserNamesNeedToBeUnique committed Sep 23, 2022
commit 4dfaca252da6ad53757dd0541760aa20aeca1d9e
67 changes: 57 additions & 10 deletions MainDemo.Wpf/Tabs.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -432,29 +432,76 @@
<materialDesign:Card>
<TabControl HorizontalContentAlignment="Left">
<TabItem Header="TAB1">
<TextBlock Margin="8" Text="Not filled example tab 1" />
<TextBlock Margin="8" Text="Not filled, required width, tab 1" />
</TabItem>
<TabItem Header="TAB 2">
<TextBlock Margin="8" Text="Not filled example tab 2" />
<TabItem Header="TAB 2 Wide">
<TextBlock Margin="8" Text="Not filled, required width, tab 2" />
</TabItem>
<TabItem Header="TAB 3 Extremely Wide">
<TextBlock Margin="8" Text="Not filled, required width, tab 3" />
</TabItem>
<TabItem Header="TAB 4">
<TextBlock Margin="8" Text="Not filled, required width, tab 4" />
</TabItem>
</TabControl>
</materialDesign:Card>
</smtx:XamlDisplay>

<smtx:XamlDisplay Margin="0,0,0,16" UniqueKey="tabs_20">
<materialDesign:Card>
<TabControl HorizontalContentAlignment="Left" Style="{StaticResource MaterialDesignFilledTabControl}">
<TabControl HorizontalContentAlignment="Left" Style="{StaticResource MaterialDesignUniformTabControl}">
<TabItem Header="TAB1">
<TextBlock Margin="8" Text="Filled example tab 1" />
<TextBlock Margin="8" Text="Not filled, uniform width, tab 1" />
</TabItem>
<TabItem Header="TAB 2">
<TextBlock Margin="8" Text="Filled example tab 2" />
<TabItem Header="TAB 2 Wide">
<TextBlock Margin="8" Text="Not filled, uniform width, tab 2" />
</TabItem>
<TabItem Header="TAB 3 Extremely Wide">
<TextBlock Margin="8" Text="Not filled, uniform width, tab 3" />
</TabItem>
<TabItem Header="TAB 4">
<TextBlock Margin="8" Text="Not filled, uniform width, tab 4" />
</TabItem>
</TabControl>
</materialDesign:Card>
</smtx:XamlDisplay>

<smtx:XamlDisplay Margin="0,0,0,16" UniqueKey="tabs_21">
<materialDesign:Card>
<TabControl HorizontalContentAlignment="Center" Style="{StaticResource MaterialDesignFilledTabControl}">
<TabItem Header="TAB1">
<TextBlock Margin="8" Text="Filled, centered, required width, tab 1" />
</TabItem>
<TabItem Header="TAB 2 Wide">
<TextBlock Margin="8" Text="Filled, centered, required width, tab 2" />
</TabItem>
<TabItem Header="TAB 3 Extremely Wide">
<TextBlock Margin="8" Text="Filled, centered, required width, tab 3" />
</TabItem>
<TabItem Header="TAB 4">
<TextBlock Margin="8" Text="Filled, centered, required width, tab 4" />
</TabItem>
</TabControl>
</materialDesign:Card>
</smtx:XamlDisplay>
<smtx:XamlDisplay Margin="0,0,0,16" UniqueKey="tabs_22">
<materialDesign:Card>
<TabControl HorizontalContentAlignment="Center" Style="{StaticResource MaterialDesignFilledUniformTabControl}">
<TabItem Header="TAB1">
<TextBlock Margin="8" Text="Filled, centered, uniform width, tab 1" />
</TabItem>
<TabItem Header="TAB 2 Wide">
<TextBlock Margin="8" Text="Filled, centered, uniform width, tab 2" />
</TabItem>
<TabItem Header="TAB 3 Extremely Wide">
<TextBlock Margin="8" Text="Filled, centered, uniform width, tab 3" />
</TabItem>
<TabItem Header="TAB 4">
<TextBlock Margin="8" Text="Filled, centered, uniform width, tab 4" />
</TabItem>
</TabControl>
</materialDesign:Card>
</smtx:XamlDisplay>

<smtx:XamlDisplay Margin="0,0,0,16" UniqueKey="tabs_23">
<materialDesign:Card>
<TabControl HorizontalContentAlignment="Left" materialDesign:ColorZoneAssist.Mode="SecondaryMid">
<TabItem Header="TAB1">
Expand Down Expand Up @@ -491,7 +538,7 @@
</materialDesign:Card>
</smtx:XamlDisplay>

<smtx:XamlDisplay Margin="0,0,0,16" UniqueKey="tabs_22">
<smtx:XamlDisplay Margin="0,0,0,16" UniqueKey="tabs_24">
<materialDesign:Card>
<TabControl
HorizontalContentAlignment="Left"
Expand Down
7 changes: 7 additions & 0 deletions MaterialDesignThemes.Wpf/TabAssist.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,5 +9,12 @@ public static class TabAssist

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

public static readonly DependencyProperty HasUniformTabWidthProperty = DependencyProperty.RegisterAttached(
"HasUniformTabWidth", typeof(bool), typeof(TabAssist), new PropertyMetadata(false));

public static void SetHasUniformTabWidth(DependencyObject element, bool value) => element.SetValue(HasUniformTabWidthProperty, value);

public static bool GetHasUniformTabWidth(DependencyObject element) => (bool)element.GetValue(HasUniformTabWidthProperty);

}
}
86 changes: 74 additions & 12 deletions MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.TabControl.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@
<Setter Property="wpf:ColorZoneAssist.Mode" Value="PrimaryMid" />
<Setter Property="wpf:ElevationAssist.Elevation" Value="Dp4" />
<Setter Property="wpf:ShadowAssist.ShadowEdges" Value="Bottom" />
<Setter Property="wpf:TabAssist.HasUniformTabWidth" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabControl}">
Expand Down Expand Up @@ -100,18 +101,67 @@
<Setter TargetName="HeaderPanel" Property="Visibility" Value="Collapsed" />
<Setter TargetName="CenteredHeaderPanel" Property="Visibility" Value="Visible" />
</Trigger>
<Trigger Property="HorizontalContentAlignment" Value="Center">
<Setter TargetName="HeaderPanel" Property="Visibility" Value="Collapsed" />
<Setter TargetName="CenteredHeaderPanel" Property="Visibility" Value="Visible" />
</Trigger>
<Trigger Property="HorizontalContentAlignment" Value="Left">
<Setter TargetName="HeaderPanel" Property="Visibility" Value="Visible" />
<Setter TargetName="CenteredHeaderPanel" Property="Visibility" Value="Collapsed" />
</Trigger>
<Trigger Property="HorizontalContentAlignment" Value="Right">
<Setter TargetName="HeaderPanel" Property="Visibility" Value="Visible" />
<Setter TargetName="CenteredHeaderPanel" Property="Visibility" Value="Collapsed" />
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="HorizontalContentAlignment" Value="Center"/>
<Condition Property="wpf:TabAssist.HasUniformTabWidth" Value="False"/>
</MultiTrigger.Conditions>
<MultiTrigger.Setters>
<Setter TargetName="HeaderPanel" Property="Visibility" Value="Visible" />
<Setter TargetName="CenteredHeaderPanel" Property="Visibility" Value="Collapsed" />
</MultiTrigger.Setters>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="HorizontalContentAlignment" Value="Center"/>
<Condition Property="wpf:TabAssist.HasUniformTabWidth" Value="True"/>
</MultiTrigger.Conditions>
<MultiTrigger.Setters>
<Setter TargetName="HeaderPanel" Property="Visibility" Value="Collapsed" />
<Setter TargetName="CenteredHeaderPanel" Property="Visibility" Value="Visible" />
</MultiTrigger.Setters>
</MultiTrigger>

<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="HorizontalContentAlignment" Value="Left"/>
<Condition Property="wpf:TabAssist.HasUniformTabWidth" Value="False"/>
</MultiTrigger.Conditions>
<MultiTrigger.Setters>
<Setter TargetName="HeaderPanel" Property="Visibility" Value="Visible" />
<Setter TargetName="CenteredHeaderPanel" Property="Visibility" Value="Collapsed" />
</MultiTrigger.Setters>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="HorizontalContentAlignment" Value="Left"/>
<Condition Property="wpf:TabAssist.HasUniformTabWidth" Value="True"/>
</MultiTrigger.Conditions>
<MultiTrigger.Setters>
<Setter TargetName="HeaderPanel" Property="Visibility" Value="Collapsed" />
<Setter TargetName="CenteredHeaderPanel" Property="Visibility" Value="Visible" />
</MultiTrigger.Setters>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="HorizontalContentAlignment" Value="Right"/>
<Condition Property="wpf:TabAssist.HasUniformTabWidth" Value="False"/>
</MultiTrigger.Conditions>
<MultiTrigger.Setters>
<Setter TargetName="HeaderPanel" Property="Visibility" Value="Visible" />
<Setter TargetName="CenteredHeaderPanel" Property="Visibility" Value="Collapsed" />
</MultiTrigger.Setters>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="HorizontalContentAlignment" Value="Right"/>
<Condition Property="wpf:TabAssist.HasUniformTabWidth" Value="True"/>
</MultiTrigger.Conditions>
<MultiTrigger.Setters>
<Setter TargetName="HeaderPanel" Property="Visibility" Value="Collapsed" />
<Setter TargetName="CenteredHeaderPanel" Property="Visibility" Value="Visible" />
</MultiTrigger.Setters>
</MultiTrigger>
<Trigger Property="TabStripPlacement" Value="Bottom">
<Setter TargetName="PART_HeaderZone" Property="DockPanel.Dock" Value="Bottom" />
<Setter Property="wpf:ShadowAssist.ShadowEdges" Value="Top" />
Expand Down Expand Up @@ -144,6 +194,12 @@
<Setter Property="wpf:ColorZoneAssist.Background" Value="Transparent" />
</Style>

<Style x:Key="MaterialDesignUniformTabControl"
BasedOn="{StaticResource MaterialDesignTabControl}"
TargetType="{x:Type TabControl}">
<Setter Property="wpf:TabAssist.HasUniformTabWidth" Value="True"/>
</Style>

<Style x:Key="MaterialDesignFilledTabControl"
BasedOn="{StaticResource MaterialDesignTabControlBase}"
TargetType="{x:Type TabControl}">
Expand Down Expand Up @@ -185,6 +241,12 @@
</Style.Triggers>
</Style>

<Style x:Key="MaterialDesignFilledUniformTabControl"
BasedOn="{StaticResource MaterialDesignFilledTabControl}"
TargetType="{x:Type TabControl}">
<Setter Property="wpf:TabAssist.HasUniformTabWidth" Value="True"/>
</Style>

<Style x:Key="MaterialDesignTabItem" TargetType="{x:Type TabItem}">
<Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}" />
<Setter Property="Background" Value="Transparent" />
Expand Down