Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Adjust combobox template for editable feature #1516

Draft
wants to merge 4 commits into
base: master
Choose a base branch
from
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
85 changes: 78 additions & 7 deletions src/library/Uno.Material/Styles/Controls/v2/ComboBox.xaml
Original file line number Diff line number Diff line change
Expand Up @@ -117,6 +117,7 @@
<Thickness x:Key="ComboBoxBorderThickness">1</Thickness>
<Thickness x:Key="ComboBoxOpenedBorderThickness">2</Thickness>
<Thickness x:Key="ComboBoxPadding">16,0</Thickness>
<Thickness x:Key="ComboBoxEditableTextPadding">0,5,38,6</Thickness>
</ResourceDictionary>

<ResourceDictionary x:Key="Light">
Expand Down Expand Up @@ -226,6 +227,7 @@
<Thickness x:Key="ComboBoxBorderThickness">1</Thickness>
<Thickness x:Key="ComboBoxOpenedBorderThickness">2</Thickness>
<Thickness x:Key="ComboBoxPadding">16,0</Thickness>
<Thickness x:Key="ComboBoxEditableTextPadding">0,5,38,6</Thickness>
</ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>

Expand Down Expand Up @@ -416,14 +418,16 @@
</Setter>
</Style>



<Style x:Key="MaterialComboBoxStyle"
TargetType="ComboBox">
<Setter Property="Foreground" Value="{ThemeResource ComboBoxForeground}" />
<Setter Property="Background" Value="{ThemeResource ComboBoxBackground}" />
<Setter Property="BorderBrush" Value="{ThemeResource ComboBoxBorderBrush}" />
<Setter Property="BorderThickness" Value="{ThemeResource ComboBoxBorderThickness}" />
<Setter Property="Padding" Value="{ThemeResource ComboBoxPadding}" />

<Setter Property="TextBoxStyle" Value="{StaticResource MaterialComboBoxTextBoxStyle}" />
Copy link
Contributor

@Xiaoy312 Xiaoy312 Jan 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

just opening a thread here for the textbox on focus padding/alignment problem: #1516 (comment)

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

At a glance, it seems that the presence of the caret is pushing the element.
Have you tried to have a fixed height on the textbox or its scrollviewer (in textbox template) and set them to align bottom?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixing the Height on the TextBox doesn't make any difference. I'm trying now to set the ScrollViewer (in the textbox template) height to 35 and its VerticalAlignment to bottom (also set scrollviewer bckgd to green). I had to remove the Padding and it looks like:

Windows - looks good

Recording.2025-01-14.172151.mp4

Skia

Recording.2025-01-14.172040.mp4

@Xiaoy312 @kazo0

