显示验证错误时的屏幕故障 xamarin 表单

Screen glitch when validation errors are shown xamarin forms

我正在学习一种显示验证错误的新方法,我遇到了一个非常奇怪的表单问题,当我单击“添加”按钮时,推到屏幕下方的控件消失或变得透明。

这是我的表格https://i.stack.imgur.com/LIrD6.jpg

当我点击添加按钮时发生这种情况 https://i.stack.imgur.com/PWZLZ.jpg(注意:这是一个扩展的屏幕截图,我的屏幕结束于 phone 数字控件。当我滚动剩余空白时 space 是添加按钮)

当我 click/focus 在任何控件上时,屏幕会自行修复 https://i.stack.imgur.com/Exw4z.jpg

我正在使用 shell 应用程序,不知道这里出了什么问题。感谢任何帮助。

这是我的代码

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    x:Class="PROOF.Views.Patient.NewPatientPage"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"
    xmlns:vm="clr-namespace:PROOF.ViewModels"
    xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
    Title="{Binding PageTitle}"
    ios:Page.UseSafeArea="true"
    x:DataType="vm:NewPatientViewModel"
    Shell.TabBarIsVisible="False"
    Visual="Material">
    <ContentPage.Resources>
        <ResourceDictionary>
            <xct:InvertedBoolConverter x:Key="InvertedBoolConverter" />
        </ResourceDictionary>
    </ContentPage.Resources>
    <ContentPage.Content>
        <ScrollView>
            <Grid Margin="10">
                <StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
                    <Label Style="{DynamicResource HeadingLabel}" Text="Patient Info" />
                    <Entry
                        Placeholder="First Name"
                        Style="{DynamicResource DefaultEntry}"
                        Text="{Binding PatientFirstName}">
                        <Entry.Behaviors>
                            <xct:TextValidationBehavior
                                Flags="ValidateOnValueChanging"
                                IsValid="{Binding PatientFirstNameValid}"
                                RegexPattern="^(?!\s*$).+" />
                        </Entry.Behaviors>
                        <Entry.Triggers>
                            <DataTrigger
                                Binding="{Binding PatientFirstNameValid}"
                                TargetType="Entry"
                                Value="False">
                                <Setter Property="PlaceholderColor" Value="{StaticResource Error}" />
                            </DataTrigger>
                        </Entry.Triggers>
                    </Entry>
                    <Label
                        IsVisible="{Binding PatientFirstNameValid, Converter={StaticResource InvertedBoolConverter}}"
                        Style="{DynamicResource ValidationLabel}"
                        Text="First Name is required." />
                    <Entry
                        Placeholder="Last Name"
                        Style="{DynamicResource DefaultEntry}"
                        Text="{Binding PatientLastName}">
                        <Entry.Behaviors>
                            <xct:TextValidationBehavior
                                Flags="ValidateOnValueChanging"
                                IsValid="{Binding PatientLastNameValid}"
                                RegexPattern="^(?!\s*$).+" />
                        </Entry.Behaviors>
                        <Entry.Triggers>
                            <DataTrigger
                                Binding="{Binding PatientLastNameValid}"
                                TargetType="Entry"
                                Value="False">
                                <Setter Property="PlaceholderColor" Value="{StaticResource Error}" />
                            </DataTrigger>
                        </Entry.Triggers>
                    </Entry>
                    <Label
                        IsVisible="{Binding PatientLastNameValid, Converter={StaticResource InvertedBoolConverter}}"
                        Style="{DynamicResource ValidationLabel}"
                        Text="Last Name is required." />
                    <Entry
                        Keyboard="Email"
                        Placeholder="Email"
                        Style="{DynamicResource DefaultEntry}"
                        Text="{Binding PatientEmail}">
                        <Entry.Behaviors>
                            <xct:EmailValidationBehavior
                                DecorationFlags="Trim"
                                Flags="ValidateOnValueChanging"
                                IsValid="{Binding PatientEmailValid}" />
                        </Entry.Behaviors>
                        <Entry.Triggers>
                            <DataTrigger
                                Binding="{Binding PatientEmailValid}"
                                TargetType="Entry"
                                Value="False">
                                <Setter Property="PlaceholderColor" Value="{StaticResource Error}" />
                            </DataTrigger>
                        </Entry.Triggers>
                    </Entry>
                    <Label
                        IsVisible="{Binding PatientEmailValid, Converter={StaticResource InvertedBoolConverter}}"
                        Style="{DynamicResource ValidationLabel}"
                        Text="Email is required." />
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                        <StackLayout Grid.Column="0">
                            <Picker
                                Title="Year"
                                ItemsSource="{Binding DobYears}"
                                SelectedItem="{Binding SelectedDobYear}"
                                Style="{DynamicResource DefaultPicker}">
                                <Picker.Behaviors>
                                    <xct:TextValidationBehavior
                                        Flags="ValidateOnValueChanging"
                                        IsValid="{Binding SelectedDobYearValid}"
                                        RegexPattern="^(?!\s*$).+" />
                                </Picker.Behaviors>
                                <Picker.Triggers>
                                    <DataTrigger
                                        Binding="{Binding SelectedDobYearValid}"
                                        TargetType="Picker"
                                        Value="False">
                                        <Setter Property="TitleColor" Value="{StaticResource Error}" />
                                    </DataTrigger>
                                </Picker.Triggers>
                            </Picker>
                            <Label
                                IsVisible="{Binding SelectedDobYearValid, Converter={StaticResource InvertedBoolConverter}}"
                                Style="{DynamicResource ValidationLabel}"
                                Text="Year is required." />
                        </StackLayout>
                        <StackLayout Grid.Column="1">
                            <Picker
                                Title="Month"
                                ItemsSource="{Binding DobMonths}"
                                SelectedItem="{Binding SelectedDobMonth}"
                                Style="{DynamicResource DefaultPicker}">
                                <Picker.Behaviors>
                                    <xct:TextValidationBehavior
                                        Flags="ValidateOnValueChanging"
                                        IsValid="{Binding SelectedDobMonthValid}"
                                        RegexPattern="^(?!\s*$).+" />
                                </Picker.Behaviors>
                                <Picker.Triggers>
                                    <DataTrigger
                                        Binding="{Binding SelectedDobMonthValid}"
                                        TargetType="Picker"
                                        Value="False">
                                        <Setter Property="TitleColor" Value="{StaticResource Error}" />
                                    </DataTrigger>
                                </Picker.Triggers>
                            </Picker>
                            <Label
                                IsVisible="{Binding SelectedDobMonthValid, Converter={StaticResource InvertedBoolConverter}}"
                                Style="{DynamicResource ValidationLabel}"
                                Text="Year is required." />
                        </StackLayout>
                        <StackLayout Grid.Column="2">
                            <Picker
                                Title="Day"
                                ItemsSource="{Binding DobDays}"
                                SelectedItem="{Binding SelectedDobDay}"
                                Style="{DynamicResource DefaultPicker}">
                                <Picker.Behaviors>
                                    <xct:TextValidationBehavior
                                        Flags="ValidateOnValueChanging"
                                        IsValid="{Binding SelectedDobDayValid}"
                                        RegexPattern="^(?!\s*$).+" />
                                </Picker.Behaviors>
                                <Picker.Triggers>
                                    <DataTrigger
                                        Binding="{Binding SelectedDobDayValid}"
                                        TargetType="Picker"
                                        Value="False">
                                        <Setter Property="TitleColor" Value="{StaticResource Error}" />
                                    </DataTrigger>
                                </Picker.Triggers>
                            </Picker>
                            <Label
                                IsVisible="{Binding SelectedDobDayValid, Converter={StaticResource InvertedBoolConverter}}"
                                Style="{DynamicResource ValidationLabel}"
                                Text="Year is required." />
                        </StackLayout>
                    </Grid>
                    <Label Style="{DynamicResource HeadingLabel}" Text="Guardian Info" />
                    <Entry
                        Placeholder="First Name"
                        Style="{DynamicResource DefaultEntry}"
                        Text="{Binding GuardianFirstName}">
                        <Entry.Behaviors>
                            <xct:TextValidationBehavior
                                Flags="ValidateOnValueChanging"
                                IsValid="{Binding GuardianFirstNameValid}"
                                RegexPattern="^(?!\s*$).+" />
                        </Entry.Behaviors>
                        <Entry.Triggers>
                            <DataTrigger
                                Binding="{Binding GuardianFirstNameValid}"
                                TargetType="Entry"
                                Value="False">
                                <Setter Property="PlaceholderColor" Value="{StaticResource Error}" />
                            </DataTrigger>
                        </Entry.Triggers>
                    </Entry>
                    <Label
                        IsVisible="{Binding GuardianFirstNameValid, Converter={StaticResource InvertedBoolConverter}}"
                        Style="{DynamicResource ValidationLabel}"
                        Text="First Name is required." />
                    <Entry
                        Placeholder="Last Name"
                        Style="{DynamicResource DefaultEntry}"
                        Text="{Binding GuardianLastName}">
                        <Entry.Behaviors>
                            <xct:TextValidationBehavior
                                Flags="ValidateOnValueChanging"
                                IsValid="{Binding GuardianLastNameValid}"
                                RegexPattern="^(?!\s*$).+" />
                        </Entry.Behaviors>
                        <Entry.Triggers>
                            <DataTrigger
                                Binding="{Binding GuardianLastNameValid}"
                                TargetType="Entry"
                                Value="False">
                                <Setter Property="PlaceholderColor" Value="{StaticResource Error}" />
                            </DataTrigger>
                        </Entry.Triggers>
                    </Entry>
                    <Label
                        IsVisible="{Binding GuardianLastNameValid, Converter={StaticResource InvertedBoolConverter}}"
                        Style="{DynamicResource ValidationLabel}"
                        Text="Last Name is required." />
                    <Entry
                        Keyboard="Email"
                        Placeholder="Email"
                        Style="{DynamicResource DefaultEntry}"
                        Text="{Binding GuardianEmail}">
                        <Entry.Behaviors>
                            <xct:EmailValidationBehavior
                                DecorationFlags="Trim"
                                Flags="ValidateOnValueChanging"
                                IsValid="{Binding GuardianEmailValid}" />
                        </Entry.Behaviors>
                        <Entry.Triggers>
                            <DataTrigger
                                Binding="{Binding GuardianEmailValid}"
                                TargetType="Entry"
                                Value="False">
                                <Setter Property="PlaceholderColor" Value="{StaticResource Error}" />
                            </DataTrigger>
                        </Entry.Triggers>
                    </Entry>
                    <Label
                        IsVisible="{Binding GuardianEmailValid, Converter={StaticResource InvertedBoolConverter}}"
                        Style="{DynamicResource ValidationLabel}"
                        Text="Email is required." />
                    <Entry
                        Keyboard="Numeric"
                        Placeholder="Phone Number"
                        Style="{DynamicResource DefaultEntry}"
                        Text="{Binding PhoneNumber}">
                        <Entry.Behaviors>
                            <xct:CharactersValidationBehavior
                                Flags="ValidateOnValueChanging"
                                IsValid="{Binding PhoneNumberValid}"
                                MinimumCharacterCount="10" />
                        </Entry.Behaviors>
                        <Entry.Triggers>
                            <DataTrigger
                                Binding="{Binding PhoneNumberValid}"
                                TargetType="Entry"
                                Value="False">
                                <Setter Property="PlaceholderColor" Value="{StaticResource Error}" />
                            </DataTrigger>
                        </Entry.Triggers>
                    </Entry>
                    <Label
                        IsVisible="{Binding PhoneNumberValid, Converter={StaticResource InvertedBoolConverter}}"
                        Style="{DynamicResource ValidationLabel}"
                        Text="Phone Number is required." />
                    <StackLayout IsVisible="{Binding IsAddViewVisible}">
                        <Button
                            Padding="5"
                            Command="{Binding AddCommand}"
                            Style="{x:StaticResource DefaultButton}"
                            Text="Add"
                            TextColor="White" />
                    </StackLayout>
                    <StackLayout Padding="0,10">
                        <StackLayout IsVisible="{Binding IsEditViewVisible}" Orientation="Horizontal">
                            <Button
                                Padding="5"
                                BackgroundColor="{x:StaticResource Error}"
                                Command="{Binding DeleteCommand}"
                                HorizontalOptions="FillAndExpand"
                                Text="Delete" />
                            <Button
                                Padding="5"
                                Command="{Binding EditCommand}"
                                HorizontalOptions="FillAndExpand"
                                Style="{x:StaticResource DefaultButton}"
                                Text="Edit"
                                TextColor="White" />
                        </StackLayout>
                    </StackLayout>
                </StackLayout>
            </Grid>
        </ScrollView>
    </ContentPage.Content>
</ContentPage>

您可以在 ScrollView 之外添加 StackLayout。

请参考以下代码:

 <!--add a StackLayout out of the ScrollView-->

 <StackLayout>

    <ScrollView VerticalOptions="EndAndExpand">

       <!--other code-->
        
    </ScrollView>

 </StackLayout>