unoplatform / uno

Open-source platform for building cross-platform native Mobile, Web, Desktop and Embedded apps quickly. Create rich, C#/XAML, single-codebase apps from any IDE. Hot Reload included! 90m+ NuGet Downloads!!
https://platform.uno
Apache License 2.0
8.95k stars 725 forks source link

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

Open sakshi173 opened 7 months ago

sakshi173 commented 7 months ago

Current behavior

Auto suggest text not properly display issue Auto suggest text not properly display issue 2

Expected behavior

Auto suggest text Correct

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 commented 7 months ago

@kazo0 could it be a material style issue?

kazo0 commented 7 months ago

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

mcNets commented 1 month ago

@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?

image

image

agneszitte commented 1 month ago

@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 image

Compared to Fluent theme: image

agneszitte commented 1 month ago

@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 commented 1 month ago

@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 commented 1 month ago

@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 commented 1 month ago

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 commented 1 month ago

@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;
        }

image

morning4coffe-dev commented 1 month ago

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 commented 1 month ago

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

morning4coffe-dev commented 1 month ago

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 commented 1 month ago

@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 commented 1 month ago

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

morning4coffe-dev commented 1 month ago

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

mcNets commented 1 month ago

@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 commented 1 month ago

@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 commented 1 month ago

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

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

morning4coffe-dev commented 3 weeks ago

This issue should be fixed now via https://github.com/unoplatform/Uno.Gallery/pull/1173.

agneszitte commented 3 weeks ago

Thank you so much again, @mcNets, for your valuable contribution to this issue! It's greatly appreciated ❣️

agneszitte commented 3 weeks ago

@jhanvi03 I will let you do some final tests please

jhanvi03 commented 3 weeks ago

The issue Still persist with Versions:

Package Referenced version Updated version Uno.CommunityToolkit.WinUI.UI.Controls 7.1.200 7.1.203 Uno.CommunityToolkit.WinUI.UI.Controls.DataGrid 7.1.200 7.1.203 Uno.Core.Extensions.Compatibility 4.0.1 4.1.1 Uno.Core.Extensions.Disposables 4.0.1 4.1.1 Uno.Sdk 5.3.96 5.6.0-dev.32 Package Referenced version Updated version
Uno.CommunityToolkit.WinUI.UI.Controls 7.1.200 7.1.203
Uno.CommunityToolkit.WinUI.UI.Controls.DataGrid 7.1.200 7.1.203
Uno.Core.Extensions.Compatibility 4.0.1 4.1.1
Uno.Core.Extensions.Disposables 4.0.1 4.1.1
Uno.Sdk 5.3.96 5.6.0-dev.32

image