Combobox improvements (add left or right header)

Combobox fixes when custom width/height used Sample UI panels wip (hidden for the moment)
flarive · Jul 1, 2022 · 80aef72 · 80aef72
1 parent 5374484
commit 80aef72
Show file tree

Hide file tree

Showing 16 changed files with 532 additions and 34 deletions.
diff --git a/Neumorphism.Avalonia/Styles/Assists/ComboBoxAssist.cs b/Neumorphism.Avalonia/Styles/Assists/ComboBoxAssist.cs
@@ -1,11 +1,12 @@
 using Avalonia;
 using Avalonia.Controls;
+using Avalonia.Media;
 
 namespace Neumorphism.Avalonia.Styles.Assists
 {
     public class ComboBoxAssist
     {
-        public static AvaloniaProperty<string> LabelProperty = AvaloniaProperty.RegisterAttached<ComboBox, string>("Label", typeof(ComboBox));
+        public static AvaloniaProperty<string> LabelProperty = AvaloniaProperty.RegisterAttached<ComboBox, string>("Label", typeof(ComboBoxAssist));
 
         public static void SetLabel(AvaloniaObject element, string value) => element.SetValue(LabelProperty, value);
 
@@ -14,10 +15,75 @@ public class ComboBoxAssist
 
 
 
-        public static AvaloniaProperty<bool> UseFloatingWatermarkProperty = AvaloniaProperty.RegisterAttached<ComboBox, bool>("UseFloatingWatermark", typeof(ComboBox));
+        public static AvaloniaProperty<bool> UseFloatingWatermarkProperty = AvaloniaProperty.RegisterAttached<ComboBox, bool>("UseFloatingWatermark", typeof(ComboBoxAssist));
 
         public static void SetUseFloatingWatermark(AvaloniaObject element, bool value) => element.SetValue(UseFloatingWatermarkProperty, value);
 
         public static bool GetUseFloatingWatermark(AvaloniaObject element) => (bool)element.GetValue(UseFloatingWatermarkProperty);
+
+
+
+        public static readonly AvaloniaProperty<object> InnerLeftContentProperty = AvaloniaProperty.RegisterAttached<ComboBox, object>(
+            "InnerLeftContent", typeof(ComboBoxAssist), null, true);
+
+        public static object GetInnerLeftContent(AvaloniaObject element)
+        {
+            return (object)element.GetValue(InnerLeftContentProperty);
+        }
+
+        public static void SetInnerLeftContent(AvaloniaObject element, object value)
+        {
+            element.SetValue(InnerLeftContentProperty, value);
+        }
+
+
+
+        public static AvaloniaProperty<IBrush> InnerLeftBackgroundProperty = AvaloniaProperty.RegisterAttached<ComboBox, IBrush>(
+            "InnerLeftBackground", typeof(ComboBoxAssist));
+
+        public static void SetInnerLeftBackground(AvaloniaObject element, IBrush value) => element.SetValue(InnerLeftBackgroundProperty, value);
+
+        public static IBrush GetInnerLeftBackground(AvaloniaObject element) => (IBrush)element.GetValue(InnerLeftBackgroundProperty);
+
+
+
+        public static AvaloniaProperty<Thickness> InnerLeftPaddingProperty = AvaloniaProperty.RegisterAttached<ComboBox, Thickness>(
+            "InnerLeftPadding", typeof(ComboBoxAssist));
+
+        public static void SetInnerLeftPadding(AvaloniaObject element, Thickness value) => element.SetValue(InnerLeftPaddingProperty, value);
+
+        public static Thickness GetInnerLeftPadding(AvaloniaObject element) => (Thickness)element.GetValue(InnerLeftPaddingProperty);
+
+
+
+        public static readonly AvaloniaProperty<object> InnerRightContentProperty = AvaloniaProperty.RegisterAttached<ComboBox, object>(
+           "InnerRightContent", typeof(ComboBoxAssist), null, true);
+
+        public static object GetInnerRightContent(AvaloniaObject element)
+        {
+            return (object)element.GetValue(InnerRightContentProperty);
+        }
+
+        public static void SetInnerRightContent(AvaloniaObject element, object value)
+        {
+            element.SetValue(InnerRightContentProperty, value);
+        }
+
+
+
+        public static AvaloniaProperty<IBrush> InnerRightBackgroundProperty = AvaloniaProperty.RegisterAttached<ComboBox, IBrush>(
+            "InnerRightBackground", typeof(ComboBoxAssist));
+
+        public static void SetInnerRightBackground(AvaloniaObject element, IBrush value) => element.SetValue(InnerRightBackgroundProperty, value);
+
+        public static IBrush GetInnerRightBackground(AvaloniaObject element) => (IBrush)element.GetValue(InnerRightBackgroundProperty);
+
+
+        public static AvaloniaProperty<Thickness> InnerRightPaddingProperty = AvaloniaProperty.RegisterAttached<ComboBox, Thickness>(
+            "InnerRightPadding", typeof(ComboBoxAssist));
+
+        public static void SetInnerRightPadding(AvaloniaObject element, Thickness value) => element.SetValue(InnerRightPaddingProperty, value);
+
+        public static Thickness GetInnerRightPadding(AvaloniaObject element) => (Thickness)element.GetValue(InnerRightPaddingProperty);
     }
 }
