[Gallery][WASM]AutoSuggestBox- In the 'Autosuggest Box with Search Box experience' section, the descriptions of the controls are not displaying on multiple lines.

[sakshi173]

Current behavior

Expected behavior

How to reproduce it (as minimally and precisely as possible)

1. Open Uno Gallery APP
2. Tap Burger Menu on the left top right.
3. Tap "AutoSuggestBox" from the "UI Component" list.
4. Type any component related letters like 'B' for 'Autosuggest Box with Search Box experience' section.
5. Notice that that the control's descriptions are displaying in a single line, causing the text to become less visible when the screen is resized smaller.

Workaround

No response

Works on UWP/WinUI

None

Environment

No response

NuGet package version(s)

No response

Affected platforms

WebAssembly

IDE

No response

IDE version

No response

Relevant plugins

No response

Anything else we need to know?

No response

[jeromelaban]

@kazo0 could it be a material style issue?

[kazo0]

@jeromelaban There's no Material style for AutoSuggestBox, might be using the Material FlyoutPresenterStyle by accident though.

[mcNets]

@jeromelaban @kazo0 AutosuggestBox shows more than one line. If you keep scrolling, you may get an item with 2 lines. Maybe the visual appearance can be improved by adding margin on the right and left.

Problem, when you resize the browser window, AutosuggestBox size doesn't change and some parts become hidden.

May I send a PR to this repo?

[agneszitte]

@jeromelaban There's no Material style for AutoSuggestBox, might be using the Material FlyoutPresenterStyle by accident though.

@kazo0 I think you are maybe right here, as I am noticing some purple for the hover state here

Compared to Fluent theme:

[agneszitte]

@jeromelaban There's no Material style for AutoSuggestBox, might be using the Material FlyoutPresenterStyle by accident though.

@kazo0 I think you are maybe right here, as I am noticing some purple for the hover state here

So @mcNets I think we are maybe just missing

                        <StackPanel.Resources>
                            <ResourceDictionary>
                                <ResourceDictionary.MergedDictionaries>
                                    <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
                                </ResourceDictionary.MergedDictionaries>
                            </ResourceDictionary>
                        </StackPanel.Resources>

(similar to https://github.com/unoplatform/Uno.Gallery/blob/57fdfbda48b7eeab81fa054e3a71d6f2eb551d2a/Uno.Gallery/Views/SamplePages/ContentDialogSamplePage.xaml#L95)

at this level for the AutoSuggestBoxSamplePage https://github.com/unoplatform/Uno.Gallery/blob/57fdfbda48b7eeab81fa054e3a71d6f2eb551d2a/Uno.Gallery/Views/SamplePages/AutoSuggestBoxSamplePage.xaml#L15

[mcNets]

@agneszitte I've added the code you posted, but I'm not sure this is the issue. Initially flyout has a Width=300, but when you make the browser window narrow, it automatically changes to a larger size, and then do not recover the original size, and the flyout content remains hidden.

Desktop project behaves the same way.

When NavigationView is in compact mode, the FlyOut is then resized again and wrap the content.

https://github.com/user-attachments/assets/0fc1e54b-06f5-482f-abe2-b28c5e70b977

[agneszitte]

@agneszitte I've added the code you posted, but I'm not sure this is the issue. Initially flyout has a Width=300, but when you make the browser window narrow, it automatically changes to a larger size, and then do not recover the original size, and the flyout content remains hidden.

Thanks for giving it a try @mcNets. Maybe I am mistaken but I think it is still taking the Material theme here visually and for that reason not using the fluent theme properly (which hopefully could normally resolve the main issue here in terms of padding, wrapping, etc...)

[agneszitte]

Thanks for giving it a try @mcNets. Maybe I am mistaken but I think it is still taking the Material theme here visually and for that reason not using the fluent theme properly (which hopefully could normally resolve the main issue here in terms of padding, wrapping, etc...)

Related issue: https://github.com/unoplatform/Uno.Gallery/issues/1069#issuecomment-2215227284 And I think as @Xiaoy312 mentioned, the problem may be of the same nature as: https://github.com/unoplatform/Uno.Gallery/issues/1093

[mcNets]

@agneszitte I tried to apply the same approach as @morning4coffe-dev did on https://github.com/unoplatform/Uno.Gallery/pull/1123, but it still seems a bit purple.

        public AutoSuggestBoxSamplePage()
        {
            this.InitializeComponent();
            Loaded += AutoSuggestBoxSamplePage_Loaded;
        }

        private void AutoSuggestBoxSamplePage_Loaded(object sender, RoutedEventArgs e)
        {
            var boxes = VisualTreeHelperEx.GetDescendants(this)
                .OfType<AutoSuggestBox>()
                .ToList();

            foreach (var box in boxes)
            {
                box.EnsureXamlControlsResources();
            }

            Loaded -= AutoSuggestBoxSamplePage_Loaded;
        }

[morning4coffe-dev]

I have an ongoing PR for fixing this issue https://github.com/unoplatform/Uno.Gallery/pull/1134, but I haven't been able to prioritize. Thank you for looking into this @mcNets. On the image you shared, it is purple as the individual items are still material. We can discuss further, if you want to continue with this issue.

[mcNets]

No thank you @morning4coffe-dev , go ahead. I'll take another one. Are you changing the style everytime a new popup appears?

[morning4coffe-dev]

As far as I remember, the solution I worked on only functioned after opening the popup for the second time, which is why it hasn't been merged yet. If you'd like, you can take a look at my PR and maybe pick it up if you get any ideas from it.

[mcNets]

@morning4coffe-dev If I am not wrong TextChanged event if fired before the suggestion list is open.

if (sender.IsSuggestionListOpen)
{
    var popup = VisualTreeHelper.GetOpenPopupsForXamlRoot(XamlRoot).FirstOrDefault();
    popup.EnsureXamlControlsResources(true);
    (popup.Child as Border).EnsureXamlControlsResources(true);
}

So until TextChanged event is fired again, for example when you add another character or select one option or you clear the TextBox, the style is no applied. Try by press 'b' and when the popup is visible, click 'o', it will change to Fluent.

Set a breakpoint inside the if condition and you'll see it.

[mcNets]

@morning4coffe-dev would you mind if I make a modification in your code?

[morning4coffe-dev]

@mcNets Not at all, I am happy to collab with you this way! Thank you 😇

[mcNets]

@morning4coffe-dev Your PR was created with the previous multi-project version, and I'm not sure to be able to send a PR to your PR, do you mind if I generate a new PR?

Besides, UWP project where the changes are applied, is not loading.

[morning4coffe-dev]

@mcNets For sure, no problem, you can create a new PR and we can close off mine, after merging. Hmm... interesting, I am happy to take a look, after you make the PR on why it might not be loading.

[mcNets]

@morning4coffe-dev I don't know if mine will load....

https://github.com/unoplatform/Uno.Gallery/pull/1173