Xamarin forms View Visibility

Question

Xamarin forms View Visibility

abanoub adly 41

am developing an app that takes an input from user with error labels for input validation
the error label visibility default value is false.
am having more than a 10 entry and their error label.
158636-screenshot-2021-12-13-20-41-35-352-comcompanynamer.jpg

and after the app takes input and validates it with error labels it looks like this
at the very end of the layout.

158578-screenshot-2021-12-13-20-41-41-193-comcompanynamer.jpg

this my xaml code

<ContentPage.Content>  
        <ScrollView>  
            <StackLayout  
                Margin="20">  
                  
                <!--Unit Type Picker-->  
                <Grid>  
                      
                    <Grid.ColumnDefinitions>  
                        <ColumnDefinition Width="Auto"/>  
                        <ColumnDefinition Width="*"/>  
                    </Grid.ColumnDefinitions>  
                                                                                                                                                             
                    <Label   
                            Grid.Column="0"                              
                            Text="{xct:Translate UnitType}"   
                            Style="{StaticResource PickerLabelStyle}"/>  
                    <Picker   
                            Grid.Column="1"  
                            ItemsSource="{Binding UnitTypeList,Mode=OneWay}"   
                            SelectedIndex="{Binding UnitTypeIndex,Mode=OneWayToSource}"  
                            Style="{StaticResource PickerStyle}"/>  
                </Grid>  
                <Label  
                    Text="{Binding UnitTypeError,Mode=OneWay}"  
                    Style="{StaticResource ErrorLabel}"  
                    IsVisible="{Binding UnitTypeErrorVis,Mode=OneWay}"  
                    />  
  
                <!--Unit IsFurnished Picker-->  
                <Grid>  
                      
                    <Grid.ColumnDefinitions>  
                        <ColumnDefinition Width="Auto"/>  
                        <ColumnDefinition Width="*"/>  
                    </Grid.ColumnDefinitions>  
                      
                    <Label   
                            Grid.Column="0"  
                            Text="{xct:Translate Furnished}"   
                            Style="{StaticResource PickerLabelStyle}"/>  
                    <Picker   
                            Grid.Column="1"  
                            ItemsSource="{Binding IsFurnishedList,Mode=OneWay}"   
                            SelectedIndex="{Binding FurnishedIndex,Mode=OneWayToSource}"  
                            Style="{StaticResource PickerStyle}"/>  
                </Grid>  
                <Label  
                    Text="{Binding FurnishedError,Mode=OneWay}"  
                    Style="{StaticResource ErrorLabel}"  
                    IsVisible="{Binding FurnishedErrorVis,Mode=OneWay}"  
                    />  
                  
                <!--Unit National ID-->  
                <Entry  
                    Placeholder="{xct:Translate UnitNationalID}"  
                    Text="{Binding UnitNationalID}"  
                    Style="{StaticResource EntryStyle}"  
                    Keyboard="Numeric"/>  
                <Label  
                    Text="{Binding UnitNationalIDError,Mode=OneWay}"  
                    Style="{StaticResource ErrorLabel}"  
                    IsVisible="{Binding UnitNationalIDErrorVis,Mode=OneWay}"  
                    />  
  
  
                <!--Floor Num-->  
                <Entry  
                    Placeholder="{xct:Translate FloorNum}"  
                    Text="{Binding FloorNum,Mode=OneWayToSource}"  
                    Style="{StaticResource EntryStyle}"  
                    Keyboard="Numeric"/>  
                <Label  
                    Text="{Binding FloorNumError,Mode=OneWay}"  
                    Style="{StaticResource ErrorLabel}"  
                    IsVisible="{Binding FloorNumErrorVis,Mode=OneWay}"  
                    />  
                  
  
                <!--Unit Space-->  
                <Entry  
                    Placeholder="{xct:Translate UnitSpace}"  
                    Text="{Binding UnitSpace,Mode=OneWayToSource}"  
                    Style="{StaticResource EntryStyle}"  
                    Keyboard="Numeric"/>  
                <Label  
                    Text="{Binding UnitSpaceError,Mode=OneWay}"  
                    Style="{StaticResource ErrorLabel}"  
                    IsVisible="{Binding UnitSpaceErrorVis,Mode=OneWay}"  
                    />  
                  
  
                <!--Living Room Space-->  
                <Entry  
                    Placeholder="{Binding LivingRoomSpacePH,Mode=OneWay}"  
                    Text="{Binding LivingRoomSpace,Mode=OneWayToSource}"  
                    Style="{StaticResource EntryStyle}"  
                    Keyboard="Numeric"/>  
  
                <!--Rooms Num-->  
                <Entry  
                    Placeholder="{Binding RoomsNumPH,Mode=OneWay}"  
                    Text="{Binding RoomsNum,Mode=OneWayToSource}"  
                    Style="{StaticResource EntryStyle}"  
                    Keyboard="Numeric"/>  
  
                <!--Lights Num-->  
                <Entry  
                    Placeholder="{Binding LightsNumPH,Mode=OneWay}"  
                    Text="{Binding LightsNum,Mode=OneWayToSource}"  
                    Style="{StaticResource EntryStyle}"  
                    Keyboard="Numeric"/>  
                              
                <!--Baths Num-->  
                <Entry  
                    Placeholder="{xct:Translate BathsNum}"  
                    Text="{Binding BathsNum,Mode=OneWayToSource}"  
                    Style="{StaticResource EntryStyle}"  
                    Keyboard="Numeric"/>  
                <Label  
                    Text="{Binding BathsNumError,Mode=OneWay}"  
                    Style="{StaticResource ErrorLabel}"  
                    IsVisible="{Binding BathsNumErrorVis,Mode=OneWay}"  
                    />  
                  
  
                <!--Maid Rooms Num-->  
                <Entry  
                    Placeholder="{xct:Translate MaidRoomsNum}"  
                    Text="{Binding MaidRoomsNum,Mode=OneWayToSource}"  
                    Style="{StaticResource EntryStyle}"  
                    Keyboard="Numeric"/>  
                <Label  
                    Text="{Binding MaidRoomsNumError,Mode=OneWay}"  
                    Style="{StaticResource ErrorLabel}"  
                    IsVisible="{Binding MaidRoomsNumErrorVis,Mode=OneWay}"  
                    />  
  
                <!--Air Conditioner Type Picker-->  
                <Grid>  
  
                    <Grid.ColumnDefinitions>  
                        <ColumnDefinition Width="Auto"/>  
                        <ColumnDefinition Width="*"/>  
                    </Grid.ColumnDefinitions>  
  
                    <Label   
                            Grid.Column="0"                              
                            Text="{xct:Translate AirCondType}"   
                            Style="{StaticResource PickerLabelStyle}"/>  
                    <Picker   
                            Grid.Column="1"  
                            ItemsSource="{Binding  AirCondTypeList,Mode=OneWay}"   
                            SelectedIndex="{Binding AirCondTypeIndex,Mode=OneWayToSource}"  
                            Style="{StaticResource PickerStyle}"/>  
                </Grid>  
                <Label  
                    Text="{Binding AirCondTypeError,Mode=OneWay}"  
                    Style="{StaticResource ErrorLabel}"  
                    IsVisible="{Binding AirCondTypeErrorVis,Mode=OneWay}"  
                    />  
  
                <!--Air Cond Power-->  
                <Entry  
                    Placeholder="{xct:Translate AirCondPower}"  
                    Text="{Binding AirCondPower,Mode=OneWayToSource}"  
                    Style="{StaticResource EntryStyle}"  
                    Keyboard="Numeric"/>  
                <Label  
                    Text="{Binding AirCondPowerError,Mode=OneWay}"  
                    Style="{StaticResource ErrorLabel}"  
                    IsVisible="{Binding AirCondPowerErrorVis,Mode=OneWay}"  
                    />  
                  
  
                <!--Rent-->  
                <Entry  
                    Placeholder="{xct:Translate Rent}"  
                    Text="{Binding Rent,Mode=OneWayToSource}"  
                    Style="{StaticResource EntryStyle}"  
                    Keyboard="Numeric"/>  
                <Label  
                    Text="{Binding RentError,Mode=OneWay}"  
                    Style="{StaticResource ErrorLabel}"  
                    IsVisible="{Binding RentErrorVis,Mode=OneWay}"  
                    />  
  
                <!--Discount-->  
                <Entry  
                    Placeholder="{Binding DiscountPH,Mode=OneWay}"  
                    Text="{Binding Discount,Mode=OneWayToSource}"  
                    Style="{StaticResource EntryStyle}"  
                    Keyboard="Numeric"/>  
              
  
                <!--Unit Availability Picker-->  
                <Grid>  
  
                    <Grid.ColumnDefinitions>  
                        <ColumnDefinition Width="Auto"/>  
                        <ColumnDefinition Width="*"/>  
                    </Grid.ColumnDefinitions>  
                      
                    <Label   
                            Grid.Column="0"  
                            Text="{xct:Translate UnitAvailability}"   
                            Style="{StaticResource PickerLabelStyle}"/>  
                    <Picker   
                            Grid.Column="1"  
                            ItemsSource="{Binding UnitAvailabilityList,Mode=OneWay}"   
                            SelectedIndex="{Binding UnitAvailabilityIndex,Mode=OneWayToSource}"  
                            Style="{StaticResource PickerStyle}"/>  
                </Grid>  
                <Label  
                    Text="{Binding UnitAvailabilityError,Mode=OneWay}"  
                    Style="{StaticResource ErrorLabel}"  
                    IsVisible="{Binding UnitAvailabilityErrorVis,Mode=OneWay}"  
                    />  
                  
                <!--Electricity Meter-->  
                <Entry  
                    Placeholder="{xct:Translate ElectricityMeterInfo}"  
                    Text="{Binding ElecMeter}"  
                    Style="{StaticResource EntryStyle}"  
                    Keyboard="Numeric"/>  
                <Label  
                    Text="{Binding ElecMeterError,Mode=OneWay}"  
                    Style="{StaticResource ErrorLabel}"  
                    IsVisible="{Binding ElecMeterErrorVis,Mode=OneWay}"  
                    />  
                  
                <!--Water Meter-->  
                <Entry  
                    Placeholder="{xct:Translate WaterMeterInfo}"  
                    Text="{Binding WaterMeter}"  
                    Style="{StaticResource EntryStyle}"  
                    Keyboard="Numeric"/>  
                <Label  
                    Text="{Binding WaterMeterError,Mode=OneWay}"  
                    Style="{StaticResource ErrorLabel}"  
                    IsVisible="{Binding WaterMeterErrorVis,Mode=OneWay}"  
                    />  
                  
  
                <!--Submit Button-->  
                <Button                      
                    Text="{xct:Translate Submit}"  
                    Command="{Binding SubmitCommand}"  
                    Style="{StaticResource ButtonStyle}"/>  
                  
            </StackLayout>  
        </ScrollView>  
    </ContentPage.Content>

