diff --git a/src/library/Uno.Material/Styles/Controls/v2/ComboBox.xaml b/src/library/Uno.Material/Styles/Controls/v2/ComboBox.xaml index a59c8407c..49929b73e 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,6 +418,8 @@ </Setter> </Style> + + <Style x:Key="MaterialComboBoxStyle" TargetType="ComboBox"> <Setter Property="Foreground" Value="{ThemeResource ComboBoxForeground}" /> @@ -423,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}" /> @@ -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}" /> @@ -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}" /> @@ -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}" /> @@ -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}" /> @@ -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}" /> @@ -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" @@ -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" @@ -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}" @@ -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}" /> 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" /> 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..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="*" /> @@ -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> @@ -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 -->