Skip to content

Fixed ComboBox style and template #10818

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.

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

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

dipeshmsft
Copy link
Member

@dipeshmsft dipeshmsft commented Apr 28, 2025

Fixes #10470 , #10656

Description

In this PR I have restyled the ComboBox style and template to make it more similar to WinUI's style, however the styles are slightly different to make it easier in WPF. Here are the list of few major changes in the PR :

  1. Split the control template for ComboBox in two parts : one for normal ComboBox and other for EditableComboBox.
  2. Fixed the layout in each of the ComboBox template and matched the height and other parameters to WinUI.
  3. Added missing control template triggers to get the correct behavior for different states of controls.
  4. Added the correct TextBox style Editable ComboBox and fixed the dropdown button styling.
  5. Added the correct resources for ComboBox styles.

Bug Fixes covered in this PR :

  • Fixes the chevron icon positioning when ComboBox has custom height.
  • Chevron button highlight in PointerOver state in Editable combo box mode.
  • Fixes the default height of ComboBox control to 32 px.
  • Fixes margins and padding for different sub components of ComboBox.
  • Fixes the text selection brush color in ComboBox.
  • Fixes triggers for different states of ComboBox.
  • Fixes the behavior of ComboBox when it is pressed ( for editable ComboBox )

This is not an exhaustive list.

Customer Impact

Correct style for developers.

Regression

No.

Testing

Local app testing.

Risk

Minimal.

Microsoft Reviewers: Open in CodeFlow

@Copilot Copilot AI review requested due to automatic review settings April 28, 2025 16:48
@dipeshmsft dipeshmsft requested review from a team as code owners April 28, 2025 16:48
Copy link
Contributor

@Copilot Copilot AI left a comment

Choose a reason for hiding this comment

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

Copilot reviewed 1 out of 8 changed files in this pull request and generated no comments.

Files not reviewed (7)
  • src/Microsoft.DotNet.Wpf/src/Themes/PresentationFramework.Fluent/Resources/Theme/Dark.xaml: Language not supported
  • src/Microsoft.DotNet.Wpf/src/Themes/PresentationFramework.Fluent/Resources/Theme/HC.xaml: Language not supported
  • src/Microsoft.DotNet.Wpf/src/Themes/PresentationFramework.Fluent/Resources/Theme/Light.xaml: Language not supported
  • src/Microsoft.DotNet.Wpf/src/Themes/PresentationFramework.Fluent/Resources/Variables.xaml: Language not supported
  • src/Microsoft.DotNet.Wpf/src/Themes/PresentationFramework.Fluent/Themes/Fluent.Dark.xaml: Language not supported
  • src/Microsoft.DotNet.Wpf/src/Themes/PresentationFramework.Fluent/Themes/Fluent.HC.xaml: Language not supported
  • src/Microsoft.DotNet.Wpf/src/Themes/PresentationFramework.Fluent/Themes/Fluent.Light.xaml: Language not supported

@dipeshmsft dipeshmsft added this to the 10.0.0 milestone Apr 28, 2025
@dotnet-policy-service dotnet-policy-service bot added the PR metadata: Label to tag PRs, to facilitate with triage label Apr 28, 2025
Copy link

codecov bot commented Apr 28, 2025

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 13.59071%. Comparing base (ee926df) to head (5e90215).

Additional details and impacted files
@@                 Coverage Diff                 @@
##                main      #10818         +/-   ##
===================================================
- Coverage   13.72443%   13.59071%   -0.13373%     
===================================================
  Files           3316        3316                 
  Lines         664822      664822                 
  Branches       74651       74651                 
===================================================
- Hits           91243       90354        -889     
- Misses        570879      571870        +991     
+ Partials        2700        2598        -102     
Flag Coverage Δ
Debug 13.59071% <ø> (-0.13373%) ⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.

@@ -43,7 +43,7 @@
<Thickness x:Key="TimePickerHostPadding">0,1,0,2</Thickness>
<Thickness x:Key="DatePickerHostPadding">0,1,0,2</Thickness>
<Thickness x:Key="DatePickerHostMonthPadding">9,0,0,1</Thickness>
<Thickness x:Key="ComboBoxEditableTextPadding">10,0,30,0</Thickness>
<!-- <Thickness x:Key="ComboBoxEditableTextPadding">10,0,30,0</Thickness> -->

Choose a reason for hiding this comment

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

Why has it been commented ? Why not remove this ?

Copy link
Member Author

Choose a reason for hiding this comment

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

No reason at all. Will remove this.

</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<!-- Disabling this trigger as this will be handled by the ComboBox style. -->

Choose a reason for hiding this comment

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

How is this trigger disabled ?

Copy link
Member Author

Choose a reason for hiding this comment

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

I will update that, I meant to write, "disabling this setter"

<DoubleAnimation
Storyboard.TargetName="DropDownBorder"
Storyboard.TargetProperty="(Border.RenderTransform).(TranslateTransform.Y)"
From="-90"

Choose a reason for hiding this comment

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

May be good to have figma links / recordings of the animations to better understand this

Copy link
Member Author

Choose a reason for hiding this comment

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

I don't have any such source. Moreover, the Fluent 2 Design Figma style that is available publicly only mentions the category of animations based on type and timing but they don't mention which type of animation is to be used where.

@godlytalias, if you can point me to any such links it would be a great help.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
PR metadata: Label to tag PRs, to facilitate with triage Win 11 Theming
Projects
Status: No status
Development

Successfully merging this pull request may close these issues.

Fluent2 Editable ComboBox Issues
3 participants