and my static resourse for styling each view

   <!--Entry Style-->  
            <Style x:Key="EntryStyle" TargetType="Entry">  
                <Setter Property="VerticalOptions" Value="CenterAndExpand"/>  
                <Setter Property="HorizontalOptions" Value="FillAndExpand"/>  
                <Setter Property="PlaceholderColor" Value="Black"/>  
                <Setter Property="HorizontalTextAlignment" Value="Start"/>  
            </Style>  
  
            <!--Button Style-->  
            <Style x:Key="ButtonStyle" TargetType="Button">  
                <Setter Property="VerticalOptions" Value="CenterAndExpand"/>  
                <Setter Property="HorizontalOptions" Value="CenterAndExpand"/>  
                <Setter Property="Margin" Value="20"/>  
                <Setter Property="CornerRadius" Value="30"/>  
                <Setter Property="BackgroundColor" Value="Black"/>  
                <Setter Property="TextColor" Value="White"/>  
                <Setter Property="WidthRequest" Value="140"/>  
            </Style>  
              
            <!--Error Label-->  
            <Style x:Key="ErrorLabel" TargetType="Label">  
                <Setter Property="TextColor" Value="Red"/>  
            </Style>  
              
            <!--Picker Style-->  
            <Style x:Key="PickerStyle" TargetType="Picker">  
                <Setter Property="WidthRequest" Value="300"/>  
                <Setter Property="VerticalOptions" Value="CenterAndExpand"/>  
                <Setter Property="HorizontalOptions" Value="CenterAndExpand"/>  
            </Style>  
  
            <!--Picker Label Style-->  
            <Style x:Key="PickerLabelStyle" TargetType="Label">  
                <Setter Property="VerticalOptions" Value="CenterAndExpand"/>  
                <Setter Property="HorizontalOptions" Value="CenterAndExpand"/>  
                <Setter Property="TextColor" Value="Black"/>  
                <Setter Property="FontSize" Value="Medium"/>  
            </Style>

