Maui positioning problems

Question

Maui positioning problems

Lloyd Sheen 1,491

Is Maui actually GA? I have found so many problem that it seems that MS designated as such so they could get a lot of QA done by us.

Example 1.

Created a skeleton Maui app. Deleted all the XAML except for content page etc.

Using the following XAML: (the extra items are there just for testing so I could try different ways)

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MauiProblems.MainPage">

<Grid>  
        <VerticalStackLayout>  
            <!--<Button Text="Try It!!!"></Button>-->  
            <ImageButton  
                               Source="https://as2.ftcdn.net/v2/jpg/05/14/91/55/1000_F_514915501_myUMf6ulywLoggja84tzb5kYx6TJoDwJ.jpg"></ImageButton>  
        </VerticalStackLayout>  

        <!--<Grid RowDefinitions="Auto">  
                            <ImageButton VerticalOptions="Start"    
                               Source="https://as2.ftcdn.net/v2/jpg/05/14/91/55/1000_F_514915501_myUMf6ulywLoggja84tzb5kYx6TJoDwJ.jpg"></ImageButton>  
                        </Grid>-->  

</Grid>

</ContentPage>

Now if you execute this the ImageButton is located in the middle of the Grid/VerticalStackLayout. Neither the VerticalStackLayout or the VerticalOptions put it at the top.

Now comment out the ImageButton and uncomment the Button control. Execute it and the Button is at the top.

Next comment out the VerticalStackLayout and execute. Now the Button is in the middle (expected).

Next comment out the Button and uncomment out the ImageButton and the ImageButton shows in the middle (expected).

Then add a VerticalOptions="Start" to the ImageButton and execute. ImageButton is shown in the middle as the VerticalOptions seemingly has no impact.

Now comment out the ImageButton and uncomment the Button , add the VerticalOptions and the Button shows at the top.

I have idea why this is happening as the Button and ImageButton should act the same in positioning but they don't.

Ideas and if I am doing it wrong I would love to know.

LS

Version Info:
Microsoft Visual Studio Community 2022
Version 17.3.2
VisualStudio.17.Release/17.3.2+32819.101
Microsoft .NET Framework
Version 4.8.04161

Installed Version: Community

Visual C++ 2022 00482-90000-00000-AA259
Microsoft Visual C++ 2022

ASP.NET and Web Tools 17.3.376.3011
ASP.NET and Web Tools

Azure App Service Tools v3.0.0 17.3.376.3011
Azure App Service Tools v3.0.0

C# Tools 4.3.0-3.22412.4+c97184bafab9a34d61e85f1c1ef34f25283ce9ba
C# components used in the IDE. Depending on your project type and settings, a different version of the compiler may be used.

Common Azure Tools 1.10
Provides common services for use by Azure Mobile Services and Microsoft Azure Tools.

Extensibility Message Bus 1.2.6 (master@34d6af2)
Provides common messaging-based MEF services for loosely coupled Visual Studio extension components communication and integration.

Microsoft JVM Debugger 1.0
Provides support for connecting the Visual Studio debugger to JDWP compatible Java Virtual Machines

Mono Debugging for Visual Studio 17.3.20 (3f4cb00)
Support for debugging Mono processes with Visual Studio.

NuGet Package Manager 6.3.0
NuGet Package Manager in Visual Studio. For more information about NuGet, visit https://docs.nuget.org/

Rainbow Braces 1.0.16
Colorizes matching brace pairs to make it easy to identify them and their scope. Works for curly brackets, parentheses, and square brackets.

Razor (ASP.NET Core) 17.0.0.2232702+e1d654e792aa2fe6646a6935bcca80ff0aff4387
Provides languages services for ASP.NET Core Razor.

StylerPackage Extension 1.0
StylerPackage Visual Stuido Extension Detailed Info

Syncfusion Reference Manager 20.2.0.43
A useful add-in for adding and migrating Syncfusion Assembly References for Windows Forms, WPF, and Silverlight projects.

Syncfusion WPF Project Templates 20.2.0.43
Provides Project/Item Templates to add Syncfusion WPF Project/Item along with corresponding configurations.

Syncfusion Xamarin Project Templates 20.2.0.43
A multi-project template for building iOS, Android, and Windows apps using Syncfusion Xamarin components.

Syncfusion Xamarin Toolbox 20.2.0.43
Syncfusion Essential Studio for Xamarin Toolbox Visual Studio extension.

Syncfusion.VSExtension.Troubleshooter 20.2.0.43
Add-in for Troubleshooting the Syncfusion projects.

SyncfusionMenu Extension 20.2.0.43
SyncfusionMenu Visual Studio Extension Detailed Info

TypeScript Tools 17.0.10701.2001
TypeScript Tools for Microsoft Visual Studio

Visual Basic Tools 4.3.0-3.22412.4+c97184bafab9a34d61e85f1c1ef34f25283ce9ba
Visual Basic components used in the IDE. Depending on your project type and settings, a different version of the compiler may be used.

Visual F# Tools 17.1.0-beta.22363.4+1b94f89d4d1f41f20f9be73c76f4b229d4e49078
Microsoft Visual F# Tools

Visual Studio IntelliCode 2.2
AI-assisted development for Visual Studio.

VisualStudio.DeviceLog 1.0
Information about my package

VisualStudio.Mac 1.0
Mac Extension for Visual Studio