<!-- Start: Body Large Typo -->
<Setter Property="FontFamily" Value="{ThemeResource BodyLargeFontFamily}" />
<Setter Property="FontWeight" Value="{ThemeResource BodyLargeFontWeight}" />
Expand Down Expand Up @@ -469,7 +473,7 @@
<VisualState.Setters>
<Setter Target="ComboBoxContent.Background" Value="{ThemeResource ComboBoxBackgroundDisabled}" />
<Setter Target="DropDownGlyph_Down.Fill" Value="{ThemeResource OnSurfaceLowBrush}" />
<Setter Target="PlaceholderElement.Foreground" Value="{ThemeResource ComboBoxPlaceHolderForegroundDisabled}" />
<Setter Target="PlaceholderTextBlock.Foreground" Value="{ThemeResource ComboBoxPlaceHolderForegroundDisabled}" />
<Setter Target="UpperPlaceholderElement.Foreground" Value="{ThemeResource ComboBoxUpperPlaceHolderForegroundDisabled}" />
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ComboBoxForegroundDisabled}" />
<Setter Target="IconPresenter.Foreground" Value="{ThemeResource ComboBoxLeadingIconForegroundDisabled}" />
Expand All @@ -482,7 +486,7 @@
<VisualState.Setters>
<Setter Target="ComboBoxContent.Background" Value="{ThemeResource ComboBoxBackgroundPointerOver}" />
<Setter Target="PopupBorder.Background" Value="{ThemeResource ComboBoxDropDownBackgroundPointerOver}" />
<Setter Target="PlaceholderElement.Foreground" Value="{ThemeResource ComboBoxPlaceHolderForegroundPointerOver}" />
<Setter Target="PlaceholderTextBlock.Foreground" Value="{ThemeResource ComboBoxPlaceHolderForegroundPointerOver}" />
<Setter Target="UpperPlaceholderElement.Foreground" Value="{ThemeResource ComboBoxUpperPlaceHolderForegroundPointerOver}" />
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ComboBoxForegroundPointerOver}" />
<Setter Target="BorderBorder.BorderBrush" Value="{ThemeResource ComboBoxBorderBrushPointerOver}" />
Expand All @@ -493,7 +497,7 @@
<VisualState.Setters>
<Setter Target="ComboBoxContent.Background" Value="{ThemeResource ComboBoxBackgroundPressed}" />
<Setter Target="PopupBorder.Background" Value="{ThemeResource ComboBoxDropDownBackgroundPressed}" />
<Setter Target="PlaceholderElement.Foreground" Value="{ThemeResource ComboBoxPlaceHolderForegroundPressed}" />
<Setter Target="PlaceholderTextBlock.Foreground" Value="{ThemeResource ComboBoxPlaceHolderForegroundPressed}" />
<Setter Target="UpperPlaceholderElement.Foreground" Value="{ThemeResource ComboBoxUpperPlaceHolderForegroundPressed}" />
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ComboBoxForegroundPressed}" />
<Setter Target="BorderBorder.BorderBrush" Value="{ThemeResource ComboBoxBorderBrushPressed}" />
Expand All @@ -509,7 +513,7 @@
<Setter Target="ComboBoxContent.Background" Value="{ThemeResource ComboBoxBackgroundFocused}" />
<Setter Target="PopupBorder.Background" Value="{ThemeResource ComboBoxDropDownBackgroundFocused}" />
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ComboBoxForegroundFocused}" />
<Setter Target="PlaceholderElement.Foreground" Value="{ThemeResource ComboBoxPlaceHolderForegroundFocused}" />
<Setter Target="PlaceholderTextBlock.Foreground" Value="{ThemeResource ComboBoxPlaceHolderForegroundFocused}" />
<Setter Target="UpperPlaceholderElement.Foreground" Value="{ThemeResource ComboBoxUpperPlaceHolderForegroundFocused}" />
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ComboBoxForegroundFocused}" />
<Setter Target="BorderBorder.BorderBrush" Value="{ThemeResource ComboBoxBorderBrushOpened}" />
Expand All @@ -522,7 +526,7 @@
<Setter Target="ComboBoxContent.Background" Value="{ThemeResource ComboBoxBackgroundFocusedPressed}" />
<Setter Target="PopupBorder.Background" Value="{ThemeResource ComboBoxDropDownBackgroundFocusedPressed}" />
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ComboBoxForegroundFocusedPressed}" />
<Setter Target="PlaceholderElement.Foreground" Value="{ThemeResource ComboBoxPlaceHolderForegroundFocusedPressed}" />
<Setter Target="PlaceholderTextBlock.Foreground" Value="{ThemeResource ComboBoxPlaceHolderForegroundFocusedPressed}" />
<Setter Target="UpperPlaceholderElement.Foreground" Value="{ThemeResource ComboBoxUpperPlaceHolderForegroundFocusedPressed}" />
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ComboBoxForegroundFocusedPressed}" />
<Setter Target="BorderBorder.BorderBrush" Value="{ThemeResource ComboBoxBorderBrushOpened}" />
Expand Down Expand Up @@ -579,6 +583,16 @@
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="EditableModeStates">
<VisualState x:Name="TextBoxFocused">
<VisualState.Setters>
<Setter Target="UpperPlaceholderElement.Visibility" Value="Visible" />
<Setter Target="PlaceholderTextBlock.Visibility" Value="Collapsed" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="TextBoxUnfocused" />
</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

