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

Fix: Fixed ComboBox position shift #14991

Closed
wants to merge 6 commits into from
Closed

Fix: Fixed ComboBox position shift #14991

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
f067c94
Fix: Fixed ComboBox position shift
TheChilledBuffalo Mar 19, 2024
edc3a83
Remove unnecessary line
TheChilledBuffalo Mar 19, 2024
e8db7d8
Change ResourceDictionary name to a better one
TheChilledBuffalo Mar 19, 2024
54f9f9a
Merge branch 'main' into combo-box-fix
TheChilledBuffalo Mar 20, 2024
75454a4
Use default combobox style
TheChilledBuffalo Mar 20, 2024
9a770f7
Merge branch 'main' into combo-box-fix
TheChilledBuffalo Mar 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
11 changes: 11 additions & 0 deletions src/Files.App/ResourceDictionaries/ComboBoxStyle.xaml
View file
Open in desktop
@@ -0,0 +1,11 @@
<!-- Copyright (c) 2024 Files Community. Licensed under the MIT License. See the LICENSE. -->
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

<Style
x:Key="FixedWidthComboBoxStyle"
BasedOn="{StaticResource DefaultComboBoxStyle}"
TargetType="ComboBox">
<Setter Property="MinWidth" Value="240" />
Copy link
Member

Choose a reason for hiding this comment

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

What is this based on? I don’t like this kind of hard coding.

Copy link
Author

Choose a reason for hiding this comment

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

I tried to dynamically set a width depending on the width of the largest ComboBoxItem but I couldn't. In the end I settled with 240, which seemed reasonable during my testing.

Copy link
Member

Choose a reason for hiding this comment

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

240 is a bit large, I would aim for 100.

Copy link
Member

Choose a reason for hiding this comment

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

Can't we make a dynamic extension to measure the largest item size and set that width as min width as other context menus do?

Copy link
Member

Choose a reason for hiding this comment

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

If not, 100 sounds good to me

Copy link
Member

@0x5bfa 0x5bfa Mar 24, 2024 •
edited

Choose a reason for hiding this comment

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

Ofc you can work on it if you want because I do have other tasks in Files.
Are you gonna work on it with Yair's approval?

Copy link
Author

Choose a reason for hiding this comment

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

I think I will leave this to you. I'm still only getting familiar with the codebase and the current solution seems too complex for me atm.

Copy link
Member

@0x5bfa 0x5bfa Mar 24, 2024 •
edited

Choose a reason for hiding this comment

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

What do you think? @yaira2
I've made a branch and added an extension for that though I don't know if it works yet.

I'll need to add a dependency property inside of DependencyObject-derived class(the extension class) and add extensions:ComboBoxExtensions.IsKeepWidthEnabled="True".

This will be a similar implementation to alternative row color extensions for ListView comes from WCT 7.x because that extension is also required to be notified of collection change. I assume that the event will be unhooked on unloaded and memory leak won't happen.

Copy link
Member

@0x5bfa 0x5bfa Mar 25, 2024 •
edited

Choose a reason for hiding this comment

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

@yaira2 here’s the implementation. That easy but seems not working when loaded because ActualWidth is 0 then. There must be a way to fix tho.

main...0x5bfa:5bfa/Feature-KeepComboBoxWidth

Copy link
Member

Choose a reason for hiding this comment

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

That looks like a neat solution, I think we should move forward with it if that last issue is resolved.

</Style>

</ResourceDictionary>
7 changes: 5 additions & 2 deletions src/Files.App/Views/Settings/AppearancePage.xaml
View file
Open in desktop
Expand Up @@ -18,6 +18,7 @@
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/ResourceDictionaries/RightAlignedToggleSwitchStyle.xaml" />
<ResourceDictionary Source="/ResourceDictionaries/ComboBoxStyle.xaml" />
</ResourceDictionary.MergedDictionaries>

<wctconverters:BoolNegationConverter x:Key="BoolNegationConverter" />
Expand Down Expand Up @@ -112,7 +113,8 @@
x:Name="ThemeChooser"
AutomationProperties.Name="{helpers:ResourceString Name=SettingsAppearanceTheme}"
ItemsSource="{x:Bind ViewModel.Themes, Mode=OneWay}"
SelectedIndex="{x:Bind ViewModel.SelectedThemeIndex, Mode=TwoWay}" />
SelectedIndex="{x:Bind ViewModel.SelectedThemeIndex, Mode=TwoWay}"
Style="{StaticResource FixedWidthComboBoxStyle}" />
</local:SettingsBlockControl>

<!-- Backdrop Material -->
Expand All @@ -123,7 +125,8 @@
<ComboBox
AutomationProperties.Name="{helpers:ResourceString Name=BackdropMaterial}"
ItemsSource="{x:Bind ViewModel.BackdropMaterialTypes.Values}"
SelectedItem="{x:Bind ViewModel.SelectedBackdropMaterial, Mode=TwoWay}" />
SelectedItem="{x:Bind ViewModel.SelectedBackdropMaterial, Mode=TwoWay}"
Style="{StaticResource FixedWidthComboBoxStyle}" />
</local:SettingsBlockControl>

