Click here to Skip to main content
15,947,389 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I have a .NET MAUI application that was working for fine for android when the orientation changes from portrait to landscape. However, after some packages for the project were upgraded, I now have a weird black void on the left side of the screen when the orientation has been changed to landscape. As if the whole screen shifted by a few pixels to the right. (Note: I am referring to the whole PAGE object itself, not any XAML element in the layout.) I do wonder if this problem can be solved without the need to revert the packages though.

NOTE: I asked the same question on SO, but they were not much help. Here is a link to the image of the problem that I posted:
Image Here[^]

What I have tried:

I tried removing some code that I thought would be the culprit at the top of certain XAML pages in the ContentPage.Behaviors tags:

XML
<ContentPage.Behaviors> <toolkit:StatusBarBehavior StatusBarColor="#4085c0" StatusBarStyle="LightStyle" /> </ContentPage.Behaviors>


However, that did not work. (It was a shot in the dark anyway.) I also double-checked the android code for my orientation service as seen below:

public enum DeviceOrientation
{
    Undefined,
    Landscape,
    Portrait
}

//...

public class DeviceOrientationService : IDeviceOrientationService
{
#if IOS
//...
#elif ANDROID
        public DeviceOrientation GetOrientation() 
        {
            var getDeviceCurrentActivity = ActivityStateManager.Default.GetCurrentActivity();
            var orientation = getDeviceCurrentActivity.RequestedOrientation;

            if (orientation == Android.Content.PM.ScreenOrientation.Landscape)
            {
                return DeviceOrientation.Landscape;
            }
            return DeviceOrientation.Portrait;
        }
#endif
//..
        public void SetOrientation(DeviceOrientation orientation)
        {
#if ANDROID
            var getDeviceCurrentActivity = ActivityStateManager.Default.GetCurrentActivity();

            if (orientation == DeviceOrientation.Landscape)
            {
                getDeviceCurrentActivity.RequestedOrientation = Android.Content.PM.ScreenOrientation.Landscape;
            }
            else
            {
                getDeviceCurrentActivity.RequestedOrientation = Android.Content.PM.ScreenOrientation.Portrait;
            }
#elif IOS
//..
#endif
        }
    }
}


I also have tried reverting the MAUI Controller packages back to 18.0.14 from 18.0.21 since I noticed that this started happening after that revert, but still nothing happened which is strange. I will continue to look through the packages to find the culprit, but I'm just wondering if anyone has an idea of another way to fix this as mentioned earlier. I thought for sure that it was this package that needed to be reverted. But I guess not. Maybe I missed something. If I did I will update this question with an answer. But at any rate if anyone has an idea of another way to fix this, that would be great. Also, more importantly, if anyone has any suggestions where to continue to look for a possible answer in either the code config files, or what have you. I honestly have no clue. I don't think it matter s to know, but I am also using the navigation objects from the Prism MAUI library, though I don't think this is a prism issue.

Here are my layout pages. They are relatively the same other than a text field on the first one

Here is the first one:
XML
<pre><?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"
             xmlns:control="clr-namespace:MyApp.Controls" 
             xmlns:datacollection="clr-namespace:MyApp.DataCollection" 
            xmlns:views="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
             x:DataType="datacollection:SigningViewModel"
             x:Name="Form"
             Padding="0"             
             x:Class="MyApp.SigningPage1"
             Title="{Binding Person, Converter={StaticResource PersonNameConverter}}"
    NavigationPage.HasBackButton="False"
    >
    <ContentPage.Behaviors>
        <views:StatusBarBehavior StatusBarColor="#4085c0" StatusBarStyle="LightContent" />
    </ContentPage.Behaviors>
    <ContentPage.Content>
        <Grid>
            <StackLayout IsVisible="{Binding Busy, Converter={StaticResource not}}">
                <Grid ColumnDefinitions="*,*">
                    <Grid ColumnDefinitions="*,*" Grid.Column="1">
                        <Button Text="Clear" Grid.Column="1" HorizontalOptions="End" Command="{Binding ClearSignatureCommand}" BackgroundColor="White" TextColor="DarkRed"/>
                    </Grid>
                </Grid>
                <views:DrawingView x:Name="signatureView"
                Lines="{Binding SignatureLines}"
                HorizontalOptions="FillAndExpand" 
                VerticalOptions="FillAndExpand"
                BackgroundColor="White"
                LineColor="Black"
                LineWidth="2" 
                DrawingLineCompletedCommand="{Binding LineCompletedCommand}"
                IsMultiLineModeEnabled="true"
                ShouldClearOnFinish="false" />

                <Label Text="Please sign" Style="{StaticResource error}" IsVisible="{Binding DisplayNotSignedError }" />
                <Entry Text="{Binding OtherSignature}" Placeholder="Enter Name"/>

                <Label x:Name="OtherSignatureNotEntered" Text="Please enter the name of the person signing" Style="{StaticResource error}" IsVisible="{Binding DisplaySignatureError }" />

                <Grid HorizontalOptions="FillAndExpand" MinimumHeightRequest="25">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>

                    <Button Grid.Column="0" Text="Cancel" Command="{Binding CancelCommand}" HorizontalOptions="FillAndExpand" Style="{StaticResource default}" />
                    <Button Grid.Column="1" Text="Submit" Command="{Binding SubmitCommand}" HorizontalOptions="FillAndExpand" Style="{StaticResource primary}" />
                </Grid>

            </StackLayout>
            <control:BusyOverlay IsVisible="{Binding Busy}"
                             BackgroundColor="White"
                             VerticalOptions="CenterAndExpand"
                             HorizontalOptions="CenterAndExpand"
            />
        </Grid>
    </ContentPage.Content>