diff --git a/Neumorphism.Avalonia/Styles/ComboBox.xaml b/Neumorphism.Avalonia/Styles/ComboBox.xaml
@@ -10,11 +10,12 @@
     <converters:ControlWidthToCornerRadiusConverter x:Key="ControlWidthToCornerRadiusConverter" />
     <converters:ControlWidthToBoxShadowConverter x:Key="ControlWidthToBoxShadowConverter" />
     <converters:ComboboxHeightToFloatingWatermarkMarginConverter x:Key="ComboboxHeightToFloatingWatermarkMarginConverter" />
+	<converters:HeightToMarginConverter x:Key="HeightToMarginConverter" />
   </Styles.Resources>
 
 
-	<!--Regular (no class)-->
-	<Style Selector="ComboBox">
+	<!--Regular (no class) or Inset class-->
+	<Style Selector="ComboBox, ComboBox.Inset">
 			<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
 			<Setter Property="HorizontalAlignment" Value="Stretch"/>
 			<Setter Property="VerticalAlignment" Value="Center"/>
@@ -33,35 +34,41 @@
 			<Setter Property="FontStyle" Value="Normal"/>
 			<Setter Property="Cursor" Value="Hand"/>
 			<Setter Property="assists:ComboBoxAssist.UseFloatingWatermark" Value="False"/>
+			<Setter Property="assists:ComboBoxAssist.InnerLeftBackground" Value="#22444444"/>
+			<Setter Property="assists:ComboBoxAssist.InnerRightBackground" Value="#22444444"/>
+			<Setter Property="assists:ComboBoxAssist.InnerLeftPadding" Value="0"/>
+			<Setter Property="assists:ComboBoxAssist.InnerRightPadding" Value="0"/>
 			<Setter Property="Template">
 			<ControlTemplate>
 				<Grid HorizontalAlignment="Stretch" VerticalAlignment="Top" ClipToBounds="False">
 
-					<TextBlock Name="floatingWatermark"
-                HorizontalAlignment="Stretch"
+					<!--<TextBlock Name="floatingWatermark"
+								HorizontalAlignment="Stretch"
 								VerticalAlignment="Center"
-								Foreground="{TemplateBinding Foreground}"
+								Background="Orange"
+							   Foreground="{TemplateBinding Foreground}"
 								FontFamily="{TemplateBinding FontFamily}"
 								FontSize="{TemplateBinding FontSize}"
 								FontWeight="{TemplateBinding FontWeight}"
 								FontStyle="{TemplateBinding FontStyle}"
 								Text="{TemplateBinding PlaceholderText}"
 								Opacity="0.5"
 								IsVisible="{TemplateBinding assists:ComboBoxAssist.UseFloatingWatermark}"
-								RenderTransformOrigin="0, 0" />
+								RenderTransformOrigin="0, 0" />-->
 
 
-					<TextBlock Name="watermark"
+					<!--<TextBlock Name="watermark"
 							  HorizontalAlignment="Stretch"
 							  VerticalAlignment="Center"
 							  Foreground="{TemplateBinding Foreground}"
+							  Background="Yellow"
 							  FontFamily="{TemplateBinding FontFamily}"
 							  FontSize="{TemplateBinding FontSize}"
 							  FontWeight="{TemplateBinding FontWeight}"
 							  FontStyle="{TemplateBinding FontStyle}"
 							  Text="{TemplateBinding PlaceholderText}"