JarvanZhang 23,971

To achieve the validation of an Entry, try using Regex.Matches method. Try creating a custom Behavior class to execute the code in the OnEntryTextChanged event. Then set binding for the IsVisible of the label to the entry.

Here is the sample code, you could refer to it.

public class NumericValidationBehavior : Behavior
{
    protected override void OnAttachedTo(BindableObject bindable)
    {
        var entry = bindable as TestEntry;
        entry.TextChanged += OnEntryTextChanged;
        base.OnAttachedTo(entry);
    }
    protected override void OnDetachingFrom(BindableObject bindable)
    {
        var entry = bindable as TestEntry;
        entry.TextChanged -= OnEntryTextChanged;
        base.OnDetachingFrom(entry);
    }
    void OnEntryTextChanged(object sender, TextChangedEventArgs args)
    {
        string pattern = xxx; // customize the pattern
        ((TestEntry)sender).IsCorrect = (Regex.Matches(args.NewTextValue, pattern)).Count > 0 ? false : true;
    }
}

abanoub adly 41 Reputation points

2021-12-22T09:41:33.48+00:00

@JarvanZhang
Thank for your answer but it does not help me.
my problem was not about the validation process it was when I do validate my entries using whatever approach, I'm hiding error label in the start of the screen when there is an error the label visibility turns to true for showing the error message.
the issue here is that when showing the error label, it hides the center of the layout to the lower part of the screen.
I tried to wrap the whole Scroll View into a Grid and that helped me a lot.
JarvanZhang 23,971 Reputation points