VSPackage Extension 1.0
VSPackage Visual Studio Extension Detailed Info

Xamarin 17.3.0.296 (d17-3@a0ff24b)
Visual Studio extension to enable development for Xamarin.iOS and Xamarin.Android.

Xamarin Designer 17.3.0.208 (remotes/origin/d17-3@e4f67afef)
Visual Studio extension to enable Xamarin Designer tools in Visual Studio.

Xamarin Templates 17.2.28 (9b3d244)
Templates for building iOS, Android, and Windows apps with Xamarin and Xamarin.Forms.

Xamarin.Android SDK 13.0.0.0 (d17-3/030cd63)
Xamarin.Android Reference Assemblies and MSBuild support.
Mono: dffa5ab
Java.Interop: xamarin/java.interop/d17-3@7716ae53
SQLite: xamarin/sqlite/3.38.5@df4deab
Xamarin.Android Tools: xamarin/xamarin-android-tools/main@14076a6

Xamarin.iOS and Xamarin.Mac SDK 15.12.0.2 (87f98a75e)
Xamarin.iOS and Xamarin.Mac Reference Assemblies and MSBuild support.

XamlFormatter 1.0
Formats Xaml the way I want it formatted. Focusing entirely on spacing and leaving the decision of what belongs on what line up to you.

Lloyd Sheen 1,491 Reputation points

2022-08-30T16:24:27.41+00:00

By the way if you have both the Image and ImageButton in the Grid the Image shows at the top and ImageButton shows in the middle.
Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 50,166 Reputation points Microsoft External Staff

2022-08-31T05:27:27.89+00:00
Now if you execute this the ImageButton is located in the middle of the Grid/VerticalStackLayout. Neither the VerticalStackLayout or the VerticalOptions put it at the top.

On my side, I used your code for testing ImageButton and Button, but both of them would appear at the top:

<Grid> <VerticalStackLayout>  <ImageButton Source="icons.png"></ImageButton> // I used a local picture, due to the image url will get a 403 error message on my side. </VerticalStackLayout> </Grid>

Then add a VerticalOptions="Start" to the ImageButton and execute. ImageButton is shown in the middle as the VerticalOptions seemingly has no impact.

On my side, the property VerticalOptions="Start" of ImageButton worked fine:

<Grid>  <ImageButton VerticalOptions="Start" Source="icons.png"></ImageButton> </Grid>

For further investigation, could you please provide more detailed information about you development environment?

I used Microsoft Visual Studio Community 2022 (64-bit) - Preview Version 17.4.0 Preview 1.0 and MAUI 6.0.486.

Lloyd Sheen 1,491

I have posted the VS info as answer.

I also tried the following

<VerticalStackLayout  >  
<ImageButton   
             WidthRequest="200"  
             Source="https://as2.ftcdn.net/v2/jpg/05/14/91/55/1000_F_514915501_myUMf6ulywLoggja84tzb5kYx6TJoDwJ.jpg"></ImageButton>  

    <ImageButton   
             WidthRequest="200"  
             Source="https://as2.ftcdn.net/v2/jpg/05/14/91/55/1000_F_514915501_myUMf6ulywLoggja84tzb5kYx6TJoDwJ.jpg"></ImageButton>  

</VerticalStackLayout>

Now it would be expected to see the image twice but it shows only once.

Lloyd Sheen 1,491 Reputation points

2022-08-31T20:41:11.947+00:00

And things get even more screwy.

So to do another test I decided to try with an image in the app itself. I copied a file to the Images folder of the app. Once I did that the project went t__ts up. I gave me a can't find foreground image (the generic splash screen image). At this point the app will not compile and is pretty much useless.

Tried to get rid of references to the splashscreen and there are files I cannot access that have its name so it wants to change that which I can't. Finally I comment out the splash screen in the .csproj and now it compiles.

This brings up the next weird thing. Execute the app and the ImageButton still does not work and rather than the resource image it shows the web image. It really seems that the Android emulator and VS do not play well together all the time. A second execution and now the resource shows. The ImageButton works as it should with the resource image. Replace it with the web image and it fails again. And it gets even stranger. I thought to try to uncomment out the splash screen in the .csproj and now it accepts the splash screen.

If it were not for the fact that I have so many extensions and it would take quite a while to the it back to how I want to use it I would uninstall it and reinstall to see if that makes it work as it should.
Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 50,166 Reputation points Microsoft External Staff

2022-09-01T06:46:28.593+00:00

Now it would be expected to see the image twice but it shows only once.

I've tested your code on my side, and it works fine as expected.

Once I did that the project went t__ts up. I gave me a can't find foreground image (the generic splash screen image).

I've been testing with local image files of Images folder, but haven't encountered this error.

It should be caused something wrong with your Visual Studio. Would you mind updating or reinstalling it?
Lloyd Sheen 1,491 Reputation points

2022-09-01T14:17:21.557+00:00

Just installed the latest update 17.3.3 and no change. I tested the problem on the Android emulator and my phone and local image works , image from website does not.
Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 50,166 Reputation points Microsoft External Staff

2022-09-02T05:14:40.363+00:00

I've tested it in my side, and I get the same issue as you described.

It's recommended to post your issue under the MAUI issues in GitHub to make the product group aware of this. They may have a viable solution/workaround for you, or they may recognize this as a bug and fix MAUI moving forward. Either way, this link is the best place to progress on your issue.