-							  Margin="15,10,80,10"
-							  Opacity="{TemplateBinding assists:ComboBoxAssist.UseFloatingWatermark, Converter={StaticResource BooleanValueToDoubleConverter}, ConverterParameter=1}" />
+							  Margin="{TemplateBinding Height, Converter={StaticResource HeightToMarginConverter}, ConverterParameter=30%|10%|100%|10%}"
+							  Opacity="{TemplateBinding assists:ComboBoxAssist.UseFloatingWatermark, Converter={StaticResource BooleanValueToDoubleConverter}, ConverterParameter=1}" />-->
 
 					<Border Name="PART_Border" Height="{TemplateBinding Height}" HorizontalAlignment="Stretch"
 							  CornerRadius="{TemplateBinding Height, Converter={StaticResource ControlWidthToCornerRadiusConverter}, ConverterParameter=0}"
@@ -70,11 +77,44 @@
 							  BorderBrush="{TemplateBinding BorderBrush}"
 							  BorderThickness="{TemplateBinding BorderThickness}">
 
-
-
-						<ToggleButton Name="PART_Toggle" Classes="NoFeedback TransparentBack"
-									  Height="{TemplateBinding Height}" Width="{TemplateBinding Width}"
-									  BorderThickness="0" Background="Transparent"
+						<Grid ColumnDefinitions="Auto, *, Auto" HorizontalAlignment="Stretch">
+
+							<TextBlock Name="floatingWatermark" Grid.Column="1"
+									HorizontalAlignment="Stretch"
+									VerticalAlignment="Center"
+								    Foreground="{TemplateBinding Foreground}"
+									FontFamily="{TemplateBinding FontFamily}"
+									FontSize="{TemplateBinding FontSize}"
+									FontWeight="{TemplateBinding FontWeight}"
+									FontStyle="{TemplateBinding FontStyle}"
+									Text="{TemplateBinding PlaceholderText}"
+									Opacity="0.5"
+									IsVisible="{TemplateBinding assists:ComboBoxAssist.UseFloatingWatermark}"
+									RenderTransformOrigin="0, 0" />
+
+							<TextBlock Name="watermark" Grid.Column="1"
+									  HorizontalAlignment="Stretch"
+									  VerticalAlignment="Center"
+									  Foreground="{TemplateBinding Foreground}"
+									  FontFamily="{TemplateBinding FontFamily}"
+									  FontSize="{TemplateBinding FontSize}"
+									  FontWeight="{TemplateBinding FontWeight}"
+									  FontStyle="{TemplateBinding FontStyle}"
+									  Text="{TemplateBinding PlaceholderText}"
+									  Margin="{TemplateBinding Height, Converter={StaticResource HeightToMarginConverter}, ConverterParameter=30%|10%|100%|10%}"
+									  Opacity="{TemplateBinding assists:ComboBoxAssist.UseFloatingWatermark, Converter={StaticResource BooleanValueToDoubleConverter}, ConverterParameter=1}" />
+
+							<!--Left container-->
+							<Border Grid.Column="0" Background="{TemplateBinding assists:ComboBoxAssist.InnerLeftBackground}" Width="{Binding ElementName=PART_InnerLeft, Path=Width}"
+						   	  CornerRadius="{Binding ElementName=PART_Border, Path=CornerRadius, Converter={StaticResource DoubleToLeftRightCornerRadiusConverter}, ConverterParameter=0}"
+							  VerticalAlignment="Stretch">
+								<ContentPresenter Name="PART_InnerLeft" Background="Transparent" Content="{TemplateBinding assists:ComboBoxAssist.InnerLeftContent}" Padding="{TemplateBinding assists:ComboBoxAssist.InnerLeftPadding}" HorizontalContentAlignment="Left" />
+							</Border>
+
+							<ToggleButton Name="PART_Toggle" Grid.Column="1" Classes="NoFeedback TransparentBack"
+									  Height="{TemplateBinding Height}" Width="{Binding ElementName=watermark, Path=Width}"
+									  BorderThickness="0" 
+								      Background="Transparent"
 									  HorizontalContentAlignment="Stretch"
 									  IsChecked="{TemplateBinding IsDropDownOpen, Mode=TwoWay}"
 									  Margin="0"
@@ -89,18 +129,22 @@
 												  BorderThickness="0" BorderBrush="Transparent"
 												  HorizontalAlignment="Left"
 												  VerticalAlignment="Center"
+												  Height="{TemplateBinding Height}"
 												  Content="{TemplateBinding SelectionBoxItem}"
 												  ContentTemplate="{TemplateBinding ItemTemplate}"
-												  Margin="{TemplateBinding Padding}" Padding="7,0,7,0"/>
+												  Margin="{TemplateBinding Height, Converter={StaticResource HeightToMarginConverter}, ConverterParameter=0%|0%|0%|0%}"
+												  Padding="{TemplateBinding Height, Converter={StaticResource HeightToMarginConverter}, ConverterParameter=35%|0%|35%|0%}"/>
 								<Border Name="splitBorder"
 										Grid.Column="1"
