Skip to content

Add AP to control TabControl Headers behavior #3873

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

Closed
corvinsz wants to merge 37 commits into from
Closed

Add AP to control TabControl Headers behavior #3873

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
37 commits
Select commit Hold shift + click to select a range
55579e1
added AP to be able to swap between a scrollable and a wrapping heade…
corvinsz Jun 17, 2025
4733a54
Evaluate TextBox.LineCount only once in UpdateAttachedProperties (#3874)
greuelpirat Jun 18, 2025
122a534
added ToolTip demo page with a RichToolTip example. Applied new synta…
corvinsz Jun 19, 2025
bbdee06
fix when the TreeListView expands too much content, scrolling to the …
MohammadHadi2031 Jun 26, 2025
f31fe78
Updating tests to use TUnit and MTP (#3838)
Keboo Jun 27, 2025
b110061
Fix Enhance Mouseover Visuals for TabControl (#3803)
corvinsz Jun 27, 2025
fad77d5
Exposes BindableIsItemsHost attached property. (#3878)
Keboo Jun 27, 2025
4de685b
Bumping version to test nuget deployment
Keboo Jul 14, 2025
504d2c9
Embeds icon into NuGet packages (#3900)
Keboo Aug 20, 2025
d5c7d2f
Bump actions/checkout from 4 to 5 (#3898)
dependabot[bot] Aug 20, 2025
9e966e4
Invalidates visual after dialog opens (#3882)
Keboo Aug 20, 2025
ab615fe
Applying fix for binding error (#3881)
Keboo Aug 20, 2025
3e0f779
Bump actions/download-artifact from 4 to 5 (#3896)
dependabot[bot] Aug 20, 2025
8e6bfd6
Fix nuspec file (#3901)
Keboo Aug 20, 2025
471110f
Revert "Used x:Reference in Button and ProgressBar ControlTemplates (…
JorisCleVR Aug 22, 2025
e6a002a
✨ Set up Copilot instructions for MaterialDesignInXamlToolkit (#3910)
Copilot Aug 30, 2025
b655e99
Update packaging to use dotnet pack with centralized MSBuild properti…
Copilot Aug 31, 2025
ceea98f
Fixes NuGet package creation output path (#3911)
Keboo Aug 31, 2025
8da4640
Fix: Add TemplateBindings to CornerRadius, BorderBrush and BorderThic…
HedpE- Sep 3, 2025
44ae0e3
Default AutomationProperties.Name to HintAssist.Hint (#3913)
corvinsz Sep 5, 2025
a0517e7
Bump actions/stale from 9 to 10 (#3916)
dependabot[bot] Sep 8, 2025
46e5193
Bump actions/setup-dotnet from 4 to 5 (#3917)
dependabot[bot] Sep 8, 2025
be0b22b
Update README to remove example links
Keboo Sep 11, 2025
49b362a
Add hover halo for `CheckBox` and `RadioButton` (#3919)
corvinsz Sep 15, 2025
aa2bddd
Set SmartHint.IsContentNullOrEmpty on initial load (#3915)
corvinsz Sep 15, 2025
486d73a
implement TreeDataGrid (#3877)
MohammadHadi2031 Sep 26, 2025
e5d0c3d
Prefer TemplateBinding over Binding with RelativeSource (#3930)
corvinsz Sep 27, 2025
bdde277
Fix White rectangle when disabling Calendar (#3935)
corvinsz Oct 4, 2025
c26fcc5
Fix horizontal ScrollBar placement for multi-line TextBox (#3934)
nicolaihenriksen Oct 4, 2025
acfa2df
Updates versions to 5.3.1 (#3941)
Keboo Oct 6, 2025
e8b61ec
Bump fastify/github-action-merge-dependabot from 3.11.1 to 3.11.2 (#3…
dependabot[bot] Oct 10, 2025
8304e64
Porting material-color-utilities to dotnet #2475 (#3920)
MovGP0 Oct 10, 2025
65c1d80
✨ Set up comprehensive Copilot instructions with clarified .NET versi…
Copilot Oct 11, 2025
2ba6a98
Update MaterialDesignPopupBoxButton style properties (#3936)
corvinsz Oct 17, 2025
6d12a66
rebase on master
corvinsz Jun 17, 2025
e326f7c
Refactor TabControl templates so that `ScrollingTabControlTemplate` a…
corvinsz Oct 24, 2025
3de88e2
Split ScrollingTabControlTemplate and WrappingTabControlTemplate into…
corvinsz Oct 24, 2025
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
6 changes: 4 additions & 2 deletions src/MainDemo.Wpf/Domain/TabsViewModel.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,10 @@

namespace MaterialDesignDemo.Domain;

internal class TabsViewModel : ViewModelBase
internal partial class TabsViewModel : ObservableObject
{
public ObservableCollection<CustomTab> CustomTabs { get; }

public List<int> LongList { get; }
public CustomTab? SelectedTab { get; set; }

public string? VeryLongText { get; set; } = @"
Expand Down Expand Up @@ -47,6 +47,8 @@ public TabsViewModel()
CustomContent = "Custom content 3",
},
};

LongList = Enumerable.Range(1, 20).ToList();
}

}
Expand Down
82 changes: 82 additions & 0 deletions src/MainDemo.Wpf/Tabs.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -755,5 +755,87 @@
</materialDesign:Card>
</smtx:XamlDisplay>

<Border Width="720"
BorderBrush="{DynamicResource MaterialDesign.Brush.Primary}"
BorderThickness="1">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" MinWidth="50" />
<ColumnDefinition Width="2" />
<ColumnDefinition Width="*" MinWidth="50" />
</Grid.ColumnDefinitions>

<materialDesign:ColorZone Grid.ColumnSpan="2"
Padding="8"
Mode="PrimaryMid">
<TextBlock Text="materialDesign:TabAssist.HeaderBehavior=&quot;Scrolling&quot;" />
</materialDesign:ColorZone>

<materialDesign:ColorZone Grid.Column="2"
Padding="8"
Mode="PrimaryMid">
<TextBlock Text="materialDesign:TabAssist.HeaderBehavior=&quot;Wrapping&quot;" />
</materialDesign:ColorZone>

<smtx:XamlDisplay Grid.Row="1"
Grid.Column="0"
Margin="16"
UniqueKey="tabs_tabAssist_1">
<TabControl materialDesign:TabAssist.HeaderBehavior="Scrolling"
ItemsSource="{Binding LongList}"
Style="{StaticResource MaterialDesignTabControl}">
<TabControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding ., StringFormat=Header {0}}" />
</StackPanel>
</DataTemplate>
</TabControl.ItemTemplate>
<TabControl.ContentTemplate>
<DataTemplate>
<TextBlock Margin="10"
FontSize="18"
Text="{Binding ., StringFormat=Content {0}}" />
</DataTemplate>
</TabControl.ContentTemplate>
</TabControl>
</smtx:XamlDisplay>

<GridSplitter Grid.RowSpan="2"
Grid.Column="1"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" />

<smtx:XamlDisplay Grid.Row="1"
Grid.Column="2"
Margin="16"
UniqueKey="tabs_tabAssist_2">
<TabControl materialDesign:TabAssist.HeaderBehavior="Wrapping"
ItemsSource="{Binding LongList}"
Style="{StaticResource MaterialDesignTabControl}">
<TabControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding ., StringFormat=Header {0}}" />
</StackPanel>
</DataTemplate>
</TabControl.ItemTemplate>
<TabControl.ContentTemplate>
<DataTemplate>
<TextBlock Margin="10"
FontSize="18"
Text="{Binding ., StringFormat=Content {0}}" />
</DataTemplate>
</TabControl.ContentTemplate>
</TabControl>
</smtx:XamlDisplay>

</Grid>
</Border>

</StackPanel>
</UserControl>
18 changes: 17 additions & 1 deletion src/MaterialDesignThemes.Wpf/TabAssist.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
namespace MaterialDesignThemes.Wpf;

public enum TabControlHeaderBehavior
{
Scrolling,
Wrapping
}

public static class TabAssist
{
public static readonly DependencyProperty HasFilledTabProperty = DependencyProperty.RegisterAttached(
Expand Down Expand Up @@ -27,7 +33,7 @@ public static void SetHeaderPanelMargin(DependencyObject element, Thickness valu
=> element.SetValue(HeaderPanelMarginProperty, value);

public static Thickness GetHeaderPanelMargin(DependencyObject element)
=> (Thickness) element.GetValue(HeaderPanelMarginProperty);
=> (Thickness)element.GetValue(HeaderPanelMarginProperty);

internal static Visibility GetBindableIsItemsHost(DependencyObject obj)
=> (Visibility)obj.GetValue(BindableIsItemsHostProperty);
Expand All @@ -45,4 +51,14 @@ private static void OnBindableIsItemsHostChanged(DependencyObject d, DependencyP
panel.IsItemsHost = (Visibility)e.NewValue == Visibility.Visible;
}
}

public static TabControlHeaderBehavior GetHeaderBehavior(DependencyObject obj)
=> (TabControlHeaderBehavior)obj.GetValue(HeaderBehaviorProperty);

public static void SetHeaderBehavior(DependencyObject obj, TabControlHeaderBehavior value)
=> obj.SetValue(HeaderBehaviorProperty, value);

public static readonly DependencyProperty HeaderBehaviorProperty =
DependencyProperty.RegisterAttached("HeaderBehavior", typeof(TabControlHeaderBehavior), typeof(TabAssist),
new PropertyMetadata(TabControlHeaderBehavior.Scrolling));
}
82 changes: 54 additions & 28 deletions src/MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.TabControl.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,57 +31,83 @@
<ControlTemplate TargetType="{x:Type TabControl}">
<DockPanel KeyboardNavigation.TabNavigation="Local">
<wpf:ColorZone x:Name="PART_HeaderZone"
VerticalAlignment="Stretch"
Panel.ZIndex="1"
wpf:ElevationAssist.Elevation="{TemplateBinding wpf:ElevationAssist.Elevation}"
Background="{TemplateBinding wpf:ColorZoneAssist.Background}"
DockPanel.Dock="Top"
Focusable="False">
<ScrollViewer wpf:ScrollViewerAssist.BubbleVerticalScroll="True"
wpf:ScrollViewerAssist.SupportHorizontalScroll="True"
VerticalAlignment="Stretch"
Panel.ZIndex="1"
wpf:ElevationAssist.Elevation="{TemplateBinding wpf:ElevationAssist.Elevation}"
Background="{TemplateBinding wpf:ColorZoneAssist.Background}"
DockPanel.Dock="Top"
Focusable="False">
<Grid>
Copy link
Copy Markdown
Member

@Keboo Keboo Sep 26, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Rather than this grid with both sets of controls. What if we apply a style trigger to the ColorZone and swap out its child content based on the AP?

<!-- Scrollable headers -->
<ScrollViewer x:Name="PART_HeaderScrollViewer"
wpf:ScrollViewerAssist.BubbleVerticalScroll="True"
wpf:ScrollViewerAssist.IgnorePadding="{Binding Path=(wpf:ScrollViewerAssist.IgnorePadding), RelativeSource={RelativeSource TemplatedParent}}"
wpf:ScrollViewerAssist.PaddingMode="{Binding Path=(wpf:ScrollViewerAssist.PaddingMode), RelativeSource={RelativeSource TemplatedParent}}"
wpf:ScrollViewerAssist.SupportHorizontalScroll="True"
HorizontalScrollBarVisibility="Hidden"
VerticalScrollBarVisibility="Hidden">
<StackPanel>
<UniformGrid x:Name="CenteredHeaderPanel"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
<StackPanel>
<UniformGrid x:Name="CenteredHeaderPanel"
Margin="{Binding Path=(wpf:TabAssist.HeaderPanelMargin), RelativeSource={RelativeSource TemplatedParent}}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
wpf:TabAssist.BindableIsItemsHost="{Binding Visibility, RelativeSource={RelativeSource Self}}"
Focusable="False"
KeyboardNavigation.TabIndex="1"
Rows="1" />
<VirtualizingStackPanel x:Name="HeaderPanel"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
<VirtualizingStackPanel x:Name="HeaderPanel"
Margin="{Binding Path=(wpf:TabAssist.HeaderPanelMargin), RelativeSource={RelativeSource TemplatedParent}}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
wpf:TabAssist.BindableIsItemsHost="{Binding Visibility, RelativeSource={RelativeSource Self}}"
Focusable="False"
KeyboardNavigation.TabIndex="1"
Orientation="Horizontal" />
</StackPanel>
</ScrollViewer>
</StackPanel>
</ScrollViewer>

<!-- Wrapping headers -->
<ScrollViewer x:Name="PART_HeaderWrapScrollViewer"
HorizontalScrollBarVisibility="Disabled"
VerticalScrollBarVisibility="Auto"
Visibility="Collapsed">
<WrapPanel x:Name="HeaderWrapPanel"
Margin="{Binding Path=(wpf:TabAssist.HeaderPanelMargin), RelativeSource={RelativeSource TemplatedParent}}"
Background="Transparent"
IsItemsHost="True"
KeyboardNavigation.TabIndex="1" />
</ScrollViewer>
</Grid>
</wpf:ColorZone>
<Border x:Name="PART_BorderSelectedContent"
Padding="{TemplateBinding Padding}"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Panel.ZIndex="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(Panel.ZIndex)}"
Background="{x:Null}"
Focusable="False">
Padding="{TemplateBinding Padding}"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Panel.ZIndex="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(Panel.ZIndex)}"
Background="{x:Null}"
Focusable="False">
<ContentPresenter x:Name="PART_SelectedContentHost"
Margin="{TemplateBinding Padding}"
ContentSource="SelectedContent"
ContentStringFormat="{TemplateBinding SelectedContentStringFormat}"
ContentTemplate="{TemplateBinding SelectedContentTemplate}"
ContentTemplateSelector="{TemplateBinding SelectedContentTemplateSelector}"
Focusable="False"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
Margin="{TemplateBinding Padding}"
ContentSource="SelectedContent"
ContentStringFormat="{TemplateBinding SelectedContentStringFormat}"
ContentTemplate="{TemplateBinding SelectedContentTemplate}"
ContentTemplateSelector="{TemplateBinding SelectedContentTemplateSelector}"
Focusable="False"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
</Border>
</DockPanel>

<ControlTemplate.Triggers>

<Trigger Property="wpf:TabAssist.HeaderBehavior" Value="Scrolling">
<Setter TargetName="PART_HeaderScrollViewer" Property="Visibility" Value="Visible"/>
<Setter TargetName="PART_HeaderWrapScrollViewer" Property="Visibility" Value="Collapsed"/>
</Trigger>
<Trigger Property="wpf:TabAssist.HeaderBehavior" Value="Wrapping">
<Setter TargetName="PART_HeaderScrollViewer" Property="Visibility" Value="Collapsed"/>
<Setter TargetName="PART_HeaderWrapScrollViewer" Property="Visibility" Value="Visible"/>
</Trigger>

<Trigger Property="HorizontalContentAlignment" Value="Stretch">
<Setter TargetName="CenteredHeaderPanel" Property="Visibility" Value="Visible" />
<Setter TargetName="HeaderPanel" Property="Visibility" Value="Collapsed" />
Expand Down
Loading