<!-- App Background -->
Expand Down
12 changes: 10 additions & 2 deletions src/Files.App/Views/Settings/FoldersPage.xaml
View file
Open in desktop
Expand Up @@ -11,7 +11,12 @@
mc:Ignorable="d">

<Page.Resources>
<ResourceDictionary Source="/ResourceDictionaries/RightAlignedToggleSwitchStyle.xaml" />
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/ResourceDictionaries/RightAlignedToggleSwitchStyle.xaml" />
<ResourceDictionary Source="/ResourceDictionaries/ComboBoxStyle.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Page.Resources>

<Page.DataContext>
Expand Down Expand Up @@ -163,7 +168,10 @@
<FontIcon Glyph="&#xE74D;" />
</local:SettingsBlockControl.Icon>

<ComboBox AutomationProperties.Name="{helpers:ResourceString Name=ShowConfirmationWhenDeletingItems}" SelectedIndex="{x:Bind ViewModel.SelectedDeleteConfirmationPolicyIndex, Mode=TwoWay}">
<ComboBox
AutomationProperties.Name="{helpers:ResourceString Name=ShowConfirmationWhenDeletingItems}"
SelectedIndex="{x:Bind ViewModel.SelectedDeleteConfirmationPolicyIndex, Mode=TwoWay}"
Style="{StaticResource FixedWidthComboBoxStyle}">
<ComboBoxItem Content="{helpers:ResourceString Name=Always}" />
<ComboBoxItem Content="{helpers:ResourceString Name=PermanentDeletionOnly}" />
<ComboBoxItem Content="{helpers:ResourceString Name=Never}" />
Expand Down
18 changes: 14 additions & 4 deletions src/Files.App/Views/Settings/GeneralPage.xaml
View file
Open in desktop
Expand Up @@ -14,7 +14,12 @@
mc:Ignorable="d">

<Page.Resources>
<ResourceDictionary Source="/ResourceDictionaries/RightAlignedToggleSwitchStyle.xaml" />
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/ResourceDictionaries/RightAlignedToggleSwitchStyle.xaml" />
<ResourceDictionary Source="/ResourceDictionaries/ComboBoxStyle.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Page.Resources>

<Page.DataContext>
Expand Down Expand Up @@ -49,7 +54,8 @@
HorizontalAlignment="Left"
AutomationProperties.Name="{helpers:ResourceString Name=Language}"
ItemsSource="{x:Bind ViewModel.AppLanguages}"
SelectedIndex="{x:Bind ViewModel.SelectedAppLanguageIndex, Mode=TwoWay}">
SelectedIndex="{x:Bind ViewModel.SelectedAppLanguageIndex, Mode=TwoWay}"
Style="{StaticResource FixedWidthComboBoxStyle}">
<ComboBox.ItemTemplate>
<DataTemplate x:DataType="vm:AppLanguageItem">
<TextBlock Text="{x:Bind LanguageName}" />
Expand All @@ -71,7 +77,8 @@
Grid.Column="1"
AutomationProperties.Name="{helpers:ResourceString Name=DateFormat}"
ItemsSource="{x:Bind ViewModel.DateFormats}"
SelectedIndex="{x:Bind ViewModel.SelectedDateTimeFormatIndex, Mode=TwoWay}">
SelectedIndex="{x:Bind ViewModel.SelectedDateTimeFormatIndex, Mode=TwoWay}"
Style="{StaticResource FixedWidthComboBoxStyle}">
<ComboBox.ItemTemplate>
<DataTemplate x:DataType="vm:DateTimeFormatItem">
<StackPanel Orientation="Vertical">
Expand All @@ -97,7 +104,10 @@
<local:SettingsBlockControl.Icon>
<FontIcon Glyph="&#xE7E8;" />
</local:SettingsBlockControl.Icon>
<ComboBox AutomationProperties.Name="{helpers:ResourceString Name=StartupSettings}" SelectedIndex="{x:Bind ViewModel.SelectedStartupSettingIndex, Mode=OneWay}">
<ComboBox
AutomationProperties.Name="{helpers:ResourceString Name=StartupSettings}"
SelectedIndex="{x:Bind ViewModel.SelectedStartupSettingIndex, Mode=OneWay}"
Style="{StaticResource FixedWidthComboBoxStyle}">
<ComboBoxItem Content="{helpers:ResourceString Name=SettingsOnStartupOpenANewTab/Content}" IsSelected="{x:Bind ViewModel.OpenNewTabPageOnStartup, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />

<ComboBoxItem Content="{helpers:ResourceString Name=SettingsOnStartupContinueWhereYouLeftOff/Content}" IsSelected="{x:Bind ViewModel.ContinueLastSessionOnStartUp, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
Expand Down
30 changes: 24 additions & 6 deletions src/Files.App/Views/Settings/LayoutPage.xaml
View file
Open in desktop
Expand Up @@ -11,7 +11,12 @@
mc:Ignorable="d">

