search

dotnet / maui

.NET MAUI is the .NET Multi-platform App UI, a framework for building native device applications spanning mobile, tablet, and desktop.
https://dot.net/maui
MIT License
22.27k stars 1.76k forks source link

Flyout menus don't work; CollectionView lists don't work; ListView lists don't work; Frames don't work... #8602

Closed mobycorp closed 1 year ago

mobycorp commented 2 years ago

Description

I don't even know where to begin on this. All I want to do is create a decent looking menu that shows the selected item. I have run into walls at every turn. This SHOULD NOT BE THIS DIFFICULT! I had tried to be patient while MAUI was in pre-release, but now that it is in GA, I am of the mind this stuff is not ready for prime time.

My background is as a WPF developer for 16 years. I used Prism as a framework and was always able to develop well-styled pages with ease - it just worked. MAUI, in my opinion is NOT a desktop development platform no matter the hype. If I can't use a control out of the box and have it just work - it frustrates me. I can't do mouse over events without going deep into the bowels of WinUI and develop handlers for everything. As a developer, I don't have time to develop tools - I am an application engineer and not a widget developer like Telerik or Syncfusion. Yes, those solutions are in development, but even those toolkits don't even have a simple datagrid. I do remember when WPF first came out, it too, was void of a decent datagrid until the WPF Toolkit came out. I have bet the farm on getting MAUI to work as our product has never been released with a mobile version, but our current investors (we're still a startup) want to see this thing on Windows and Mac first and soon... There is literally $2M riding on this... And while I have always tried to look at what I have developed in the Android emulator to see how it lays out, even that is not as pristine as one would hope.

I have opened up over a dozen issues complaining about things like the Frame not laying out, about the CollectionView setting the SelectedItem to null after I have set it in code (same thing happens for the list view), it is not clear where the VisualStateManager needs to be placed and when you have competing styles, the VisualStateManager doesn't work at all.

Let's go through this from the top. ALL I WANT TO DO IS CREATE A MENU OR A LIST WHERE AFTER THE ITEM SOURCE HAS BEEN SET, THE FIRST ITEM IS PRE-SELECTED WITH REASONABLE STYLING. The MAUI documentation has a page that describes this very thing: https://docs.microsoft.com/en-us/dotnet/maui/user-interface/controls/collectionview/selection#single-pre-selection but creating a stub application with only the code in the page listed here doesn't work because the SelectedItem gets set to null before the page is displayed (I have opened an issue on this.) The SelectedItem being set is key to have the pre-selection work. correctly.

With that said, today I created yet another File->New Maui app to see how I could do this by just doing the minimal amount of configuration and styling. It bombs right off the bat.

Here is a basic Shell app with minimal styling: Screenshot 2022-07-07 132404

It works, but the styling (or lack thereof) does not enhance the user experience at all. There is a very faint gray background of the selected item along with the selection indicator to the left of the control. You have to really look at it to see this. Also, mouse events are non-existent (they DO exist because I can see items in the list views sense the mouse over events to change the faint background) at least I can't figure it out) which would make the use of the VisualStateManager more useful. This basic implementation is blah. I have looked at the MAUI source code to see what elements there are in this stack to see how to style it but the documentation on how to simply style a flyout control (change colors, fonts, etc.) simply does not exist or if it does, it is wrong as in the case of the pre-selection example above.

When I add an ItemTemplate for the flyout menu, it still looks horrible. Here is an attempt to use a BoxView (because Frame never works...) in the template:

Screenshot 2022-07-07 125244

As you can see, only two of the three menu options have any item template styling. If you change the size of the window, suddenly the box view for the third element is drawn. Also, no matter what container I use (Grid, HorizontalStackPanel, etc.) the frame or box border is chopped off at the right. I am guessing that some math is not being calculated correctly when trying to do the layout due to some effect a scrollbar may have - that is just a guess...

Screenshot 2022-07-07 125302

Ok, BoxView didn't work, so let's try a rectangle or a frame. Same results. Look at the third element in the list:

Screenshot 2022-07-07 125651

And, it too, is chopped off at the right. Still using the ItemTemplate for the flyout and simply removing the border control yields this:

Screenshot 2022-07-07 130021

I am frustrated beyond the max limit here. I waited almost a year for MAUI to come out thinking it would solve our UI issues by allowing us to do a true cross-platform UI, but even getting the basic, nominal, no styling thing to work is impossible!!!

What is a poor software engineer to do?! ;-)