-										Margin="16 20 16 16"
+										Width="10" Height="10"
+										Margin="{TemplateBinding Height, Converter={StaticResource HeightToMarginConverter}, ConverterParameter=0%|0%|35%|0%}"
 										HorizontalAlignment="Right"
 										VerticalAlignment="Center"
 										BorderBrush="Transparent"
 										BorderThickness="0">
 									<Path Name="arrow"
 										  Width="8" Height="8"
+										  Margin="0,4,0,0"
 										  Stretch="Uniform"
 										  HorizontalAlignment="Right"
 										  VerticalAlignment="Center"
@@ -110,6 +154,15 @@
 							</Grid>
 
 						</ToggleButton>
+
+
+							<!--Right container-->
+							<Border Grid.Column="2" Background="{TemplateBinding assists:ComboBoxAssist.InnerRightBackground}" Width="{Binding ElementName=PART_InnerRight, Path=Width}"
+							  CornerRadius="{Binding ElementName=PART_Border, Path=CornerRadius, Converter={StaticResource DoubleToLeftRightCornerRadiusConverter}, ConverterParameter=1}"
+							  VerticalAlignment="Stretch">
+								<ContentPresenter Name="PART_InnerRight" Background="Transparent" Content="{TemplateBinding assists:ComboBoxAssist.InnerRightContent}" Padding="{TemplateBinding assists:ComboBoxAssist.InnerRightPadding}" HorizontalContentAlignment="Left" />
+							</Border>
+						</Grid>
 					</Border>
 
 					<!--Combobox items container-->
@@ -145,6 +198,16 @@
 		</Setter>
 	</Style>
 
+
+	<!--Outset class-->
+	<Style Selector="ComboBox.Outset /template/ Border#PART_Border">
+		<Setter Property="BoxShadow" Value="{TemplateBinding Height, Converter={StaticResource ControlWidthToBoxShadowConverter}, ConverterParameter=0}"/>
+	</Style>
+
+
+
+
+
 	<Style Selector="TextBlock#floatingWatermark:not(.notransitions)">
 		<Setter Property="Transitions">
 			<Transitions>

diff --git a/Neumorphism.Avalonia/Styles/ComboBoxItem.xaml b/Neumorphism.Avalonia/Styles/ComboBoxItem.xaml
@@ -1,22 +1,28 @@
 <Styles xmlns="https://github.com/avaloniaui"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+		xmlns:converters="clr-namespace:Neumorphism.Avalonia.Styles.Converters"
         xmlns:ripple="clr-namespace:Neumorphism.Avalonia.Styles.Ripple">
-
-  <Style Selector="ComboBoxItem">
-    <Setter Property="Padding" Value="16, 8" />
+
+	<Styles.Resources>
+		<converters:HeightToMarginConverter x:Key="HeightToMarginConverter" />
+	</Styles.Resources>
+
+
+	<Style Selector="ComboBoxItem">
+    <Setter Property="Padding" Value="{Binding $parent[ComboBox].Height, Converter={StaticResource HeightToMarginConverter}, ConverterParameter=50%|30%|50%|0%}" /><!--16 8-->
     <Setter Property="BorderThickness" Value="0" />
     <Setter Property="HorizontalAlignment" Value="Stretch" />
     <Setter Property="HorizontalContentAlignment" Value="Left" />
     <Setter Property="Foreground" Value="{DynamicResource MaterialDesignForeground}" />
     <Setter Property="Background" Value="Transparent" />
     <Setter Property="Opacity" Value="1" />
-    <Setter Property="Height" Value="38" />
+    <Setter Property="Height" Value="{Binding $parent[ComboBox].Height}" /> <!--38-->
     <Setter Property="Template">
       <ControlTemplate>
         <Grid>
           <Border Name="PointerOverBorder"
                   Opacity="{TemplateBinding Opacity}"
-                  Height="{TemplateBinding Height}"
+                  Height="{Binding $parent[ComboBox].Height}"
                   BorderBrush="Transparent"
                   BorderThickness="0"
                   Background="{TemplateBinding Background}" />

diff --git a/Neumorphism.Avalonia/Styles/Slider.xaml b/Neumorphism.Avalonia/Styles/Slider.xaml
@@ -105,7 +105,7 @@
 							 Height="{TemplateBinding Height, Converter={StaticResource WidthMinusValueConverter}, ConverterParameter=10%}"
 							 Placement="Left" TickFrequency="{Binding $parent[Slider].TickFrequency}"
 							 Minimum="{TemplateBinding Minimum}" Maximum="{TemplateBinding Maximum}" />
