Skip to content

Commit 08546c5

Browse files
nicolaihenriksennicolaihenriksen
authored
TabControl: Add (opt-in) navigation panel and custom header content (#4026)
* NavigationPanel and CustomContent elements added Navigation buttons still need to take "disabled" tabs into account * NavigationPanel now takes disabled tabs into account * Adding samples to demo app * Add UI test for NavigationPanel visibility (and supporting AP) * Add AP to control placement of navigation panel Update UI tests accordingly * Add TabAssist.NavigationPanelBehavior to control button functionality * Add UI tests for TabAssist.NavigationPanelBehavior * Attempt at fixing timing issue in UI test * Add sample of new APs in demo app * Fix issue where navigating right could actually exceed the extent width * Fix bug mentioned by keboo in review BringIntoView direction is now dependent on the nav panel behavior. For scroll behavior, the current scroll position compared to the "next" tab determines the direction, whereas for select behavior, it is simply the index of the "next" tab that needs to be considered. * Add UI test from Corvinz review * Set explicit default values for enum based APs * Minor bug fix. When no next index, return "default value" * Ensure behavior does not break Visual Studio XAML Designer
1 parent 17ed69e commit 08546c5

File tree

9 files changed

+1048
-37
lines changed

9 files changed

+1048
-37
lines changed

‎src/MainDemo.Wpf/Tabs.xaml‎

Lines changed: 264 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -756,8 +756,9 @@
756756
</smtx:XamlDisplay>
757757

758758
<Border Width="720"
759-
BorderBrush="{DynamicResource MaterialDesign.Brush.Primary}"
760-
BorderThickness="1">
759+
Margin="0,0,0,16"
760+
BorderBrush="{DynamicResource MaterialDesign.Brush.Primary}"
761+
BorderThickness="1">
761762
<Grid>
762763
<Grid.RowDefinitions>
763764
<RowDefinition Height="auto" />
@@ -837,5 +838,266 @@
837838
</Grid>
838839
</Border>
839840

841+
<Border Width="720"
842+
Margin="0,0,0,16"
843+
BorderBrush="{DynamicResource MaterialDesign.Brush.Primary}"
844+
BorderThickness="1">
845+
<Grid>
846+
<Grid.RowDefinitions>
847+
<RowDefinition Height="auto" />
848+
<RowDefinition Height="*" />
849+
</Grid.RowDefinitions>
850+
<Grid.ColumnDefinitions>
851+
<ColumnDefinition Width="*" MinWidth="50" />
852+
<ColumnDefinition Width="2" />
853+
<ColumnDefinition Width="*" MinWidth="50" />
854+
</Grid.ColumnDefinitions>
855+
856+
<materialDesign:ColorZone Grid.ColumnSpan="2"
857+
Padding="8"
858+
Mode="PrimaryMid">
859+
<TextBlock Text="materialDesign:TabAssist.UseNavigationPanel=&quot;True&quot;" />
860+
</materialDesign:ColorZone>
861+
862+
<materialDesign:ColorZone Grid.Column="2"
863+
Padding="8"
864+
Mode="PrimaryMid">
865+
<TextBlock Text="materialDesign:TabAssist.HeaderPanelCustomContent=&quot;...&quot;" />
866+
</materialDesign:ColorZone>
867+
868+
<smtx:XamlDisplay Grid.Row="1"
869+
Grid.Column="0"
870+
Margin="16"
871+
UniqueKey="tabs_tabAssist_3">
872+
<TabControl materialDesign:TabAssist.HeaderBehavior="Scrolling"
873+
materialDesign:TabAssist.UseNavigationPanel="True"
874+
ItemsSource="{Binding LongList}"
875+
Style="{StaticResource MaterialDesignTabControl}">
876+
<TabControl.ItemTemplate>
877+
<DataTemplate>
878+
<StackPanel Orientation="Horizontal">
879+
<TextBlock Text="{Binding ., StringFormat=Header {0}}" />
880+
</StackPanel>
881+
</DataTemplate>
882+
</TabControl.ItemTemplate>
883+
<TabControl.ContentTemplate>
884+
<DataTemplate>
885+
<TextBlock Margin="10"
886+
FontSize="18"
887+
Text="{Binding ., StringFormat=Content {0}}" />
888+
</DataTemplate>
889+
</TabControl.ContentTemplate>
890+
</TabControl>
891+
</smtx:XamlDisplay>
892+
893+
<GridSplitter Grid.RowSpan="2"
894+
Grid.Column="1"
895+
HorizontalAlignment="Stretch"
896+
VerticalAlignment="Stretch" />
897+
898+
<smtx:XamlDisplay Grid.Row="1"
899+
Grid.Column="2"
900+
Margin="16"
901+
UniqueKey="tabs_tabAssist_4">
902+
<TabControl materialDesign:TabAssist.HeaderBehavior="Scrolling"
903+
ItemsSource="{Binding LongList}"
904+
Style="{StaticResource MaterialDesignTabControl}">
905+
<materialDesign:TabAssist.HeaderPanelCustomContent>
906+
<Button Content="{materialDesign:PackIcon Kind=Plus}" Margin="8,0,0,0" />
907+
</materialDesign:TabAssist.HeaderPanelCustomContent>
908+
<TabControl.ItemTemplate>
909+
<DataTemplate>
910+
<StackPanel Orientation="Horizontal">
911+
<TextBlock Text="{Binding ., StringFormat=Header {0}}" />
912+
</StackPanel>
913+
</DataTemplate>
914+
</TabControl.ItemTemplate>
915+
<TabControl.ContentTemplate>
916+
<DataTemplate>
917+
<TextBlock Margin="10"
918+
FontSize="18"
919+
Text="{Binding ., StringFormat=Content {0}}" />
920+
</DataTemplate>
921+
</TabControl.ContentTemplate>
922+
</TabControl>
923+
</smtx:XamlDisplay>
924+
925+
</Grid>
926+
</Border>
927+
928+
<Border Width="720"
929+
Margin="0,0,0,16"
930+
BorderBrush="{DynamicResource MaterialDesign.Brush.Primary}"
931+
BorderThickness="1">
932+
<Grid>
933+
<Grid.RowDefinitions>
934+
<RowDefinition Height="auto" />
935+
<RowDefinition Height="*" />
936+
</Grid.RowDefinitions>
937+
<Grid.ColumnDefinitions>
938+
<ColumnDefinition Width="*" MinWidth="50" />
939+
<ColumnDefinition Width="2" />
940+
<ColumnDefinition Width="*" MinWidth="50" />
941+
</Grid.ColumnDefinitions>
942+
943+
<materialDesign:ColorZone Grid.ColumnSpan="2"
944+
Padding="8"
945+
Mode="PrimaryMid">
946+
<TextBlock Text="materialDesign:TabAssist.NavigationPanelPlacement=&quot;Left&quot;" />
947+
</materialDesign:ColorZone>
948+
949+
<materialDesign:ColorZone Grid.Column="2"
950+
Padding="8"
951+
Mode="PrimaryMid">
952+
<TextBlock Text="materialDesign:TabAssist.NavigationPanelPlacement=&quot;Right&quot;" />
953+
</materialDesign:ColorZone>
954+
955+
<smtx:XamlDisplay Grid.Row="1"
956+
Grid.Column="0"
957+
Margin="16"
958+
UniqueKey="tabs_tabAssist_5">
959+
<TabControl materialDesign:TabAssist.HeaderBehavior="Scrolling"
960+
materialDesign:TabAssist.UseNavigationPanel="True"
961+
materialDesign:TabAssist.NavigationPanelPlacement="Left"
962+
ItemsSource="{Binding LongList}"
963+
Style="{StaticResource MaterialDesignTabControl}">
964+
<TabControl.ItemTemplate>
965+
<DataTemplate>
966+
<StackPanel Orientation="Horizontal">
967+
<TextBlock Text="{Binding ., StringFormat=Header {0}}" />
968+
</StackPanel>
969+
</DataTemplate>
970+
</TabControl.ItemTemplate>
971+
<TabControl.ContentTemplate>
972+
<DataTemplate>
973+
<TextBlock Margin="10"
974+
FontSize="18"
975+
Text="{Binding ., StringFormat=Content {0}}" />
976+
</DataTemplate>
977+
</TabControl.ContentTemplate>
978+
</TabControl>
979+
</smtx:XamlDisplay>
980+
981+
<GridSplitter Grid.RowSpan="2"
982+
Grid.Column="1"
983+
HorizontalAlignment="Stretch"
984+
VerticalAlignment="Stretch" />
985+
986+
<smtx:XamlDisplay Grid.Row="1"
987+
Grid.Column="2"
988+
Margin="16"
989+
UniqueKey="tabs_tabAssist_6">
990+
<TabControl materialDesign:TabAssist.HeaderBehavior="Scrolling"
991+
materialDesign:TabAssist.UseNavigationPanel="True"
992+
materialDesign:TabAssist.NavigationPanelPlacement="Right"
993+
ItemsSource="{Binding LongList}"
994+
Style="{StaticResource MaterialDesignTabControl}">
995+
<TabControl.ItemTemplate>
996+
<DataTemplate>
997+
<StackPanel Orientation="Horizontal">
998+
<TextBlock Text="{Binding ., StringFormat=Header {0}}" />
999+
</StackPanel>
1000+
</DataTemplate>
1001+
</TabControl.ItemTemplate>
1002+
<TabControl.ContentTemplate>
1003+
<DataTemplate>
1004+
<TextBlock Margin="10"
1005+
FontSize="18"
1006+
Text="{Binding ., StringFormat=Content {0}}" />
1007+
</DataTemplate>
1008+
</TabControl.ContentTemplate>
1009+
</TabControl>
1010+
</smtx:XamlDisplay>
1011+
1012+
</Grid>
1013+
</Border>
1014+
1015+
1016+
<Border Width="720"
1017+
Margin="0,0,0,16"
1018+
BorderBrush="{DynamicResource MaterialDesign.Brush.Primary}"
1019+
BorderThickness="1">
1020+
<Grid>
1021+
<Grid.RowDefinitions>
1022+
<RowDefinition Height="auto" />
1023+
<RowDefinition Height="*" />
1024+
</Grid.RowDefinitions>
1025+
<Grid.ColumnDefinitions>
1026+
<ColumnDefinition Width="*" MinWidth="50" />
1027+
<ColumnDefinition Width="2" />
1028+
<ColumnDefinition Width="*" MinWidth="50" />
1029+
</Grid.ColumnDefinitions>
1030+
1031+
<materialDesign:ColorZone Grid.ColumnSpan="2"
1032+
Padding="8"
1033+
Mode="PrimaryMid">
1034+
<TextBlock Text="materialDesign:TabAssist.NavigationPanelBehavior=&quot;Scroll&quot;" />
1035+
</materialDesign:ColorZone>
1036+
1037+
<materialDesign:ColorZone Grid.Column="2"
1038+
Padding="8"
1039+
Mode="PrimaryMid">
1040+
<TextBlock Text="materialDesign:TabAssist.NavigationPanelBehavior=&quot;Select&quot;" />
1041+
</materialDesign:ColorZone>
1042+
1043+
<smtx:XamlDisplay Grid.Row="1"
1044+
Grid.Column="0"
1045+
Margin="16"
1046+
UniqueKey="tabs_tabAssist_7">
1047+
<TabControl materialDesign:TabAssist.HeaderBehavior="Scrolling"
1048+
materialDesign:TabAssist.UseNavigationPanel="True"
1049+
materialDesign:TabAssist.NavigationPanelBehavior="Scroll"
1050+
ItemsSource="{Binding LongList}"
1051+
Style="{StaticResource MaterialDesignTabControl}">
1052+
<TabControl.ItemTemplate>
1053+
<DataTemplate>
1054+
<StackPanel Orientation="Horizontal">
1055+
<TextBlock Text="{Binding ., StringFormat=Header {0}}" />
1056+
</StackPanel>
1057+
</DataTemplate>
1058+
</TabControl.ItemTemplate>
1059+
<TabControl.ContentTemplate>
1060+
<DataTemplate>
1061+
<TextBlock Margin="10"
1062+
FontSize="18"
1063+
Text="{Binding ., StringFormat=Content {0}}" />
1064+
</DataTemplate>
1065+
</TabControl.ContentTemplate>
1066+
</TabControl>
1067+
</smtx:XamlDisplay>
1068+
1069+
<GridSplitter Grid.RowSpan="2"
1070+
Grid.Column="1"
1071+
HorizontalAlignment="Stretch"
1072+
VerticalAlignment="Stretch" />
1073+
1074+
<smtx:XamlDisplay Grid.Row="1"
1075+
Grid.Column="2"
1076+
Margin="16"
1077+
UniqueKey="tabs_tabAssist_8">
1078+
<TabControl materialDesign:TabAssist.HeaderBehavior="Scrolling"
1079+
materialDesign:TabAssist.UseNavigationPanel="True"
1080+
materialDesign:TabAssist.NavigationPanelBehavior="Select"
1081+
ItemsSource="{Binding LongList}"
1082+
Style="{StaticResource MaterialDesignTabControl}">
1083+
<TabControl.ItemTemplate>
1084+
<DataTemplate>
1085+
<StackPanel Orientation="Horizontal">
1086+
<TextBlock Text="{Binding ., StringFormat=Header {0}}" />
1087+
</StackPanel>
1088+
</DataTemplate>
1089+
</TabControl.ItemTemplate>
1090+
<TabControl.ContentTemplate>
1091+
<DataTemplate>
1092+
<TextBlock Margin="10"
1093+
FontSize="18"
1094+
Text="{Binding ., StringFormat=Content {0}}" />
1095+
</DataTemplate>
1096+
</TabControl.ContentTemplate>
1097+
</TabControl>
1098+
</smtx:XamlDisplay>
1099+
1100+
</Grid>
1101+
</Border>
8401102
</StackPanel>
8411103
</UserControl>

0 commit comments

Comments
 (0)