I have watched every single YouTube video on MAUI out there. There are many good ones - I do learn something new each time I watch one - but they are all based on a "Do a File->New->Maui" app and mess with the counter button or do some basic styling. James and Gerald have basically the same set of courses on how to build the Monkey app, but nothing of any additional substance.

  1. I want to know how to do true mouse over events - this is crucial to a Windows or a MacOS application,
  2. I want a decent datagrid. Guys, this is a basic UI component that probably 90% of the apps use. Why it is absent in the basic release disappoints...
  3. There is no good documentation available about the anatomy of a window. If I want to set ExtendsContentIntoTitleBar to true, the layout of the Flyout menus and title bar are even more screwed up.
  4. It would be nice if drag & drop were better documented. I just looked at the PDF for the full MAUI release and there is something there, but it does not look like it will be any better than the CollectionView pre-selection example...
  5. Hot reload hardly ever works and when it does it does so on code that is not inside of a control template. Yes, it works there sometimes, but the "sometimes" bit is what leads me to be completely frustrated.

Yes, I am venting, but... I don't want to develop controls. I need to develop apps...

Steps to Reproduce

I have created a repo in github:

https://github.com/mobycorp/MenusForDesktop

Version with bug

6.0.400 (current)

Last version that worked well

Unknown/Other

Affected platforms

Windows, macOS

Affected platform versions

net6.0-windows10.0.19041.0

Did you find any workaround?

NOOOOOOOOOOO!!!

Relevant log output

No response

runqinshiye commented 2 years ago

MAUI-It's amazing that Microsoft's worst team has been procrastinating and not getting laid off.

samhouts commented 2 years ago

@mobycorp You are heard loud and clear! We know that we still have rough edges, and we are working on it. Thank you for sharing your frustrations with the product in a professional and clear description.

We truly appreciate all the effort that you've put into reporting issues. This particular issue is packed with a lot of actionable information, but it's difficult to use as a work item because it doesn't focus on one issue at a time. Can we break it up into smaller bits or link out to the issues that you've already created?

Stick with us! We'll get there.

Thanks!

mobycorp commented 2 years ago

Thanks for your comments! I do appreciate them. I really, really, really want this whole thing to work so I will keep at it.

I will look at breaking this down into individual issues as I think there are four. When I was looking through the issues reported by others, I did find one or two that I also reported. What would you prefer me to do? I don't think duplicating the issues would be productive so maybe I will go and add a comment saying #MeToo on the ones where I am experiencing what others are reporting. I promise I will do that later tonight or tomorrow.

We will get there!!!

samhouts commented 2 years ago

If you find issues that are already reported, you can add comments and/or reactions to the issue, and you can link to them here if they're related to the specific scenario that you're working on. That would be awesome. Again, we really appreciate all that you do! Thank you thank you!!!

mobycorp commented 2 years ago

Hi Sam,

That is exactly what I will do! :-)

Steve

FrozDark commented 2 years ago

@mobycorp mayabe try Uno platform for the things you want to do?

nzcoward commented 2 years ago

I share your frustrations @mobycorp - there are many issues on Android also.

I don't like them being dismissed as 'rough around the edges' because it's not that at all - .NET Maui was not nearly ready for a GA release.

We all do need to stay positive, but the release schedule doesn't seem overly friendly to those who are stuck from releasing because of the issues.

I am sure it will be a solid platform in 6 months, but for now it's costing me actual money as I believed that I was able to port my Xamarin Forms app across now. I can't help but be angry and disappointed :/

I know this comment isn't overly productive to the conversation, but I think it is important that the MAUI Team know that there are developers really struggling with the platform as it stands.

luiguild commented 2 years ago

I'm facing exactly the same problem described trying to apply some styles to my Flyout... Seems to be impossible to remove completely the initial style, I just want to remove this select indicator, all margins, paddings and rounded corners...

image

I've tried a lot of tutorials, documentations, videos... Nothing... The style keeps the same...

nzcoward commented 2 years ago

I handle this by setting the FlyoutContent directly. Then you can style however you like.

There are some challenges here too, though. E.g. I'm having to use absolute height values, because of some weird issues where a grid with * row heights does not honour row heights, unless the grid height is set directly (and it might need to be bind time, I've forgotten how early it can be). If you're not using a grid, I'm sure you'll be fine, but I have top, middle, and bottom menu items.

Fixing height, if you need to, is easy enough binding in a VM with:


DeviceDisplay.Current.MainDisplayInfo.Height / DeviceDisplay.Current.MainDisplayInfo.Density;
luiguild commented 2 years ago

@nzcoward I'm not using Grid there, because as you, I realized that the height is not being applied properly, could you please share a piece of code showing the use of FlyoutContent directly? I appreciate it.

nzcoward commented 2 years ago

It's relatively straightfoward.

You can probably take out the parent Grid in the below, but I need it for some extra containery things that my menu does. But worth testing. And FillAndExpand should not be required, either way.

