fix: Adjust combobox template for editable feature

unoplatform · Jan 8, 2025 · 88afc2a · 88afc2a
1 parent 22df529
commit 88afc2a
Show file tree

Hide file tree

Showing 2 changed files with 101 additions and 3 deletions.
diff --git a/src/library/Uno.Material/Styles/Controls/v2/ComboBox.xaml b/src/library/Uno.Material/Styles/Controls/v2/ComboBox.xaml
@@ -416,6 +416,74 @@
 		</Setter>
 	</Style>
 
+	<Style x:Key="MaterialTextBoxEditableComboBoxStyle"
+		   TargetType="TextBox">
+		<Setter Property="Background" Value="Transparent" />
+		<Setter Property="Foreground" Value="{ThemeResource ComboBoxForeground}" />
+		<Setter Property="BorderBrush" Value="Transparent" />
+		<Setter Property="BorderThickness" Value="0" />
+		<Setter Property="CornerRadius" Value="{ThemeResource OutlinedTextBoxCornerRadius}" />
+
+		<!-- Start: Body Large Typo -->
+		<Setter Property="FontFamily" Value="{ThemeResource BodyLargeFontFamily}" />
+		<Setter Property="FontWeight" Value="{ThemeResource BodyLargeFontWeight}" />
+		<Setter Property="FontSize" Value="{ThemeResource BodyLargeFontSize}" />
+		<Setter Property="CharacterSpacing" Value="{ThemeResource BodyLargeCharacterSpacing}" />
+		<!-- End: Body Large Typo -->
+
+		<Setter Property="HorizontalContentAlignment" Value="Left" />
+		<Setter Property="VerticalContentAlignment" Value="Center" />
+
+		<Setter Property="Padding" Value="0,5,0,0" />
+		<Setter Property="MinHeight" Value="{ThemeResource OutlinedTextBoxMinHeight}" />
+
+		<Setter Property="Template">
+			<Setter.Value>
+				<ControlTemplate TargetType="TextBox">
+					<Grid>
+						<VisualStateManager.VisualStateGroups>
+							<VisualStateGroup x:Name="CommonStates">
+								<VisualState x:Name="Normal" />
+								<VisualState x:Name="PointerOver" />
+								<VisualState x:Name="Pressed" />
+								<VisualState x:Name="Disabled" />
+								<VisualState x:Name="Focused" />
+							</VisualStateGroup>
+						</VisualStateManager.VisualStateGroups>
+
+						<Grid CornerRadius="{TemplateBinding CornerRadius}"
+							  Background="{TemplateBinding Background}"
+							  Padding="{TemplateBinding Padding}">
+
+							<Grid Margin="0">
+								<Border MinHeight="40"
+										VerticalAlignment="Top"
+										Padding="0,10,0,8">
+									<ScrollViewer x:Name="ContentElement"
+												  HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
+												  HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
+												  IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
+												  IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"
+												  IsTabStop="False"
+												  IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"
+												  VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
+												  VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
+												  VerticalAlignment="Center"
+												  ZoomMode="Disabled"
+												  AutomationProperties.AccessibilityView="Raw">
+										<ScrollViewer.RenderTransform>
+											<CompositeTransform x:Name="ContentElement_CompositeTransform" />
+										</ScrollViewer.RenderTransform>
+									</ScrollViewer>
+								</Border>
+							</Grid>
+						</Grid>
+					</Grid>
+				</ControlTemplate>
+			</Setter.Value>
+		</Setter>
+	</Style>
+
 	<Style x:Key="MaterialComboBoxStyle"
 		   TargetType="ComboBox">
 		<Setter Property="Foreground" Value="{ThemeResource ComboBoxForeground}" />
@@ -614,6 +682,24 @@
 											  Content="{Binding Path=(ut:ControlExtensions.Icon), RelativeSource={RelativeSource TemplatedParent}}"
 											  Visibility="{Binding Path=(ut:ControlExtensions.Icon), RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource NullToCollapsedConverter}, FallbackValue=Collapsed, TargetNullValue=Collapsed}" />
 
+							<!-- IsEditable -->
+							<TextBox x:Name="EditableText"
+									 Grid.Column="1"
+									 Style="{StaticResource MaterialTextBoxEditableComboBoxStyle}"
+									 Margin="0,0,0,0"
+									 Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Text, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
+									 Visibility="Collapsed"
+									 x:Load="False" />
+							<Border x:Name="DropDownOverlay"
+									Grid.Column="2"
+									Background="Transparent"
+									Margin="4,4,4,4"
+									Visibility="Collapsed"
+									CornerRadius="{StaticResource ComboBoxDropDownButtonBackgroundCornerRadius}"
+									Width="30"
+									HorizontalAlignment="Right"
+									x:Load="False" />
+
 							<!-- ContentPresenter -->
 							<ContentPresenter x:Name="ContentPresenter"
 											  Grid.Column="1"

diff --git a/src/samples/UWP/Uno.Themes.Samples.Shared/Content/Controls/ComboBoxSamplePage.xaml b/src/samples/UWP/Uno.Themes.Samples.Shared/Content/Controls/ComboBoxSamplePage.xaml
@@ -94,9 +94,21 @@
 								<!-- ComboBox -->
 								<smtx:XamlDisplay UniqueKey="M3_Material_ComboBoxSamplePage_Normal"
 												  Style="{StaticResource XamlDisplayBelowStyle}">
-									<ComboBox Style="{StaticResource MaterialComboBoxStyle}"
-											  PlaceholderText="Placeholder"
-											  ItemsSource="{Binding Data.Letters}" />
+									<StackPanel>
+										<ComboBox Style="{StaticResource MaterialComboBoxStyle}"
+												  PlaceholderText="Placeholder"
+												  ItemsSource="{Binding Data.Letters}" />
+
+										<!-- WIP - TEMPORARY FOR TESTING PURPOSES -->
+										<ComboBox x:Name="MyComboBox"
+												  Style="{StaticResource MaterialComboBoxStyle}"
+												  IsEditable="True">
+											<ComboBoxItem Content="Item 1" />
+											<ComboBoxItem Content="Item 2" />
+											<ComboBoxItem Content="Item 3" />
+											<ComboBoxItem Content="Item 4" />
+										</ComboBox>
+									</StackPanel>
 								</smtx:XamlDisplay>
 
 							</StackPanel>