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

Jump to bottom

refactor(ComboBox): lightweight styling for combobox #1103

Merged
merged 1 commit into from
Jul 27, 2023
Merged

refactor(ComboBox): lightweight styling for combobox #1103

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
73 changes: 48 additions & 25 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 @@ -107,6 +107,21 @@
<StaticResource x:Key="ComboBoxArrowForegroundOpened" ResourceKey="PrimaryBrush" />

<StaticResource x:Key="ComboBoxUpperPlaceHolderForeground" ResourceKey="PrimaryBrush" />

<CornerRadius x:Key="ComboBoxCornerRadius">4</CornerRadius>
<x:Double x:Key="ComboBoxHeight">50</x:Double>
<x:Double x:Key="ComboBoxMinHeight">56</x:Double>
<x:Double x:Key="ComboBoxLeadingIconWidth">20</x:Double>
<x:Double x:Key="ComboBoxDownGlyphWidth">10</x:Double>
<x:Double x:Key="ComboBoxUpGlyphWidth">10</x:Double>
<x:Double x:Key="ComboBoxDownGlyphHeight">5</x:Double>
<x:Double x:Key="ComboBoxUpGlyphHeight">5</x:Double>
<Thickness x:Key="ComboBoxDownGlyphMargin">7,0</Thickness>
<Thickness x:Key="ComboBoxUpGlyphMargin">7,0</Thickness>
<Thickness x:Key="ComboBoxLeadingIconMargin">2,0,18,0</Thickness>
<Thickness x:Key="ComboBoxBorderThickness">1</Thickness>
<Thickness x:Key="ComboBoxOpenedBorderThickness">2</Thickness>
<Thickness x:Key="ComboBoxPadding">16,0</Thickness>
</ResourceDictionary>

<ResourceDictionary x:Key="Light">
Expand Down Expand Up @@ -195,20 +210,28 @@
<StaticResource x:Key="ComboBoxArrowForegroundOpened" ResourceKey="PrimaryBrush" />

<StaticResource x:Key="ComboBoxUpperPlaceHolderForeground" ResourceKey="PrimaryBrush" />

<CornerRadius x:Key="ComboBoxCornerRadius">4</CornerRadius>
<x:Double x:Key="ComboBoxHeight">50</x:Double>
<x:Double x:Key="ComboBoxMinHeight">56</x:Double>
<x:Double x:Key="ComboBoxLeadingIconWidth">20</x:Double>
<x:Double x:Key="ComboBoxDownGlyphWidth">10</x:Double>
<x:Double x:Key="ComboBoxUpGlyphWidth">10</x:Double>
<x:Double x:Key="ComboBoxDownGlyphHeight">5</x:Double>
<x:Double x:Key="ComboBoxUpGlyphHeight">5</x:Double>
<Thickness x:Key="ComboBoxDownGlyphMargin">7,0</Thickness>
<Thickness x:Key="ComboBoxUpGlyphMargin">7,0</Thickness>
<Thickness x:Key="ComboBoxLeadingIconMargin">2,0,18,0</Thickness>
<Thickness x:Key="ComboBoxBorderThickness">1</Thickness>
<Thickness x:Key="ComboBoxOpenedBorderThickness">2</Thickness>
<Thickness x:Key="ComboBoxPadding">16,0</Thickness>
</ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>

<!-- CornerRadius -->
<CornerRadius x:Key="ComboBoxCornerRadius">4</CornerRadius>

<!-- Path Data -->
<x:String x:Key="ComboBoxUpArrowPathData">M0 0L-5 -5L-10 0H0Z</x:String>
<x:String x:Key="ComboBoxDownArrowPathData">M0 0L5 5L10 0H0Z</x:String>

<Thickness x:Key="ComboBoxBorderThickness">1</Thickness>
<Thickness x:Key="ComboBoxOpenedBorderThickness">2</Thickness>
<Thickness x:Key="ComboBoxPadding">16,0</Thickness>

<!-- Style -->
<Style x:Key="MaterialComboBoxItemStyle"
TargetType="ComboBoxItem">
Expand All @@ -224,8 +247,8 @@

<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="Padding" Value="16,0" />
<Setter Property="Height" Value="50" />
<Setter Property="Padding" Value="{ThemeResource ComboBoxPadding}" />
<Setter Property="Height" Value="{ThemeResource ComboBoxHeight}" />

<Setter Property="Template">
<Setter.Value>
Expand Down Expand Up @@ -384,8 +407,8 @@
<Setter Property="Foreground" Value="{ThemeResource ComboBoxForeground}" />
<Setter Property="Background" Value="{ThemeResource ComboBoxBackground}" />
<Setter Property="BorderBrush" Value="{ThemeResource ComboBoxBorderBrush}" />
<Setter Property="BorderThickness" Value="{StaticResource ComboBoxBorderThickness}" />
<Setter Property="Padding" Value="{StaticResource ComboBoxPadding}" />
<Setter Property="BorderThickness" Value="{ThemeResource ComboBoxBorderThickness}" />
<Setter Property="Padding" Value="{ThemeResource ComboBoxPadding}" />