<Grid x:Name="ComboBoxContent"
Expand Down Expand Up @@ -614,6 +628,25 @@
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"
PlaceholderText="{TemplateBinding PlaceholderText}"
VerticalAlignment="Center"
Style="{TemplateBinding TextBoxStyle}"
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"
Expand All @@ -622,7 +655,7 @@
RenderTransform="{Binding PlaceholderText, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource EmptyToCompositeTransformConverter}, TargetNullValue={StaticResource ContentPresenter_CompositeTransformWithoutPlaceholder}, FallbackValue={StaticResource ContentPresenter_CompositeTransformWithoutPlaceholder}}" />

<!-- PlaceholderElement -->
<TextBlock x:Name="PlaceholderElement"
<TextBlock x:Name="PlaceholderTextBlock"
Grid.Column="1"
VerticalAlignment="Center"
Visibility="{Binding SelectedItem, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource NullToVisible}, TargetNullValue=Collapsed, FallbackValue=Collapsed}"
Expand Down Expand Up @@ -720,6 +753,44 @@
</Setter>
</Style>

<Style x:Key="MaterialComboBoxTextBoxStyle"
BasedOn="{StaticResource MaterialOutlinedTextBoxStyle}"
TargetType="TextBox">
<Setter Property="Background" Value="Transparent" />
<Setter Property="Foreground" Value="{ThemeResource ComboBoxForeground}" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TextBox">
<Grid Background="{TemplateBinding Background}">
<Grid.Resources>
<Thickness x:Key="WithoutPlaceholderOffset">0,18,0,0</Thickness>
<Thickness x:Key="WithPlaceholderOffset">0,23,0,0</Thickness>


<ut:FromEmptyStringToValueConverter x:Key="HasPlaceholderToContentOffsetConverter"
NotNullOrEmptyValue="{StaticResource WithPlaceholderOffset}"
NullOrEmptyValue="{StaticResource WithoutPlaceholderOffset}" />
</Grid.Resources>

<ScrollViewer x:Name="ContentElement"
HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"
IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"
IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
IsTabStop="False"
ZoomMode="Disabled"
AutomationProperties.AccessibilityView="Raw"
Padding="{Binding PlaceholderText, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HasPlaceholderToContentOffsetConverter}, TargetNullValue={StaticResource WithoutPlaceholderOffset}, FallbackValue={StaticResource WithoutPlaceholderOffset}}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

<Style x:Key="MaterialDefaultComboBoxStyle"
TargetType="ComboBox"
BasedOn="{StaticResource MaterialComboBoxStyle}" />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,14 @@
NotEmptyOrNullValue="Visible"
EmptyOrNullValue="Collapsed" />

<ut:FromEmptyStringOrNullObjectToValueConverter x:Key="EmptyOrNullToTrueConverter"
NotEmptyOrNullValue="False"
EmptyOrNullValue="True" />

<ut:FromEmptyStringOrNullObjectToValueConverter x:Key="EmptyOrNullToFalseConverter"
NotEmptyOrNullValue="True"
EmptyOrNullValue="False" />

