feat(TabControl): Allow changing NavigationButtonStyle

src/MainDemo.Wpf/Tabs.xaml

@@ -4,6 +4,7 @@
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
              xmlns:domain="clr-namespace:MaterialDesignDemo.Domain"
              xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
+             xmlns:sharedTabControls="clr-namespace:MaterialDesignDemo.Shared.Examples.TabControls;assembly=MaterialDesignDemo.Shared"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
              xmlns:smtx="clr-namespace:ShowMeTheXAML;assembly=ShowMeTheXAML"
              d:DataContext="{d:DesignInstance Type=domain:TabsViewModel,
@@ -1098,6 +1099,9 @@
         </smtx:XamlDisplay>
 
       </Grid>
-    </Border>    
+    </Border>
+
+    <Rectangle Style="{StaticResource PageSectionSeparator}" />
+    <sharedTabControls:NavigationButtonStyleExample />
   </StackPanel>
 </UserControl>

src/MaterialDesignDemo.Shared/Examples/TabControls/NavigationButtonStyleExample.xaml

@@ -0,0 +1,58 @@
+<UserControl x:Class="MaterialDesignDemo.Shared.Examples.TabControls.NavigationButtonStyleExample"
+             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:local="clr-namespace:MaterialDesignDemo.Shared.Examples.TabControls"
+             xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:smtx="clr-namespace:ShowMeTheXAML;assembly=ShowMeTheXAML"
+             d:DesignHeight="450"
+             d:DesignWidth="800"
+             mc:Ignorable="d">
+  <materialDesign:Card Padding="16">
+    <StackPanel>
+      <TextBlock Margin="0,0,0,8"
+                 Style="{StaticResource MaterialDesignHeadline6TextBlock}"
+                 Text="Custom button style" />
+
+      <TextBlock Margin="0,0,0,16"
+                 Text="Use &quot;materialDesign:TabAssist.NavigationButtonStyle&quot; for a custom button style."
+                 TextWrapping="Wrap" />
+
+      <smtx:XamlDisplay HorizontalAlignment="Left" UniqueKey="TabControls_NavigationButtonStyleExample_1">
+        <Border Width="600"
+                BorderBrush="{DynamicResource MaterialDesign.Brush.Primary}"
+                BorderThickness="1">
+          <TabControl materialDesign:TabAssist.HeaderBehavior="Scrolling"
+                      materialDesign:TabAssist.NavigationPanelBehavior="Scroll"
+                      materialDesign:TabAssist.UseNavigationPanel="True"
+                      ItemsSource="{Binding LongList}"
+                      Style="{StaticResource MaterialDesignTabControl}">
+            <materialDesign:TabAssist.NavigationButtonStyle>
+              <Style TargetType="Button" BasedOn="{StaticResource MaterialDesignRaisedButton}">
+                <Setter Property="Height" Value="24" />
+                <Setter Property="Padding" Value="4" />
+                <Setter Property="Width" Value="24" />
+              </Style>
+            </materialDesign:TabAssist.NavigationButtonStyle>
+            <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>
+        </Border>
+      </smtx:XamlDisplay>
+
+    </StackPanel>
+  </materialDesign:Card>
+</UserControl>

src/MaterialDesignDemo.Shared/Examples/TabControls/NavigationButtonStyleExample.xaml.cs

@@ -0,0 +1,12 @@
+namespace MaterialDesignDemo.Shared.Examples.TabControls;
+
+/// <summary>
+/// Interaction logic for NavigationButtonStyleExample.xaml
+/// </summary>
+public partial class NavigationButtonStyleExample : UserControl
+{
+    public NavigationButtonStyleExample()
+    {
+        InitializeComponent();
+    }
+}

src/MaterialDesignThemes.Wpf/TabAssist.cs

@@ -154,6 +154,13 @@ public static void SetScrollDuration(DependencyObject obj, TimeSpan value)
     public static readonly DependencyProperty ScrollDurationProperty =
         DependencyProperty.RegisterAttached("ScrollDuration", typeof(TimeSpan),
             typeof(TabAssist), new PropertyMetadata(TimeSpan.Zero));
+
+    public static Style? GetNavigationButtonStyle(TabControl tabControl)
+        => (Style?)tabControl.GetValue(NavigationButtonStyleProperty);
+    public static void SetNavigationButtonStyle(TabControl tabControl, Style? value)
+        => tabControl.SetValue(NavigationButtonStyleProperty, value);
+    public static readonly DependencyProperty NavigationButtonStyleProperty =
+        DependencyProperty.RegisterAttached("NavigationButtonStyle", typeof(Style), typeof(TabAssist), new PropertyMetadata(null));
 }
 
 public enum NavigationPanelPlacement

src/MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.TabControl.xaml

@@ -9,6 +9,7 @@
 
   <ResourceDictionary.MergedDictionaries>
     <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.TextBlock.xaml" />
+    <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Button.xaml" />
   </ResourceDictionary.MergedDictionaries>
 
   <Style x:Key="FocusVisual">
@@ -108,21 +109,19 @@
                 </MultiBinding>
               </StackPanel.Visibility>
               <Button x:Name="RightPreviousButton"
-                      Width="16"
-                      Height="16"
-                      Padding="0"
                       Margin="0,0,8,0"
+                      Style="{Binding Path=(wpf:TabAssist.NavigationButtonStyle),
+                                      RelativeSource={RelativeSource TemplatedParent}}"
                       Command="{Binding ElementName=TabControlHeaderScrollBehavior, Path=PreviousTabCommand}"
                       Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(wpf:TabAssist.NavigationPanelPlacement), Converter={StaticResource RightPreviousTabControlNavButtonVisibilityConverter}}">
