PowerAccent with multi-language selection

[Sirozha1337]

• Updated Language enum, method signatures, and settings to support multiple language selections.
• Remove ALL language and added special characters language instead.
• Modified UI to use ListView with checkboxes for language selection, including a "Select All" option.
• Adjusted ViewModel and code-behind to handle multi-selection logic.
• Updated Resources.resw and PowerAccentViewModel.cs to reflect these changes.

Summary of the Pull Request

Added an ability to select multiple languages.

This UI is the best I can do right now as my experience with Desktop UI development is limited, so if someone wants to make it better, be my guest.

PR Checklist

• Closes: [Quick Accent] Select multiple languages #21261
• Communication: I've discussed this with core contributors already. If work hasn't been agreed, this work might be rejected
• Tests: Added/updated and all pass
• Localization: All end user facing strings can be localized
• Dev docs: Added/updated
• New binaries: Added on the required places
  • JSON for signing for new binaries
  • WXS for installer for new binaries and localization folder
  • YML for CI pipeline for new test projects
  • YML for signed pipeline
• Documentation updated: If checked, please file a pull request on our docs repo and link it here: #xxx

Detailed Description of the Pull Request / Additional comments

Validation Steps Performed

Manually tested the app.

[htcfreek]

Some small thoughts:

1. Would it be helpful to separate languages/countries and special things like currency, ipa, romanization, secial characters. Maybe by sorting all languages or having a separation line.
2. What means special characters?! Can we make the content of this list more clear in settings. 🤔
3. What oder do the sets have in the character pop up? Alphabetical, time of selection?

[Sirozha1337]

1. Would it be helpful to separate languages/countries and special things like currency, ipa, romanization, secial characters. Maybe by sorting all languages or having a separation line.

It's not clear to me how to sort languages, when they are supposed to be localizable and their position is hardcoded inside the XAML. By which field should they be sorted: localized name, english name, language code? Maybe I should also rewrite it so that the list of options is bound from the code behind?

2. What means special characters?! Can we make the content of this list more clear in settings. 🤔

Maybe just list them in the docs? It wasn't much clearer before, why enabling the "All Available" option added those symbols to the list, when they in fact do not belong to any of the languages. Also, I'm not sure anyone was even using this option, since it makes the app hard to use, there are just too many symbols to choose from.

3. What oder do the sets have in the character pop up? Alphabetical, time of selection?

Looks like by time of selection. Though I'm not sure, I don't know how the ListView works with its internal list of SelectedOptions, so it's possible that it is not predetermined. Maybe we need some other type of control with an ability to order the list of selected items.

[stefansjfw]

It's not clear to me how to sort languages, when they are supposed to be localizable and their position is hardcoded inside the XAML. By which field should they be sorted: localized name, english name, language code? Maybe I should also rewrite it so that the list of options is bound from the code behind?

See this #35462

[htcfreek]

It's not clear to me how to sort languages, when they are supposed to be localizable and their position is hardcoded inside the XAML. By which field should they be sorted: localized name, english name, language code? Maybe I should also rewrite it so that the list of options is bound from the code behind?

See this #35462

@stefansjfw
How to position things like math ans currency in the list. Alphabetical or as first one?

[stefansjfw]

It's not clear to me how to sort languages, when they are supposed to be localizable and their position is hardcoded inside the XAML. By which field should they be sorted: localized name, english name, language code? Maybe I should also rewrite it so that the list of options is bound from the code behind?

See this #35462

@stefansjfw How to position things like math ans currency in the list. Alphabetical or as first one?

Ideally at the top or bottom and with some separator if possible like in context menus

[Sirozha1337]

@stefansjfw @htcfreek

Do you mean like this? How should I name those groups?

[Sirozha1337]

Also, what about the character popup, should I somehow sort those characters after constructing the complete list for all the selected languages?

Or maybe the sorting should be handled in a separate PR, since you already have an option to sort by "usage frequency". Maybe there should be a list of options instead of just this one? For example: Usage Frequency, Alphabetical, Reverse Alphabetical, Custom Order.

[htcfreek]

Or maybe the sorting should be handled in a separate PR, since you already have an option to sort by "usage frequency". Maybe there should be a list of options instead of just this one? For example: Usage Frequency, Alphabetical, Reverse Alphabetical, Custom Order.

Pop up: When asking I didn't thought about the usage frequency sorting. I think keep it as is and either open a issue for discussion and a new PR later or wait if users complains about the current behavior.

(Settings: Sort checkboxes alphabetical in each groub.)

[Sirozha1337]

wait if users complains about the current behavior.

Ha ha, I like that option ;)

(Settings: Sort checkboxes alphabetical in each groub.)

They're sorted on the screenshot (from left to right, top to bottom). Do you mean they should go top to bottom, left to right?