<ut:StringFormatConverter x:Key="StringFormatConverter" />
<ut:FirstCharacterConverter x:Key="FirstCharacterConverter" />
<ut:ToUpperConverter x:Key="ToUpperConverter"/>
Expand Down
22 changes: 11 additions & 11 deletions src/samples/Directory.Packages.props
Original file line number Diff line number Diff line change
Expand Up @@ -23,21 +23,21 @@
<PackageVersion Include="Uno.ShowMeTheXAML.MSBuild" Version="1.0.59" Condition="'$(FrameworkLineage)'=='UWP'" />
<PackageVersion Include="Uno.ShowMeTheXAML" Version="2.0.0-dev0015" Condition="'$(FrameworkLineage)'=='WinUI'" />
<PackageVersion Include="Uno.ShowMeTheXAML.MSBuild" Version="2.0.0-dev0015" Condition="'$(FrameworkLineage)'=='WinUI'" />
<PackageVersion Include="Uno.UI" Version="5.3.0-dev.906" />
<PackageVersion Include="Uno.UI.Adapter.Microsoft.Extensions.Logging" Version="5.3.0-dev.906" />
<PackageVersion Include="Uno.UI.MediaPlayer.WebAssembly" Version="5.3.0-dev.906" />
<PackageVersion Include="Uno.UI.RemoteControl" Version="5.3.0-dev.906" />
<PackageVersion Include="Uno.UI.Skia.Gtk" Version="5.3.0-dev.906" />
<PackageVersion Include="Uno.UI.WebAssembly" Version="5.3.0-dev.906" />
<PackageVersion Include="Uno.UI" Version="5.5.94" />
<PackageVersion Include="Uno.UI.Adapter.Microsoft.Extensions.Logging" Version="5.5.94" />
<PackageVersion Include="Uno.UI.MediaPlayer.WebAssembly" Version="5.5.94" />
<PackageVersion Include="Uno.UI.RemoteControl" Version="5.5.94" />
<PackageVersion Include="Uno.UI.Skia.Gtk" Version="5.5.94" />
<PackageVersion Include="Uno.UI.WebAssembly" Version="5.5.94" />
<PackageVersion Include="Uno.UniversalImageLoader" Version="1.9.36" />
<PackageVersion Include="Uno.Wasm.Bootstrap" Version="8.0.14" />
<PackageVersion Include="Uno.Wasm.Bootstrap.DevServer" Version="8.0.14" />
<PackageVersion Include="Uno.Wasm.Bootstrap.Server" Version="8.0.14" />
<PackageVersion Include="Uno.WinUI" Version="5.3.0-dev.906" />
<PackageVersion Include="Uno.WinUI.DevServer" Version="5.3.0-dev.906" />
<PackageVersion Include="Uno.WinUI.Lottie" Version="5.3.0-dev.906" />
<PackageVersion Include="Uno.WinUI.Skia.Gtk" Version="5.3.0-dev.906" />
<PackageVersion Include="Uno.WinUI.WebAssembly" Version="5.3.0-dev.906" />
<PackageVersion Include="Uno.WinUI" Version="5.5.94" />
<PackageVersion Include="Uno.WinUI.DevServer" Version="5.5.94" />
<PackageVersion Include="Uno.WinUI.Lottie" Version="5.5.94" />
<PackageVersion Include="Uno.WinUI.Skia.Gtk" Version="5.5.94" />
<PackageVersion Include="Uno.WinUI.WebAssembly" Version="5.5.94" />
<PackageVersion Include="Xamarin.AndroidX.AppCompat.AppCompatResources" Version="1.3.1.3" />
<PackageVersion Include="Xamarin.AndroidX.Lifecycle.LiveData" Version="2.3.1.3" />
<PackageVersion Include="Xamarin.Google.Android.Material" Version="1.10.0.1" />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,9 @@
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
Expand All @@ -94,9 +97,11 @@
<!-- 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}" />
</StackPanel>
</smtx:XamlDisplay>

</StackPanel>
Expand Down Expand Up @@ -160,7 +165,143 @@
</smtx:XamlDisplay>
</StackPanel>

<!-- Editable ComboBox -->

<StackPanel Margin="0,0,10,0"
Grid.Row="2">

<!-- Label -->
<TextBlock Text="Editable"
Style="{StaticResource TitleMedium}" />

<!-- ComboBox -->
<smtx:XamlDisplay UniqueKey="M3_Material_ComboBoxSamplePage_Editable"
Style="{StaticResource XamlDisplayBelowStyle}">
<ComboBox Style="{StaticResource MaterialComboBoxStyle}"
IsEditable="True">
<ComboBoxItem Content="Item 1" />
<ComboBoxItem Content="Item 2" />
<ComboBoxItem Content="Item 3" />
<ComboBoxItem Content="Item 4" />
</ComboBox>
</smtx:XamlDisplay>

</StackPanel>

<StackPanel Grid.Row="2"
Grid.Column="1">

<!-- Label -->
<TextBlock Text="Editable and Disabled"
Style="{StaticResource TitleMedium}" />