-					
+
 					<Border Name="border" Grid.Column="1" BorderBrush="{TemplateBinding BorderBrush}" Width="{TemplateBinding Width}"
 					   CornerRadius="{TemplateBinding Width, Converter={StaticResource HeightToCornerRadiusConverter}}"
 					   BoxShadow="{TemplateBinding Width, Converter={StaticResource ControlWidthToBoxShadowConverter}, ConverterParameter=1}"
@@ -293,7 +293,9 @@
 	    <Setter Property="ClipToBounds" Value="False" />
 		<Setter Property="assists:SliderAssist.ThumbForeground" Value="{DynamicResource SecondaryHueMidBrush}"/>
     </Style>
-
+
+
+	<!--Shared styles-->
     <Style Selector="Slider:disabled">
 	    <Setter Property="Foreground" Value="{DynamicResource MaterialDesignCheckBoxDisabled}" />
     </Style>

diff --git a/Neumorphism.Avalonia/Styles/TextBlock.xaml b/Neumorphism.Avalonia/Styles/TextBlock.xaml
@@ -101,4 +101,26 @@
     <Setter Property="FontWeight" Value="Medium" />
     <Setter Property="FontFamily" Value="avares://Neumorphism.Avalonia/Styles/Fonts/Roboto/Roboto-Regular.ttf#Roboto, Arial"/>
   </Style>
+
+	<Style Selector="TextBlock.PanelSubtitleSmall">
+		<Setter Property="FontSize" Value="11" />
+		<Setter Property="FontWeight" Value="Regular" />
+		<Setter Property="FontFamily" Value="avares://Neumorphism.Avalonia/Styles/Fonts/Roboto/Roboto-Regular.ttf#Roboto, Arial"/>
+		<Setter Property="Margin" Value="0,10,0,10"/>
+	</Style>
+
+	<Style Selector="TextBlock.PanelSubtitleMedium">
+		<Setter Property="FontSize" Value="14" />
+		<Setter Property="FontWeight" Value="Regular" />
+		<Setter Property="FontFamily" Value="avares://Neumorphism.Avalonia/Styles/Fonts/Roboto/Roboto-Regular.ttf#Roboto, Arial"/>
+		<Setter Property="Margin" Value="0,13,0,13"/>
+	</Style>
+
+	<Style Selector="TextBlock.PanelSubtitleLarge">
+		<Setter Property="FontSize" Value="18" />
+		<Setter Property="FontWeight" Value="Regular" />
+		<Setter Property="FontFamily" Value="avares://Neumorphism.Avalonia/Styles/Fonts/Roboto/Roboto-Regular.ttf#Roboto, Arial"/>
+		<Setter Property="Margin" Value="0,16,0,16"/>
+	</Style>
+
 </Styles>
diff --git a/Neumorphism.Demo/Neumorphism.Avalonia.Demo.csproj b/Neumorphism.Demo/Neumorphism.Avalonia.Demo.csproj
@@ -30,9 +30,21 @@
     <AvaloniaResource Include="**\*.axaml">
       <SubType>Designer</SubType>
     </AvaloniaResource>
+    <AdditionalFiles Remove="Pages\Panels\PanelLargeUIDemo.axaml" />
+    <AdditionalFiles Remove="Pages\Panels\PanelMediumUIDemo.axaml" />
+    <AdditionalFiles Remove="Pages\Panels\PanelSmallUIDemo.axaml" />
     <None Remove="Resources\Icons\app.ico" />
     <EmbeddedResource Include="Resources\Icons\app.ico" />
     <Content Include="Resources\Icons\app.ico" />
+    <Compile Update="Pages\Panels\PanelLargeUIDemo.axaml.cs">
+      <DependentUpon>%(Filename)</DependentUpon>
+    </Compile>
+    <Compile Update="Pages\Panels\PanelMediumUIDemo.axaml.cs">
+      <DependentUpon>%(Filename)</DependentUpon>
+    </Compile>
+    <Compile Update="Pages\Panels\PanelSmallUIDemo.axaml.cs">
+      <DependentUpon>PanelSmallUIDemo.axaml</DependentUpon>
+    </Compile>
     <Compile Update="Pages\SideSheetDemo.axaml.cs">
       <DependentUpon>SideSheetDemo.axaml</DependentUpon>
       <SubType>Code</SubType>