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.

Sign up for GitHub

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
+241 −21
Draft

fix: Adjust combobox template for editable feature #1516

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
88afc2a
fix: Adjust combobox template for editable feature
eriklimakc Jan 8, 2025
aa31aa6
chore: Adding cases
eriklimakc Jan 9, 2025
f88856d
chore: wip
kazo0 Jan 13, 2025
25beca2
chore: wip
kazo0 Jan 13, 2025
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
86 changes: 86 additions & 0 deletions src/library/Uno.Material/Styles/Controls/v2/ComboBox.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -416,6 +416,74 @@
</Setter>
</Style>

<Style x:Key="MaterialTextBoxEditableComboBoxStyle"
eriklimakc marked this conversation as resolved.
Show resolved Hide resolved
TargetType="TextBox">
Copy link
Collaborator

Choose a reason for hiding this comment

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

You could probably use a BasedOn to the material textbox style and avoid needing to set things like the fontsize/weights/etc.

<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}" />
Expand Down Expand Up @@ -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"
Expand Down
18 changes: 15 additions & 3 deletions src/samples/UWP/Uno.Themes.Samples.Shared/Content/Controls/ComboBoxSamplePage.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Loading