From 88afc2a5e0b167e727d7720e17aa0e82b7171954 Mon Sep 17 00:00:00 2001 From: eriklimakc <erik.lima@knowcode.app> Date: Wed, 8 Jan 2025 17:14:51 +0000 Subject: [PATCH 1/4] fix: Adjust combobox template for editable feature --- .../Styles/Controls/v2/ComboBox.xaml | 86 +++++++++++++++++++ .../Content/Controls/ComboBoxSamplePage.xaml | 18 +++- 2 files changed, 101 insertions(+), 3 deletions(-) diff --git a/src/library/Uno.Material/Styles/Controls/v2/ComboBox.xaml b/src/library/Uno.Material/Styles/Controls/v2/ComboBox.xaml index a59c8407c..85844e113 100644 --- 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 index e0c26515f..7e7b073fc 100644 --- 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> From aa31aa69741390d060bef698e4cf50d6b3397a8f Mon Sep 17 00:00:00 2001 From: eriklimakc <erik.lima@knowcode.app> Date: Thu, 9 Jan 2025 17:28:03 +0000 Subject: [PATCH 2/4] chore: Adding cases --- .../Styles/Controls/v2/ComboBox.xaml | 25 ++- .../Content/Controls/ComboBoxSamplePage.xaml | 149 ++++++++++++++++-- 2 files changed, 162 insertions(+), 12 deletions(-) diff --git a/src/library/Uno.Material/Styles/Controls/v2/ComboBox.xaml b/src/library/Uno.Material/Styles/Controls/v2/ComboBox.xaml index 85844e113..81f6f7f03 100644 --- a/src/library/Uno.Material/Styles/Controls/v2/ComboBox.xaml +++ b/src/library/Uno.Material/Styles/Controls/v2/ComboBox.xaml @@ -416,7 +416,7 @@ </Setter> </Style> - <Style x:Key="MaterialTextBoxEditableComboBoxStyle" + <Style x:Key="MaterialComboBoxEditableTextBoxStyle" TargetType="TextBox"> <Setter Property="Background" Value="Transparent" /> <Setter Property="Foreground" Value="{ThemeResource ComboBoxForeground}" /> @@ -647,6 +647,27 @@ </Storyboard> </VisualState> </VisualStateGroup> + + <!-- TextStates --> + <VisualStateGroup x:Name="TextStates"> + + <VisualState x:Name="TextNotEmpty"> + <VisualState.Setters> + <Setter Target="PlaceholderElement.Visibility" Value="Collapsed" /> + <Setter Target="UpperPlaceholderElement.Visibility" Value="Collapsed" /> + </VisualState.Setters> + <VisualState.StateTriggers> + <StateTrigger IsActive="{Binding Text, Converter={StaticResource EmptyToFalseConverter}, RelativeSource={RelativeSource TemplatedParent}}" /> + </VisualState.StateTriggers> + </VisualState> + + <VisualState x:Name="TextEmpty"> + <VisualState.StateTriggers> + <StateTrigger IsActive="{Binding Text, Converter={StaticResource EmptyToTrueConverter}, RelativeSource={RelativeSource TemplatedParent}}" /> + </VisualState.StateTriggers> + </VisualState> + </VisualStateGroup> + </VisualStateManager.VisualStateGroups> <Grid x:Name="ComboBoxContent" @@ -685,7 +706,7 @@ <!-- IsEditable --> <TextBox x:Name="EditableText" Grid.Column="1" - Style="{StaticResource MaterialTextBoxEditableComboBoxStyle}" + Style="{StaticResource MaterialComboBoxEditableTextBoxStyle}" Margin="0,0,0,0" Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Text, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Visibility="Collapsed" 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 index 7e7b073fc..ff1255ec3 100644 --- a/src/samples/UWP/Uno.Themes.Samples.Shared/Content/Controls/ComboBoxSamplePage.xaml +++ b/src/samples/UWP/Uno.Themes.Samples.Shared/Content/Controls/ComboBoxSamplePage.xaml @@ -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="*" /> @@ -98,16 +101,6 @@ <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> @@ -172,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 --> From f88856de79d981a781f26bca4c1cad0eb3b0d409 Mon Sep 17 00:00:00 2001 From: Steve Bilogan <steve.bilogan@gmail.com> Date: Mon, 13 Jan 2025 07:47:34 -0500 Subject: [PATCH 3/4] chore: wip --- .../Styles/Controls/v2/ComboBox.xaml | 164 +++++++++--------- .../Applications/Common/Converters.xaml | 8 + src/samples/Directory.Packages.props | 22 +-- 3 files changed, 101 insertions(+), 93 deletions(-) diff --git a/src/library/Uno.Material/Styles/Controls/v2/ComboBox.xaml b/src/library/Uno.Material/Styles/Controls/v2/ComboBox.xaml index 81f6f7f03..fae06accf 100644 --- a/src/library/Uno.Material/Styles/Controls/v2/ComboBox.xaml +++ b/src/library/Uno.Material/Styles/Controls/v2/ComboBox.xaml @@ -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"> @@ -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> @@ -416,73 +418,7 @@ </Setter> </Style> - <Style x:Key="MaterialComboBoxEditableTextBoxStyle" - 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"> @@ -491,7 +427,7 @@ <Setter Property="BorderBrush" Value="{ThemeResource ComboBoxBorderBrush}" /> <Setter Property="BorderThickness" Value="{ThemeResource ComboBoxBorderThickness}" /> <Setter Property="Padding" Value="{ThemeResource ComboBoxPadding}" /> - + <Setter Property="TextBoxStyle" Value="{StaticResource MaterialComboBoxTextBoxStyle}" /> <!-- Start: Body Large Typo --> <Setter Property="FontFamily" Value="{ThemeResource BodyLargeFontFamily}" /> <Setter Property="FontWeight" Value="{ThemeResource BodyLargeFontWeight}" /> @@ -537,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}" /> @@ -550,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}" /> @@ -561,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}" /> @@ -577,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}" /> @@ -590,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}" /> @@ -647,23 +583,30 @@ </Storyboard> </VisualState> </VisualStateGroup> - - <!-- TextStates --> + <VisualStateGroup x:Name="EditableModeStates"> + <VisualState x:Name="TextBoxFocused"> + <!--<VisualState.Setters> + <Setter Target="UpperPlaceholderElement.Opacity" Value="0" /> + <Setter Target="PlaceholderTextBlock.Opacity" Value="0" /> + </VisualState.Setters>--> + </VisualState> + <VisualState x:Name="TextBoxUnfocused" /> + </VisualStateGroup> <VisualStateGroup x:Name="TextStates"> - <VisualState x:Name="TextNotEmpty"> <VisualState.Setters> - <Setter Target="PlaceholderElement.Visibility" Value="Collapsed" /> - <Setter Target="UpperPlaceholderElement.Visibility" Value="Collapsed" /> - </VisualState.Setters> +\ </VisualState.Setters> <VisualState.StateTriggers> <StateTrigger IsActive="{Binding Text, Converter={StaticResource EmptyToFalseConverter}, RelativeSource={RelativeSource TemplatedParent}}" /> + <StateTrigger IsActive="{Binding SelectedItem, Converter={StaticResource EmptyOrNullToFalseConverter}, RelativeSource={RelativeSource TemplatedParent}}" /> </VisualState.StateTriggers> </VisualState> - <VisualState x:Name="TextEmpty"> + <VisualState.Setters> +\ </VisualState.Setters> <VisualState.StateTriggers> <StateTrigger IsActive="{Binding Text, Converter={StaticResource EmptyToTrueConverter}, RelativeSource={RelativeSource TemplatedParent}}" /> + <StateTrigger IsActive="{Binding SelectedItem, Converter={StaticResource EmptyOrNullToTrueConverter}, RelativeSource={RelativeSource TemplatedParent}}" /> </VisualState.StateTriggers> </VisualState> </VisualStateGroup> @@ -706,8 +649,10 @@ <!-- IsEditable --> <TextBox x:Name="EditableText" Grid.Column="1" - Style="{StaticResource MaterialComboBoxEditableTextBoxStyle}" - Margin="0,0,0,0" + PlaceholderText="{TemplateBinding PlaceholderText}" + VerticalAlignment="Center" + Padding="{ThemeResource ComboBoxEditableTextPadding}" + Style="{TemplateBinding TextBoxStyle}" Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Text, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Visibility="Collapsed" x:Load="False" /> @@ -729,7 +674,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}" @@ -827,6 +772,61 @@ </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="Red"> + <Grid.Resources> + <CompositeTransform x:Key="WithPlaceholderVerticalOffset" + TranslateY="{Binding Text, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource TextToContentOffsetConverter}, TargetNullValue=0, FallbackValue=0}" /> + + <CompositeTransform x:Key="WithoutPlaceholderVerticalOffset" + TranslateY="0" /> + + <ut:FromEmptyStringToValueConverter x:Key="TextToContentOffsetConverter" + NotNullOrEmptyValue="5" + NullOrEmptyValue="0" /> + + <ut:FromEmptyStringToValueConverter x:Key="HasPlaceholderToContentOffsetConverter" + NotNullOrEmptyValue="{StaticResource WithPlaceholderVerticalOffset}" + NullOrEmptyValue="{StaticResource WithoutPlaceholderVerticalOffset}" /> + </Grid.Resources> + + <ScrollViewer x:Name="ContentElement" + Padding="{TemplateBinding Padding}" + VerticalAlignment="Center" + 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" + RenderTransform="{Binding PlaceholderText, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HasPlaceholderToContentOffsetConverter}, TargetNullValue={StaticResource WithoutPlaceholderVerticalOffset}, FallbackValue={StaticResource WithoutPlaceholderVerticalOffset}}" /> + <TextBlock x:Name="PlaceholderTextContentPresenter" + Foreground="{TemplateBinding PlaceholderForeground}" + Margin="{TemplateBinding BorderThickness}" + Padding="{TemplateBinding Padding}" + Text="{TemplateBinding PlaceholderText}" + TextAlignment="{TemplateBinding TextAlignment}" + TextWrapping="{TemplateBinding TextWrapping}" + VerticalAlignment="Center" + IsHitTestVisible="False" /> + </Grid> + </ControlTemplate> + </Setter.Value> + </Setter> + </Style> + <Style x:Key="MaterialDefaultComboBoxStyle" TargetType="ComboBox" BasedOn="{StaticResource MaterialComboBoxStyle}" /> diff --git a/src/library/Uno.Themes/Styles/Applications/Common/Converters.xaml b/src/library/Uno.Themes/Styles/Applications/Common/Converters.xaml index 28d9cb9ca..a732ee033 100644 --- a/src/library/Uno.Themes/Styles/Applications/Common/Converters.xaml +++ b/src/library/Uno.Themes/Styles/Applications/Common/Converters.xaml @@ -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"/> diff --git a/src/samples/Directory.Packages.props b/src/samples/Directory.Packages.props index 590fcdef6..a9a169d74 100644 --- a/src/samples/Directory.Packages.props +++ b/src/samples/Directory.Packages.props @@ -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" /> From 25beca208dece4f19e0b9dfd099deb8aa63e7ff9 Mon Sep 17 00:00:00 2001 From: Steve Bilogan <steve.bilogan@gmail.com> Date: Mon, 13 Jan 2025 12:52:44 -0500 Subject: [PATCH 4/4] chore: wip --- .../Styles/Controls/v2/ComboBox.xaml | 56 ++++--------------- 1 file changed, 10 insertions(+), 46 deletions(-) diff --git a/src/library/Uno.Material/Styles/Controls/v2/ComboBox.xaml b/src/library/Uno.Material/Styles/Controls/v2/ComboBox.xaml index fae06accf..49929b73e 100644 --- a/src/library/Uno.Material/Styles/Controls/v2/ComboBox.xaml +++ b/src/library/Uno.Material/Styles/Controls/v2/ComboBox.xaml @@ -585,30 +585,12 @@ </VisualStateGroup> <VisualStateGroup x:Name="EditableModeStates"> <VisualState x:Name="TextBoxFocused"> - <!--<VisualState.Setters> - <Setter Target="UpperPlaceholderElement.Opacity" Value="0" /> - <Setter Target="PlaceholderTextBlock.Opacity" Value="0" /> - </VisualState.Setters>--> - </VisualState> - <VisualState x:Name="TextBoxUnfocused" /> - </VisualStateGroup> - <VisualStateGroup x:Name="TextStates"> - <VisualState x:Name="TextNotEmpty"> - <VisualState.Setters> -\ </VisualState.Setters> - <VisualState.StateTriggers> - <StateTrigger IsActive="{Binding Text, Converter={StaticResource EmptyToFalseConverter}, RelativeSource={RelativeSource TemplatedParent}}" /> - <StateTrigger IsActive="{Binding SelectedItem, Converter={StaticResource EmptyOrNullToFalseConverter}, RelativeSource={RelativeSource TemplatedParent}}" /> - </VisualState.StateTriggers> - </VisualState> - <VisualState x:Name="TextEmpty"> <VisualState.Setters> -\ </VisualState.Setters> - <VisualState.StateTriggers> - <StateTrigger IsActive="{Binding Text, Converter={StaticResource EmptyToTrueConverter}, RelativeSource={RelativeSource TemplatedParent}}" /> - <StateTrigger IsActive="{Binding SelectedItem, Converter={StaticResource EmptyOrNullToTrueConverter}, RelativeSource={RelativeSource TemplatedParent}}" /> - </VisualState.StateTriggers> + <Setter Target="UpperPlaceholderElement.Visibility" Value="Visible" /> + <Setter Target="PlaceholderTextBlock.Visibility" Value="Collapsed" /> + </VisualState.Setters> </VisualState> + <VisualState x:Name="TextBoxUnfocused" /> </VisualStateGroup> </VisualStateManager.VisualStateGroups> @@ -651,7 +633,6 @@ Grid.Column="1" PlaceholderText="{TemplateBinding PlaceholderText}" VerticalAlignment="Center" - Padding="{ThemeResource ComboBoxEditableTextPadding}" Style="{TemplateBinding TextBoxStyle}" Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Text, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Visibility="Collapsed" @@ -781,26 +762,18 @@ <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="TextBox"> - <Grid Background="Red"> + <Grid Background="{TemplateBinding Background}"> <Grid.Resources> - <CompositeTransform x:Key="WithPlaceholderVerticalOffset" - TranslateY="{Binding Text, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource TextToContentOffsetConverter}, TargetNullValue=0, FallbackValue=0}" /> - - <CompositeTransform x:Key="WithoutPlaceholderVerticalOffset" - TranslateY="0" /> + <Thickness x:Key="WithoutPlaceholderOffset">0,18,0,0</Thickness> + <Thickness x:Key="WithPlaceholderOffset">0,23,0,0</Thickness> - <ut:FromEmptyStringToValueConverter x:Key="TextToContentOffsetConverter" - NotNullOrEmptyValue="5" - NullOrEmptyValue="0" /> <ut:FromEmptyStringToValueConverter x:Key="HasPlaceholderToContentOffsetConverter" - NotNullOrEmptyValue="{StaticResource WithPlaceholderVerticalOffset}" - NullOrEmptyValue="{StaticResource WithoutPlaceholderVerticalOffset}" /> + NotNullOrEmptyValue="{StaticResource WithPlaceholderOffset}" + NullOrEmptyValue="{StaticResource WithoutPlaceholderOffset}" /> </Grid.Resources> <ScrollViewer x:Name="ContentElement" - Padding="{TemplateBinding Padding}" - VerticalAlignment="Center" HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" @@ -811,16 +784,7 @@ IsTabStop="False" ZoomMode="Disabled" AutomationProperties.AccessibilityView="Raw" - RenderTransform="{Binding PlaceholderText, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HasPlaceholderToContentOffsetConverter}, TargetNullValue={StaticResource WithoutPlaceholderVerticalOffset}, FallbackValue={StaticResource WithoutPlaceholderVerticalOffset}}" /> - <TextBlock x:Name="PlaceholderTextContentPresenter" - Foreground="{TemplateBinding PlaceholderForeground}" - Margin="{TemplateBinding BorderThickness}" - Padding="{TemplateBinding Padding}" - Text="{TemplateBinding PlaceholderText}" - TextAlignment="{TemplateBinding TextAlignment}" - TextWrapping="{TemplateBinding TextWrapping}" - VerticalAlignment="Center" - IsHitTestVisible="False" /> + Padding="{Binding PlaceholderText, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HasPlaceholderToContentOffsetConverter}, TargetNullValue={StaticResource WithoutPlaceholderOffset}, FallbackValue={StaticResource WithoutPlaceholderOffset}}" /> </Grid> </ControlTemplate> </Setter.Value>