What do you think about group titles? I should probably make them a bit smaller, but I'm not sure about the word "synthetic".

Maybe it should be called "Special characters", but then I don't know what to call the current "special characters" option. Because it includes both math symbols, currencies and letters from the languages I've never heard about. Maybe it should be split into multiple options? But then again my knowledge of them is lacking so I'm not sure how to group them correctly.

[htcfreek]

(Settings: Sort checkboxes alphabetical in each groub.)

They're sorted on the screenshot (from left to right, top to bottom). Do you mean they should go top to bottom, left to right?

What I mean is they should be automatically sorted based on their translated name. Then the sorting is alphabetical in all supported ui language.

What do you think about group titles? I should probably make them a bit smaller, but I'm not sure about the word "synthetic".

You can use "Language sets" and "Special sets" or something similar.

Maybe it should be called "Special characters", but then I don't know what to call the current "special characters" option. Because it includes both math symbols, currencies and letters from the languages I've never heard about. Maybe it should be split into multiple options? But then again my knowledge of them is lacking so I'm not sure how to group them correctly.

Maybe the problem here is that this is a undefined mixed collection of all leftovers. There is a PR to create an extra Math set (#34428).

[Sirozha1337]

Ok, I just pushed the new commit and here's the updated UI.

[PesBandi]

Hi @Sirozha1337, first of all thank you for all the work, I'm really looking forward to this. I just noticed one slight issue, the checkboxes look a bit weird in dark mode:

Compared to other checkboxes:

[Sirozha1337]

Hi @PesBandi, thank you for your observation! I tried playing around with style properties, but I do not undestand how to make it look the same as ordinary checkbox. When I look at the other CheckBoxes that are used in this project, they do not have any styling applied to them. When I remove this styling, that I've applied to the ListViewItemPresenter, CheckBoxes start look completely different (no background or border, just the tick mark):

CheckBoxBorderBrush="{ThemeResource CheckBoxBorderThemeBrush}"
CheckBoxBrush="{ThemeResource CheckBoxBackgroundThemeBrush}"
CheckBrush="{ThemeResource CheckBoxForegroundUnchecked}"

I don't understand what should I set here to make it look good both in Dark and Light mode. It's my first time working with WinUI project.

When working on this PR, I've used an example from WinUI 3 gallery app. For some reason they don't use any styling in this example and it looks just like the ordinary checkbox. I can't understand why is my so different when no styling is applied to it.

I tried asking GitHub Copilot about it, but it doesn't seem to understand how to style it either. It suggests only wrong solutions which relate to CheckBox styling and not to ListView with CheckBoxes styling, it can't even get to the solution I've figured out by myself.

Either I'm very stupid and can't Google properly or there's just too little info about styling this ListView component on the web.

Maybe someone else can help me with this PR?

[PesBandi]

Yeah, I have no idea either 🤷‍♂️. I don't think this is a major issue, I just thought I'd point it out in case you know how to fix it.

[htcfreek]

@Sirozha1337
Maybe this table helps: https://learn.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.primitives.listviewitempresenter?view=winrt-26100

@niels9001, do you have an idea why the list view checkboxes looking different?

[Sirozha1337]

@Sirozha1337 Maybe this table helps: https://learn.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.primitives.listviewitempresenter?view=winrt-26100

Yeah, this is how I figured out the current solution. The documentation lists all properties but doesn't tell me which ThemeResources should I bind to get the default CheckBox look.

[htcfreek]

@Sirozha1337 Maybe this table helps: https://learn.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.primitives.listviewitempresenter?view=winrt-26100

Yeah, this is how I figured out the current solution. The documentation lists all properties but doesn't tell me which ThemeResources should I bind to get the default CheckBox look.

@Sirozha1337
Maybe this file helps you: https://github.com/microsoft/microsoft-ui-xaml/blob/main/src/controls/dev/CommonStyles/CheckBox_themeresources.xaml

[Sirozha1337]

@htcfreek thanks for the suggestion. I've played around with it for quite some time. I think now it looks a lot more like the original checkbox:

Screenshots:

[htcfreek]

@htcfreek thanks for the suggestion. I've played around with it for quite some time. I think now it looks a lot more like the original checkbox:

Wondering if we can remove the selection background? 🤔 Then I think it would be perfect. (If not possible or to complicated we can go with background.)

[Sirozha1337]

Ok, removed it:

Screenshots:

Also noticed another little thing, the regular CheckBox has a little animation when you click on it and the check mark appears. This one inside the ListView does not have it. I tried googling about it, but as before came up with nothing. Documentation does not mention it, StackOverflow does not have any questions about it. Windows Apps development feels like Dark Forbidden Magic to me....

[htcfreek]

@Sirozha1337
Can't test it on a local test build yet. But for the ui you get a 👍🏻 from me. We can go with as is now. The animation is not important. I think it is ready for review.