-                <wpf:PackIcon Kind="ChevronLeft" Width="12" Height="12" />
+                <wpf:PackIcon Kind="ChevronLeft" />
               </Button>
               <Button x:Name="RightNextButton"
-                      Width="16"
-                      Height="16"
-                      Padding="0"
+                      Style="{Binding Path=(wpf:TabAssist.NavigationButtonStyle),
+                                      RelativeSource={RelativeSource TemplatedParent}}"
                       Command="{Binding ElementName=TabControlHeaderScrollBehavior, Path=NextTabCommand}"
                       Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(wpf:TabAssist.NavigationPanelPlacement), Converter={StaticResource RightNextTabControlNavButtonVisibilityConverter}}">
-                <wpf:PackIcon Kind="ChevronRight" Width="12" Height="12" />
+                <wpf:PackIcon Kind="ChevronRight" />
               </Button>
             </StackPanel>
 
@@ -147,21 +146,19 @@
                 </MultiBinding>
               </StackPanel.Visibility>
               <Button x:Name="LeftPreviousButton"
-                      Width="16"
-                      Height="16"
-                      Padding="0"
+                      Style="{Binding Path=(wpf:TabAssist.NavigationButtonStyle),
+                                      RelativeSource={RelativeSource TemplatedParent}}"
                       Command="{Binding ElementName=TabControlHeaderScrollBehavior, Path=PreviousTabCommand}"
                       Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(wpf:TabAssist.NavigationPanelPlacement), Converter={StaticResource LeftPreviousTabControlNavButtonVisibilityConverter}}">
-                <wpf:PackIcon Kind="ChevronLeft" Width="12" Height="12" />
+                <wpf:PackIcon Kind="ChevronLeft" />
               </Button>
               <Button x:Name="LeftNextButton"
-                      Width="16"
-                      Height="16"
-                      Padding="0"
+                      Style="{Binding Path=(wpf:TabAssist.NavigationButtonStyle),
+                                      RelativeSource={RelativeSource TemplatedParent}}"
                       Margin="8,0,0,0"
                       Command="{Binding ElementName=TabControlHeaderScrollBehavior, Path=NextTabCommand}"
                       Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(wpf:TabAssist.NavigationPanelPlacement), Converter={StaticResource LeftNextTabControlNavButtonVisibilityConverter}}">
-                <wpf:PackIcon Kind="ChevronRight" Width="12" Height="12" />
+                <wpf:PackIcon Kind="ChevronRight" />
               </Button>
             </StackPanel>
           </Grid>
@@ -343,6 +340,7 @@
     <Setter Property="wpf:TabAssist.UseHeaderPadding" Value="True" />
     <Setter Property="wpf:TabAssist.ScrollDuration" Value="0:0:0.250" />
     <Setter Property="wpf:TabAssist.NavigationPanelMargin" Value="8,0" />
+    <Setter Property="wpf:TabAssist.NavigationButtonStyle" Value="{StaticResource MaterialDesignIconForegroundButton}" />
 
     <Style.Triggers>
       <Trigger Property="wpf:TabAssist.HeaderBehavior" Value="Wrapping">

tests/MaterialDesignThemes.UITests/WPF/TabControls/TabControlTests.cs

@@ -457,10 +457,10 @@ public async Task ScrollingTabs_NavigationPanel_ScrollsAndBringsSelectedTabIntoV
         await rightNextButton.LeftClick();
         await Wait.For(async () => await scrollViewer.GetContentHorizontalOffset() > offsetBefore, retry);
 
-        // Select an arbitrary tab (index 8)
-        IVisualElement<TabItem> someTab = await tabControl.GetElement<TabItem>("/TabItem[8]");
+        // Select an arbitrary tab (index 6)
+        IVisualElement<TabItem> someTab = await tabControl.GetElement<TabItem>("/TabItem[6]");
         await someTab.LeftClick();
-        await Wait.For(async () => await tabControl.GetSelectedIndex() == 8, retry);
+        await Wait.For(async () => await tabControl.GetSelectedIndex() == 6, retry);
 
         // Scroll back to the left
         double offsetAfterScrollRight = await scrollViewer.GetContentHorizontalOffset();
@@ -470,13 +470,13 @@ public async Task ScrollingTabs_NavigationPanel_ScrollsAndBringsSelectedTabIntoV
 
         // Select the last visible tab
         // NB: The last visible tab is "hardcoded" to always be index 4 due to the fixed Width of 504 on the TabControl
-        IVisualElement<TabItem> lastVisibleTab = await tabControl.GetElement<TabItem>($"/TabItem[4]");
+        IVisualElement<TabItem> lastVisibleTab = await tabControl.GetElement<TabItem>($"/TabItem[3]");
         await lastVisibleTab.LeftClick();
-        await Wait.For(async () => await tabControl.GetSelectedIndex() == 4, retry);
+        await Wait.For(async () => await tabControl.GetSelectedIndex() == 3, retry);
 
         // Assert
         int selectedTabIndex = await tabControl.GetSelectedIndex();
-        await Assert.That(selectedTabIndex).IsEqualTo(4);
+        await Assert.That(selectedTabIndex).IsEqualTo(3);
 
         double offsetWhenOverflowingWidth = await headerPanel.GetHeaderPadding();
         Thickness margin = await headerPanel.GetMargin();