<!-- ComboBox -->
<smtx:XamlDisplay UniqueKey="M3_Material_ComboBoxSamplePage_Editable_Disabled"
Style="{StaticResource XamlDisplayBelowStyle}">
<ComboBox Style="{StaticResource MaterialComboBoxStyle}"
IsEditable="True"
IsEnabled="False">
<ComboBoxItem Content="Item 1" />
<ComboBoxItem Content="Item 2" />
<ComboBoxItem Content="Item 3" />
<ComboBoxItem Content="Item 4" />
</ComboBox>
</smtx:XamlDisplay>
</StackPanel>

<StackPanel Margin="0,0,10,0"
Grid.Row="3">

<!-- Label -->
<TextBlock Text="Editable with Placeholder"
Style="{StaticResource TitleMedium}" />

<!-- ComboBox -->
<smtx:XamlDisplay UniqueKey="M3_Material_ComboBoxSamplePage_Editable_Placeholder"
Style="{StaticResource XamlDisplayBelowStyle}">
<ComboBox Style="{StaticResource MaterialComboBoxStyle}"
PlaceholderText="Placeholder"
IsEditable="True">
<ComboBoxItem Content="Item 1" />
<ComboBoxItem Content="Item 2" />
<ComboBoxItem Content="Item 3" />
<ComboBoxItem Content="Item 4" />
</ComboBox>
</smtx:XamlDisplay>

</StackPanel>

<StackPanel Grid.Row="3"
Grid.Column="1">

<!-- Label -->
<TextBlock Text="Editable with Placeholder and Disabled"
Style="{StaticResource TitleMedium}" />

<!-- ComboBox -->
<smtx:XamlDisplay UniqueKey="M3_Material_ComboBoxSamplePage_Editable_Placeholder_Disabled"
Style="{StaticResource XamlDisplayBelowStyle}">
<ComboBox Style="{StaticResource MaterialComboBoxStyle}"
PlaceholderText="Placeholder"
IsEditable="True"
IsEnabled="False">
<ComboBoxItem Content="Item 1" />
<ComboBoxItem Content="Item 2" />
<ComboBoxItem Content="Item 3" />
<ComboBoxItem Content="Item 4" />
</ComboBox>
</smtx:XamlDisplay>
</StackPanel>

<StackPanel Margin="0,0,10,0"
Grid.Row="4">

<!-- Label -->
<TextBlock Text="Editable with Icon"
Style="{StaticResource TitleMedium}" />

<!-- ComboBox -->
<smtx:XamlDisplay UniqueKey="M3_Material_ComboBoxSamplePage_Editable_WithIcon"
Style="{StaticResource XamlDisplayBelowStyle}">
<ComboBox Style="{StaticResource MaterialComboBoxStyle}"
IsEditable="True">
<ComboBoxItem Content="Item 1" />
<ComboBoxItem Content="Item 2" />
<ComboBoxItem Content="Item 3" />
<ComboBoxItem Content="Item 4" />
<ut:ControlExtensions.Icon>
<PathIcon Data="{StaticResource Icon_Mail}" />
</ut:ControlExtensions.Icon>
</ComboBox>
</smtx:XamlDisplay>

</StackPanel>

<StackPanel Grid.Row="4"
Grid.Column="1">

<!-- Label -->
<TextBlock Text="Editable with Icon and Disabled"
Style="{StaticResource TitleMedium}" />

<!-- ComboBox -->
<smtx:XamlDisplay UniqueKey="M3_Material_ComboBoxSamplePage_Editable_WithIcon_Disabled"
Style="{StaticResource XamlDisplayBelowStyle}">
<ComboBox Style="{StaticResource MaterialComboBoxStyle}"
IsEditable="True"
IsEnabled="False">
<ComboBoxItem Content="Item 1" />
<ComboBoxItem Content="Item 2" />
<ComboBoxItem Content="Item 3" />
<ComboBoxItem Content="Item 4" />
<ut:ControlExtensions.Icon>
<PathIcon Data="{StaticResource Icon_Mail}" />
</ut:ControlExtensions.Icon>
</ComboBox>
</smtx:XamlDisplay>
</StackPanel>

<StackPanel Grid.Row="5"
Grid.ColumnSpan="2">

<!-- Label -->
Expand Down
Loading