CODEWITHSUNDEEP
android.net-maui
T. A. Pfaff
T. A. Pfaff

Reputation: 61

Bug in .NET MAUI Entry View for Android

I'm running VS Community 2022 Preview v 17.3.0 Preview 4.0

When I run the following XAML code:

<VerticalStackLayout Margin="20">

    <HorizontalStackLayout Margin="10">
        <Label Text="Name:"
               FontSize="Large"
               VerticalOptions="Center"
               WidthRequest="160"
               HorizontalOptions="End" />
        <Entry x:Name="MyStoreDetailsNameEntry"
               Text="{Binding Name, Mode=TwoWay}"
               BackgroundColor="AliceBlue"
               FontSize="Large"
               VerticalOptions="Center"
               HorizontalOptions="Start">
            <Entry.Behaviors>
                <toolkit:EventToCommandBehavior
                    x:DataType="viewmodels:StoreDetailsViewModel"
                    EventName="Completed"
                    Command="{Binding Path=BindingContext.StoreDetailsNameCompletedCommand,
                    Source={Reference myStoreDetailsPage}}"
                    CommandParameter="{Reference MyStoreDetailsNameEntry}"/>
            </Entry.Behaviors>
        </Entry>
    </HorizontalStackLayout>

    <HorizontalStackLayout Margin="10">
        <Label Text="Phone:"
               FontSize="Large"
                VerticalOptions="Center" 
                WidthRequest="160"
                HorizontalOptions="End" />
        <Entry x:Name="MyStoreDetailsPhoneEntry"
               Text="{Binding Phone, Mode=TwoWay}"
               BackgroundColor="AliceBlue"
               FontSize="Large"
               VerticalOptions="Center"
               HorizontalOptions="Start">
            <Entry.Behaviors>
                <toolkit:EventToCommandBehavior
                    x:DataType="viewmodels:StoreDetailsViewModel"
                    EventName="Completed"
                    Command="{Binding Path=BindingContext.StoreDetailsPhoneCompletedCommand,
                    Source={Reference myStoreDetailsPage}}"
                    CommandParameter="{Reference MyStoreDetailsPhoneEntry}"/>
            </Entry.Behaviors>
        </Entry>
    </HorizontalStackLayout>

</VerticalStackLayout>

It runs just fine under the "Windows Machine" emulator. BUT, under the "Android Local Device", connected to my "Motorola moto g(7) power (Android 10.0 API29)", the second Entry field for Phone Number doesn't even show up on the screen. The Label "Phone:" shows up fine, but the Entry field does not show up at all, and there is no way to click it and activate it. The background rectangle in AliceBlue doesn't even show up.

8/12/2022 - NEW INFO (below)

AHA!!! - I found a really easy work-around. Go into the Resources/Styles/Styles.xaml file and edit the Style block of code for TargetType="Entry" and insert the line:

<Setter Property = "MinimumWidthRequest" Value="50" />

<Style TargetType="Entry">
    <Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource Black}, Dark={StaticResource White}}" />
    <Setter Property="BackgroundColor" Value="Transparent" />
    <Setter Property="FontFamily" Value="OpenSansRegular"/>
    <Setter Property="FontSize" Value="14" />
    <Setter Property="PlaceholderColor" Value="{AppThemeBinding Light={StaticResource Gray200}, Dark={StaticResource Gray500}}" />
    <Setter Property="MinimumWidthRequest" Value="50" />
    <Setter Property="VisualStateManager.VisualStateGroups">
        <VisualStateGroupList>
            <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Normal" />
                <VisualState x:Name="Disabled">
                    <VisualState.Setters>
                        <Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource Gray300}, Dark={StaticResource Gray600}}" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateGroupList>
    </Setter>
</Style>

I discovered this solution by watching the .NET Conf: Focus on MAUI video on YouTube. Thanks Microsoft for all the YouTube videos that you share with the community!!!

I do still consider this a work-around, and would still like to see this get fixed eventually.

Actually, this could be fixed right away by editing the .NET MAUI App scaffolding code to insert this one additional line into the Resources/Styles/Styles.xaml file that gets created on app creation.

Upvotes: 0

Views: 1423

Answers (1)

Liyun Zhang - MSFT
Liyun Zhang - MSFT

Reputation: 14509

I have tested your project and found that the problem is the null of the entry's text, so the entry's width is 0. You can try to use the MinimumWidthRequest or the WidthRequest to make the entry show correctly. Such as:

<Entry x:Name="MyStoreDetailsPhoneEntry"
               MinimumWidthRequest="200"
               Text="{Binding Phone, Mode=TwoWay}"
               BackgroundColor="AliceBlue"
               FontSize="Large"
               VerticalOptions="Center"
               HorizontalOptions="Start"
               Completed="MyStoreDetailsPhoneEntry_Completed">

Upvotes: 0

Related Questions