Skip to content

Commit f66d31c

Browse files
Fix default Settings/Back Button Visibility and add support for AutoSuggestBox in TabbedCommandBar
Note: Back Button doesn't actually show correctly still due to issue with Visual States that is unknown
1 parent 7bcf51f commit f66d31c

File tree

1 file changed

+98
-2
lines changed

1 file changed

+98
-2
lines changed

Microsoft.Toolkit.Uwp.UI.Controls.Core/TabbedCommandBar/TabbedCommandBar.xaml

Lines changed: 98 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@
1717
<Setter Property="PaneDisplayMode" Value="Top" />
1818
<Setter Property="PaneToggleButtonStyle" Value="{StaticResource PaneToggleButtonStyle}" />
1919
<Setter Property="IsTabStop" Value="False" />
20+
<Setter Property="IsBackButtonVisible" Value="Collapsed" />
21+
<Setter Property="IsSettingsVisible" Value="False" />
2022
<Setter Property="CompactPaneLength" Value="{ThemeResource NavigationViewCompactPaneLength}" />
2123
<Setter Property="Background" Value="{ThemeResource SystemChromeMediumLowColor}" />
2224
<Setter Property="Template">
@@ -49,6 +51,15 @@
4951
</VisualState>
5052
</VisualStateGroup>
5153

54+
<VisualStateGroup x:Name="AutoSuggestGroup">
55+
<VisualState x:Name="AutoSuggestBoxVisible" />
56+
<VisualState x:Name="AutoSuggestBoxCollapsed">
57+
<VisualState.Setters>
58+
<Setter Target="AutoSuggestArea.Visibility" Value="Collapsed" />
59+
<Setter Target="TopPaneAutoSuggestArea.Visibility" Value="Collapsed" />
60+
</VisualState.Setters>
61+
</VisualState>
62+
</VisualStateGroup>
5263
<VisualStateGroup x:Name="TitleBarVisibilityGroup">
5364
<VisualState x:Name="TitleBarVisible" />
5465
<VisualState x:Name="TitleBarCollapsed">
@@ -57,8 +68,81 @@
5768
</VisualState.Setters>
5869
</VisualState>
5970
</VisualStateGroup>
71+
<!--
72+
Flipped this around, but it really seems like there's an issue here with the WinUI NavigationView not properly applying this state in our re-template for some reason.
73+
Maybe a bug? If not we may need to re-work how this works for our own purposes?
74+
-->
75+
<VisualStateGroup x:Name="BackButtonGroup">
76+
<VisualState x:Name="BackButtonVisible">
77+
<VisualState.Setters>
78+
<Setter Target="BackButtonPlaceholderOnTopNav.Width" Value="{ThemeResource NavigationBackButtonWidth}" />
79+
</VisualState.Setters>
80+
</VisualState>
81+
<VisualState x:Name="BackButtonCollapsed" />
82+
</VisualStateGroup>
6083
</VisualStateManager.VisualStateGroups>
84+
<!-- Button grid -->
85+
<Grid x:Name="PaneToggleButtonGrid"
86+
HorizontalAlignment="Left"
87+
VerticalAlignment="Top"
88+
Canvas.ZIndex="100">
89+
90+
<Grid.RowDefinitions>
91+
<RowDefinition Height="Auto" />
92+
<RowDefinition Height="Auto" />
93+
</Grid.RowDefinitions>
6194

95+
<Grid x:Name="TogglePaneTopPadding"
96+
Height="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.TopPadding}" />
97+
98+
<Grid x:Name="ButtonHolderGrid"
99+
Grid.Row="1"
100+
Margin="{ThemeResource NavigationViewButtonHolderGridMargin}">
101+
<Button x:Name="NavigationViewBackButton"
102+
Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.SmallerPaneToggleButtonWidth}"
103+
VerticalAlignment="Top"
104+
IsEnabled="{TemplateBinding IsBackEnabled}"
105+
Style="{StaticResource NavigationBackButtonNormalStyle}"
106+
Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.BackButtonVisibility}">
107+
<ToolTipService.ToolTip>
108+
<ToolTip x:Name="NavigationViewBackButtonToolTip" />
109+
</ToolTipService.ToolTip>
110+
</Button>
111+
<Button x:Name="NavigationViewCloseButton"
112+
VerticalAlignment="Top"
113+
Style="{StaticResource NavigationBackButtonNormalStyle}">
114+
<ToolTipService.ToolTip>
115+
<ToolTip x:Name="NavigationViewCloseButtonToolTip" />
116+
</ToolTipService.ToolTip>
117+
</Button>
118+
<Button x:Name="TogglePaneButton"
119+
MinWidth="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.SmallerPaneToggleButtonWidth}"
120+
HorizontalAlignment="Center"
121+
VerticalAlignment="Top"
122+
AutomationProperties.LandmarkType="Navigation"
123+
FocusVisualMargin="0"
124+
Style="{TemplateBinding PaneToggleButtonStyle}"
125+
Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.PaneToggleButtonVisibility}">
126+
<TextBlock x:Name="PaneTitleTextBlock"
127+
Grid.Column="0"
128+
Margin="0,-2,0,0"
129+
HorizontalAlignment="Left"
130+
VerticalAlignment="Center"
131+
Style="{StaticResource NavigationViewItemHeaderTextStyle}"
132+
Text="{TemplateBinding PaneTitle}" />
133+
</Button>
134+
135+
<Grid x:Name="PaneTitleHolder"
136+
Height="40"
137+
Visibility="Collapsed">
138+
<ContentControl x:Name="PaneTitlePresenter"
139+
Margin="{ThemeResource NavigationViewPaneTitlePresenterMargin}"
140+
HorizontalContentAlignment="Stretch"
141+
VerticalContentAlignment="Stretch"
142+
IsTabStop="False" />
143+
</Grid>
144+
</Grid>
145+
</Grid>
62146
<!-- Content layouts -->
63147
<Grid>
64148
<Grid.RowDefinitions>
@@ -86,7 +170,7 @@
86170
Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.TopPaneVisibility}">
87171
<Grid.ColumnDefinitions>
88172
<ColumnDefinition x:Name="BackButtonPlaceholderOnTopNav"
89-
Width="{ThemeResource NavigationBackButtonWidth}" />
173+
Width="0" />
90174
<ColumnDefinition Width="Auto" />
91175
<ColumnDefinition Width="Auto" />
92176
<ColumnDefinition Width="Auto" />
@@ -200,6 +284,18 @@
200284
VerticalContentAlignment="Stretch"
201285
IsTabStop="False" />
202286

287+
<Grid x:Name="TopPaneAutoSuggestArea"
288+
Grid.Column="6"
289+
Height="{ThemeResource NavigationViewTopPaneHeight}">
290+
291+
<ContentControl x:Name="TopPaneAutoSuggestBoxPresenter"
292+
MinWidth="216"
293+
Margin="{ThemeResource TopNavigationViewAutoSuggestBoxMargin}"
294+
HorizontalContentAlignment="Stretch"
295+
VerticalContentAlignment="Center"
296+
IsTabStop="False" />
297+
</Grid>
298+
203299
<ContentControl x:Name="PaneFooterOnTopPane"
204300
Grid.Column="7"
205301
HorizontalContentAlignment="Stretch"
@@ -261,4 +357,4 @@
261357
<Setter Property="Background" Value="{ThemeResource TabbedCommandBarAcrylicBackground}" />
262358
</Style>
263359

264-
</ResourceDictionary>
360+
</ResourceDictionary>

0 commit comments

Comments
 (0)