</ContentPage>


Here is the second one:
XML
<?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"
             xmlns:control="clr-namespace:MyApp.Controls" 
             xmlns:datacollection="clr-namespace:MyApp.DataCollection" 
            xmlns:views="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
             x:DataType="datacollection:SigningViewModel2"
             x:Name="Form"
             Padding="0"             
             x:Class="MyApp.SigningPage2"
             Title="{Binding Person, Converter={StaticResource PersonConverter}}"
    >
    <ContentPage.Behaviors>
        <views:StatusBarBehavior StatusBarColor="#4085c0" StatusBarStyle="LightContent" />
    </ContentPage.Behaviors>
    <ContentPage.Content>
        <Grid>
            <StackLayout IsVisible="{Binding Busy, Converter={StaticResource not}}">
                <Grid ColumnDefinitions="*,*">
                    <Button Text="Clear" Grid.Column="1" HorizontalOptions="End" WidthRequest="90" Command="{Binding ClearSignatureCommand}" BackgroundColor="White" TextColor="DarkRed"/>
                </Grid>
                <views:DrawingView x:Name="signatureView"
        Lines="{Binding SignatureLines}"
        HorizontalOptions="FillAndExpand" 
        VerticalOptions="FillAndExpand"
        BackgroundColor="White"
        LineColor="Black"
        LineWidth="2" 
        DrawingLineCompletedCommand="{Binding LineCompletedCommand}"
        IsMultiLineModeEnabled="true"
        ShouldClearOnFinish="false" />

                <Label Text="Please sign" Style="{StaticResource error}" IsVisible="{Binding DisplayNotSignedError }" />

                <Grid HorizontalOptions="FillAndExpand" MinimumHeightRequest="25">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <Button Grid.Column="0" Text="Cancel" Command="{Binding CancelCommand}" HorizontalOptions="FillAndExpand" Style="{StaticResource default}" />
                    <Button Grid.Column="1" Text="Submit" Command="{Binding SubmitCommand}" HorizontalOptions="FillAndExpand" Style="{StaticResource primary}" />
                </Grid>
            </StackLayout>

            <control:BusyOverlay IsVisible="{Binding Busy}"
                     BackgroundColor="White"
                     VerticalOptions="CenterAndExpand"
                     HorizontalOptions="CenterAndExpand"/>
        </Grid>
    </ContentPage.Content>
</ContentPage>
Posted
Updated 11-Jun-24 10:58am
v6

1 solution

I can't see the image (it's blocked), and I can't see your page layout code so I'm just going to have to offer some generic advice I'm afraid. The likeliest culprit is a style that has either been added by a library you have added/upgraded, or which you have added yourself. If you use the live visual tree explorer, and property explorers in Visual Studio, you should be able to view the settings of the page and then the content inside it. You're going to have to play around with the values I'm afraid to see what has an effect. Look for margin and padding items being the likeliest culprits.

What I would say; push your code to github before you upgrade libraries in the future, and do your investigation of upgrading the libraries on a branch.

Good luck. I wish you well.
 
Share this answer
 
Comments
Baraiboapex 11-Jun-24 16:35pm    
Hi Pete! Try the image again. I updated the link hopefully this will give you a better idea of what the problem is.
Baraiboapex 11-Jun-24 16:59pm    
Hi again pete! I also updated the question with my layout pages. Hopefully this will help in finding an answer as well.
Baraiboapex 12-Jun-24 10:38am    
Wait, Isn't there any native code to fix this issue as a workaround? I'm thinking there is in order to translate the entire screen upwards to the top of the device.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900