2021-12-23T09:17:05.137+00:00

the issue here is that when showing the error label, it hides the center of the layout to the lower part of the screen.

Hi, abanoubadly-0688. Sorry for the mistake. I create a basic demo to test the above code, the views are shown correctly. Could you mind sharing a basic demo to the github or onedrive and posting the link here? It'll help to reproduce the issue to get the cause.

Your answer

JarvanZhang 23,971 Reputation points

2021-12-20T02:27:55.97+00:00

To achieve the validation of an Entry, try using Regex.Matches method. Try creating a custom Behavior class to execute the code in the OnEntryTextChanged event. Then set binding for the IsVisible of the label to the entry.

Here is the sample code, you could refer to it.

public class NumericValidationBehavior : Behavior { protected override void OnAttachedTo(BindableObject bindable) { var entry = bindable as TestEntry; entry.TextChanged += OnEntryTextChanged; base.OnAttachedTo(entry); } protected override void OnDetachingFrom(BindableObject bindable) { var entry = bindable as TestEntry; entry.TextChanged -= OnEntryTextChanged; base.OnDetachingFrom(entry); } void OnEntryTextChanged(object sender, TextChangedEventArgs args) { string pattern = xxx; // customize the pattern ((TestEntry)sender).IsCorrect = (Regex.Matches(args.NewTextValue, pattern)).Count > 0 ? false : true; } }
abanoub adly 41 Reputation points

2021-12-22T09:41:33.48+00:00

@JarvanZhang
Thank for your answer but it does not help me.
my problem was not about the validation process it was when I do validate my entries using whatever approach, I'm hiding error label in the start of the screen when there is an error the label visibility turns to true for showing the error message.
the issue here is that when showing the error label, it hides the center of the layout to the lower part of the screen.
I tried to wrap the whole Scroll View into a Grid and that helped me a lot.
JarvanZhang 23,971 Reputation points

2021-12-23T09:17:05.137+00:00

the issue here is that when showing the error label, it hides the center of the layout to the lower part of the screen.

Hi, abanoubadly-0688. Sorry for the mistake. I create a basic demo to test the above code, the views are shown correctly. Could you mind sharing a basic demo to the github or onedrive and posting the link here? It'll help to reproduce the issue to get the cause.

Share via

Xamarin forms View Visibility

Your answer