Update ToolbarCustomizationPage.xaml

Author: yair100

src/Files.App/Views/Settings/ToolbarCustomizationPage.xaml

@@ -76,23 +76,26 @@
 		</Grid>
 
 		<!--  Context picker  -->
-		<Grid
-			Grid.Row="1"
-			Padding="16,12"
-			ColumnSpacing="12">
-			<Grid.ColumnDefinitions>
-				<ColumnDefinition Width="Auto" />
-				<ColumnDefinition Width="*" />
-			</Grid.ColumnDefinitions>
-			<TextBlock VerticalAlignment="Center" Text="{helpers:ResourceString Name=ChooseToolbarModeToCustomize}" />
-			<uc:ComboBoxEx
-				Grid.Column="1"
-				MinWidth="220"
-				AutomationProperties.Name="{helpers:ResourceString Name=ChooseToolbarModeToCustomize}"
-				DisplayMemberPath="Value"
-				ItemsSource="{x:Bind ViewModel.ToolbarContexts, Mode=OneWay}"
-				SelectedValue="{x:Bind ViewModel.SelectedToolbarContextId, Mode=TwoWay}"
-				SelectedValuePath="Key" />
+		<Grid Grid.Row="1" Padding="16,12">
+			<StackPanel
+				x:Name="ContextPickerPanel"
+				Orientation="Horizontal"
+				Spacing="12">
+				<TextBlock
+					x:Name="ToolbarModeLabel"
+					VerticalAlignment="Center"
+					Text="{helpers:ResourceString Name=ChooseToolbarModeToCustomize}"
+					TextWrapping="WrapWholeWords" />
+				<uc:ComboBoxEx
+					x:Name="ToolbarModeComboBox"
+					Width="240"
+					HorizontalAlignment="Left"
+					AutomationProperties.Name="{helpers:ResourceString Name=ChooseToolbarModeToCustomize}"
+					DisplayMemberPath="Value"
+					ItemsSource="{x:Bind ViewModel.ToolbarContexts, Mode=OneWay}"
+					SelectedValue="{x:Bind ViewModel.SelectedToolbarContextId, Mode=TwoWay}"
+					SelectedValuePath="Key" />
+			</StackPanel>
 		</Grid>
 
 		<!--  Available and Added items  -->
@@ -346,5 +349,27 @@
 					Content="{helpers:ResourceString Name=Cancel}" />
 			</StackPanel>
 		</Grid>
+		<VisualStateManager.VisualStateGroups>
+			<VisualStateGroup>
+				<VisualState x:Name="DefaultContextPickerState">
+					<VisualState.StateTriggers>
+						<AdaptiveTrigger MinWindowWidth="640" />
+					</VisualState.StateTriggers>
+					<VisualState.Setters>
+						<Setter Target="ContextPickerPanel.Orientation" Value="Horizontal" />
+						<Setter Target="ContextPickerPanel.Spacing" Value="12" />
+					</VisualState.Setters>
+				</VisualState>
+				<VisualState x:Name="CompactContextPickerState">
+					<VisualState.StateTriggers>
+						<AdaptiveTrigger MinWindowWidth="0" />
+					</VisualState.StateTriggers>
+					<VisualState.Setters>
+						<Setter Target="ContextPickerPanel.Orientation" Value="Vertical" />
+						<Setter Target="ContextPickerPanel.Spacing" Value="8" />
+					</VisualState.Setters>
+				</VisualState>
+			</VisualStateGroup>
+		</VisualStateManager.VisualStateGroups>
 	</Grid>
 </Page>