<Page.Resources>
<ResourceDictionary Source="/ResourceDictionaries/RightAlignedToggleSwitchStyle.xaml" />
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/ResourceDictionaries/RightAlignedToggleSwitchStyle.xaml" />
<ResourceDictionary Source="/ResourceDictionaries/ComboBoxStyle.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Page.Resources>

<Page.DataContext>
Expand Down Expand Up @@ -57,7 +62,10 @@
<FontIcon Glyph="&#xE8BA;" />
</local:SettingsBlockControl.Icon>

<ComboBox AutomationProperties.Name="{helpers:ResourceString Name=LayoutType}" SelectedIndex="{x:Bind ViewModel.SelectedDefaultLayoutModeIndex, Mode=TwoWay}">
<ComboBox
AutomationProperties.Name="{helpers:ResourceString Name=LayoutType}"
SelectedIndex="{x:Bind ViewModel.SelectedDefaultLayoutModeIndex, Mode=TwoWay}"
Style="{StaticResource FixedWidthComboBoxStyle}">
<ComboBoxItem Content="{helpers:ResourceString Name=Details}" />
<ComboBoxItem Content="{helpers:ResourceString Name=List}" />
<ComboBoxItem Content="{helpers:ResourceString Name=Tiles}" />
Expand All @@ -80,7 +88,10 @@
<FontIcon Glyph="&#xE8CB;" />
</local:SettingsBlockControl.Icon>

<ComboBox AutomationProperties.Name="{helpers:ResourceString Name=SortBy}" SelectedIndex="{x:Bind ViewModel.SelectedDefaultSortingIndex, Mode=TwoWay}">
<ComboBox
AutomationProperties.Name="{helpers:ResourceString Name=SortBy}"
SelectedIndex="{x:Bind ViewModel.SelectedDefaultSortingIndex, Mode=TwoWay}"
Style="{StaticResource FixedWidthComboBoxStyle}">
<ComboBoxItem Content="{helpers:ResourceString Name=Name}" />
<ComboBoxItem Content="{helpers:ResourceString Name=DateModifiedLowerCase}" />
<ComboBoxItem Content="{helpers:ResourceString Name=DateCreated}" />
Expand All @@ -100,7 +111,10 @@

<!-- Sort Priority -->
<local:SettingsBlockControl Title="{helpers:ResourceString Name=SortPriority}" HorizontalAlignment="Stretch">
<ComboBox AutomationProperties.Name="{helpers:ResourceString Name=SortPriority}" SelectedIndex="{x:Bind ViewModel.SelectedDefaultSortPriorityIndex, Mode=TwoWay}">
<ComboBox
AutomationProperties.Name="{helpers:ResourceString Name=SortPriority}"
SelectedIndex="{x:Bind ViewModel.SelectedDefaultSortPriorityIndex, Mode=TwoWay}"
Style="{StaticResource FixedWidthComboBoxStyle}">
<ComboBoxItem Content="{helpers:ResourceString Name=SortFoldersFirst}" />
<ComboBoxItem Content="{helpers:ResourceString Name=SortFilesFirst}" />
<ComboBoxItem Content="{helpers:ResourceString Name=SortFilesAndFoldersTogether}" />
Expand All @@ -116,7 +130,10 @@
<FontIcon Glyph="&#xF168;" />
</local:SettingsBlockControl.Icon>

<ComboBox AutomationProperties.Name="{helpers:ResourceString Name=GroupBy}" SelectedIndex="{x:Bind ViewModel.SelectedDefaultGroupingIndex, Mode=TwoWay}">
<ComboBox
AutomationProperties.Name="{helpers:ResourceString Name=GroupBy}"
SelectedIndex="{x:Bind ViewModel.SelectedDefaultGroupingIndex, Mode=TwoWay}"
Style="{StaticResource FixedWidthComboBoxStyle}">
<ComboBoxItem Content="{helpers:ResourceString Name=None}" />
<ComboBoxItem Content="{helpers:ResourceString Name=Name}" />
<ComboBoxItem Content="{helpers:ResourceString Name=DateModifiedLowerCase}" />
Expand All @@ -141,7 +158,8 @@
<ComboBox
AutomationProperties.Name="{helpers:ResourceString Name=GroupByDateUnit}"
IsEnabled="{x:Bind ViewModel.IsGroupByDate, Mode=OneWay}"
SelectedIndex="{x:Bind ViewModel.SelectedDefaultGroupByDateUnitIndex, Mode=TwoWay}">
SelectedIndex="{x:Bind ViewModel.SelectedDefaultGroupByDateUnitIndex, Mode=TwoWay}"
Style="{StaticResource FixedWidthComboBoxStyle}">
<ComboBoxItem Content="{helpers:ResourceString Name=Year}" />
<ComboBoxItem Content="{helpers:ResourceString Name=Month}" />
<ComboBoxItem Content="{helpers:ResourceString Name=Day}" />
Expand Down