<Shell.FlyoutContent>
        <Grid BindingContext="{Binding MainMenu}"
              HorizontalOptions="FillAndExpand"
              VerticalOptions="FillAndExpand">
                <Grid HeightRequest="{Binding Height}">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="20*"/>
                        <RowDefinition Height="60*"/>
                        <RowDefinition Height="20*"/>
                    </Grid.RowDefinitions>

                    <CollectionView
                        Grid.Row="0"
                        ItemsSource="{Binding TopItems}"
                        ItemTemplate="{StaticResource IconMenuItem}">
                    </CollectionView>

                    <CollectionView
                        Grid.Row="1"
                        ItemsSource="{Binding MiddleItems}"
                        ItemTemplate="{StaticResource IconMenuItem}">
                    </CollectionView>

                    <CollectionView
                        Grid.Row="2"
                        ItemsSource="{Binding BottomItems}"
                        ItemTemplate="{StaticResource IconMenuItem}"
                        VerticalOptions="End">
                    </CollectionView>
                </Grid>
            </Grid>
</Shell.FlyoutContent>
<ShellContent
        Title="Home"
        ContentTemplate="{DataTemplate local:MainPage}"
        Route="MainPage" />

With my MainMenuViewModel basically looking like:

public class MainMenuViewModel
{
        public IEnumerable<MenuItemViewModel> TopItems { get; }
        public IEnumerable<MenuSectionViewModel> MiddleItems { get; }
        public IEnumerable<MenuItemViewModel> BottomItems { get; }

        public double Height => DeviceDisplay.MainDisplayInfo.Height / DeviceDisplay.MainDisplayInfo.Density;
}

The other issue I had was that on the first page, the one defined in the ShellContent element, the default behaviour of the Flyout was not correct, so I had to set it explicitly in the Shell declaration.


FlyoutBehavior="Flyout"
samhouts commented 2 years ago

I share your frustrations @mobycorp - there are many issues on Android also.

I don't like them being dismissed as 'rough around the edges' because it's not that at all - .NET Maui was not nearly ready for a GA release.

We all do need to stay positive, but the release schedule doesn't seem overly friendly to those who are stuck from releasing because of the issues.

I am sure it will be a solid platform in 6 months, but for now it's costing me actual money as I believed that I was able to port my Xamarin Forms app across now. I can't help but be angry and disappointed :/

I know this comment isn't overly productive to the conversation, but I think it is important that the MAUI Team know that there are developers really struggling with the platform as it stands.

Please don't take my comments as dismissal! We take every issue very seriously, and we do understand the real cost of each one. We're listening, and we're working. Thank you for working with us!!!

janseris commented 2 years ago

I share your frustrations @mobycorp - there are many issues on Android also. I don't like them being dismissed as 'rough around the edges' because it's not that at all - .NET Maui was not nearly ready for a GA release. We all do need to stay positive, but the release schedule doesn't seem overly friendly to those who are stuck from releasing because of the issues. I am sure it will be a solid platform in 6 months, but for now it's costing me actual money as I believed that I was able to port my Xamarin Forms app across now. I can't help but be angry and disappointed :/ I know this comment isn't overly productive to the conversation, but I think it is important that the MAUI Team know that there are developers really struggling with the platform as it stands.

Please don't take my comments as dismissal! We take every issue very seriously, and we do understand the real cost of each one. We're listening, and we're working. Thank you for working with us!!!

So are you doing anything to solve issues faster? The maui team is too slow and late because there are too little devs, just check the latest milestone (22 June - missed) and also the missed. NET 6 release and also all the bugs in the current version. The team needs more developers, not talking that "you are working on it"

mike3sullivan commented 2 years ago

Similar frustrations here - desperately trying to produce a Windows/MacOS desktop application and working from a WPF background. I have built my own TabControl with RadioButtons and Borders, used a Blazor control to mimic a simple datagrid, and struggled with the Grid problems not resizing as elements change size or visibility. The ListView/CollectionView workarounds have been the most tedious since Windows and MacOS implementations are different.

I have logged a few of my own bugs, but I am piling on here since this entry seems to have avoided the dreaded 'Backlog' tagging, and I wanted to echo @mobycorp's statement: this should not be this difficult! The frustration level has been high throughout. There are a lot of edge cases, but PLEASE focus on the fundamentals of the controls first!

mattleibow commented 2 years ago
PureWeen commented 1 year ago

If there's an issue missing from this list, or an additional issue we need to log, please let me know. I'm going to close this issue in favor of the list that @mattleibow has logged above. If there's something we haven't captured yet, please log an issue so that we're aware of it.