<!-- Start: Body Large Typo -->
<Setter Property="FontFamily" Value="{ThemeResource MaterialMediumFontFamily}" />
Expand All @@ -394,7 +417,7 @@
<Setter Property="CharacterSpacing" Value="{ThemeResource BodyLargeCharacterSpacing}" />
<!-- End: Body Large Typo -->

<Setter Property="MinHeight" Value="56" />
<Setter Property="MinHeight" Value="{ThemeResource ComboBoxMinHeight}" />
<Setter Property="TabNavigation" Value="Once" />
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
Expand Down Expand Up @@ -428,7 +451,7 @@
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{StaticResource ComboBoxCornerRadius}">
CornerRadius="{ThemeResource ComboBoxCornerRadius}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
Expand Down Expand Up @@ -513,7 +536,7 @@
<VisualState x:Name="Opened">
<VisualState.Setters>
<Setter Target="RootGrid.BorderBrush" Value="{ThemeResource ComboBoxBorderBrushOpened}" />
<Setter Target="RootGrid.BorderThickness" Value="{StaticResource ComboBoxOpenedBorderThickness}" />
<Setter Target="RootGrid.BorderThickness" Value="{ThemeResource ComboBoxOpenedBorderThickness}" />
<Setter Target="DropDownGlyph_Up.Fill" Value="{ThemeResource ComboBoxArrowForegroundOpened}" />
<Setter Target="DropDownGlyph_Down.Visibility" Value="Collapsed" />
<Setter Target="DropDownGlyph_Up.Visibility" Value="Visible" />
Expand All @@ -533,7 +556,7 @@
<VisualState x:Name="Closed">
<VisualState.Setters>
<Setter Target="RootGrid.BorderBrush" Value="{ThemeResource ComboBoxBorderBrush}" />
<Setter Target="RootGrid.BorderThickness" Value="{StaticResource ComboBoxBorderThickness}" />
<Setter Target="RootGrid.BorderThickness" Value="{ThemeResource ComboBoxBorderThickness}" />
<Setter Target="DropDownGlyph_Down.Visibility" Value="Visible" />
<Setter Target="DropDownGlyph_Up.Visibility" Value="Collapsed" />
</VisualState.Setters>
Expand Down Expand Up @@ -574,8 +597,8 @@

<!-- Leading Icon -->
<ContentPresenter x:Name="IconPresenter"
Width="20"
Margin="2,0,18,0"
Width="{ThemeResource ComboBoxLeadingIconWidth}"
Margin="{ThemeResource ComboBoxLeadingIconMargin}"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Foreground="{ThemeResource ComboBoxLeadingIconForeground}"
Expand Down Expand Up @@ -622,9 +645,9 @@
<!-- Down -->
<Path x:Name="DropDownGlyph_Down"
Grid.Column="2"
Width="10"
Height="5"
Margin="7,0"
Width="{ThemeResource ComboBoxDownGlyphWidth}"
Height="{ThemeResource ComboBoxDownGlyphHeight}"
Margin="{ThemeResource ComboBoxDownGlyphMargin}"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Data="{StaticResource ComboBoxDownArrowPathData}"
Expand All @@ -634,9 +657,9 @@
<!-- Up -->
<Path x:Name="DropDownGlyph_Up"
Grid.Column="2"
Width="10"
Height="5"
Margin="7,0"
Width="{ThemeResource ComboBoxUpGlyphWidth}"
Height="{ThemeResource ComboBoxUpGlyphHeight}"
Margin="{ThemeResource ComboBoxUpGlyphMargin}"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Data="{StaticResource ComboBoxUpArrowPathData}"
Expand All @@ -648,15 +671,15 @@
<!-- Popup -->
<Popup x:Name="Popup">
<Border x:Name="PopupBorder"
CornerRadius="{StaticResource ComboBoxCornerRadius}"
CornerRadius="{ThemeResource ComboBoxCornerRadius}"
Background="{ThemeResource ComboBoxDropDownBackground}">

<!-- Workaround for Issue #213 where android PopupBorder doesn't get redrawn properly, adds Background, CornerRadius and Border to ScrollViewer -->
<ScrollViewer x:Name="ScrollViewer"
MinWidth="{ThemeResource ComboBoxPopupThemeMinWidth}"
AutomationProperties.AccessibilityView="Raw"
BringIntoViewOnFocusChange="{TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}"
CornerRadius="{StaticResource ComboBoxCornerRadius}"
CornerRadius="{ThemeResource ComboBoxCornerRadius}"
HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
Expand Down
Loading