[FIXED] Grid auto hiding in xaml Xamarin Forms

Issue

I am getting a strange error /bug. I have 2 buttons (Save and Clear) inside the grid and when user do not enter any data to fields then it shows the errors printed in labels which are in bottom of each controls.
I have used the scroll view and if design goes to the scrolling then my buttons inside the grid hides automatically. But when I select any picker or focus in any Entry then the Grid (Save and Clear) visible in Page.
I have not written any code in the picker selected Index change.
I am sharing me code. and attaching the screenShot of Page Thanks in advance.

<ContentPage.Content>

    <ScrollView x:Name="MyScroll">

        <StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Padding="10">

        <StackLayout>

            <Entry Text="{Binding BindProductInvModel.ProductInvID}" Margin="0" FontSize="1" IsVisible="false" HorizontalOptions="FillAndExpand" />

            <Label Text="Product Name" Margin="2,-2" FontAttributes="Bold" />
            <Picker x:Name="ProductName" Margin="2,-10,2,5" HorizontalOptions="FillAndExpand" 
                    ItemsSource="{Binding BindProductList}" 
                    ItemDisplayBinding="{Binding ProductName}" 
                    SelectedItem="{Binding BindSelectedProduct,Mode=TwoWay}" 
                    Title="{Binding BindCommonDisplayName.PickerTitleDisplayName}"/>
            <Label x:Name="ProductIDError" Margin="2,-10,2,5" TextColor="Red" IsVisible="false" FontAttributes="Italic" />

            <Label Text="Quanity" Margin="2,-10" FontAttributes="Bold" />

            <Entry x:Name="Quantity"  Text="{Binding BindProductInvModel.Quantity}" Unfocused="Entry_Unfocused" Focused="Entry_Focused"
                       Margin="2,-5,2,5" WidthRequest="150" ReturnType="Next"
                       HorizontalOptions="FillAndExpand" Keyboard="Numeric" />
            <Label x:Name="QuantityError" Margin="2,-10,2,5" 
                   TextColor="Red" IsVisible="false" FontAttributes="Italic" />


            <Label Text="Unit" Margin="2,-10" FontAttributes="Bold" />
            <Entry x:Name="Unit"  Text="{Binding BindProductInvModel.Unit}" IsReadOnly="True"
                       Margin="2,-5,2,5" WidthRequest="150" ReturnType="Next"
                       HorizontalOptions="FillAndExpand" Keyboard="Numeric" />
            <Label x:Name="UnitError" Margin="2,-10,2,5" TextColor="Red" IsVisible="false" FontAttributes="Italic" />

            <Label Text="Vendor Name" Margin="2,-10" FontAttributes="Bold" />
            <Picker x:Name="VendorName" Margin="2,-5,2,5" ItemsSource="{Binding BindVendorList}" 
                    ItemDisplayBinding="{Binding VendorName}" 
                    SelectedItem="{Binding BindSelectedVendor,Mode=TwoWay}" 
                    Title="{Binding BindCommonDisplayName.PickerTitleDisplayName}" HorizontalOptions="FillAndExpand" />
            <Label x:Name="VendorIDError" Margin="2,-10,2,5" TextColor="Red" IsVisible="false" FontAttributes="Italic" />


            <Label Text="Receiving Date" Margin="2,-12" FontAttributes="Bold" />

            <DatePicker x:Name="PickerRecvDate" Margin="2,-5,2,5" Date="{Binding BindProductInvModel.ReceivingDate,Mode=TwoWay}" 
                        HorizontalOptions="FillAndExpand" Format="dd-MM-yyyy"  />
         
            <Label Text="Price" Margin="2,-12" FontAttributes="Bold" />
            <Entry x:Name="Price"  Text="{Binding BindProductInvModel.Price}" Unfocused="Entry_Unfocused" Focused="Entry_Focused"
                       Margin="2,-5,2,5" WidthRequest="150" ReturnType="Next"
                       HorizontalOptions="FillAndExpand" Keyboard="Numeric" />
            <Label x:Name="PriceError" Margin="2,-10,2,5" 
                   TextColor="Red" IsVisible="false" FontAttributes="Italic" />


            <Label Text="Fair" Margin="2,-12" FontAttributes="Bold" />
            <Entry x:Name="Fair"  Text="{Binding BindProductInvModel.Fair}" Unfocused="Entry_Unfocused" Focused="Entry_Focused"
                       Margin="2,-5,2,5" WidthRequest="150" ReturnType="Next"
                       HorizontalOptions="FillAndExpand" Keyboard="Numeric" />
            <Label x:Name="FairError" Margin="2,-10,2,5" 
                   TextColor="Red" IsVisible="false" FontAttributes="Italic" />


            <Label Text="OtherCharges" Margin="2,-12" FontAttributes="Bold" />
            <Entry x:Name="OtherCharges" Text="{Binding BindProductInvModel.OtherCharges}" Unfocused="Entry_Unfocused" Focused="Entry_Focused"
                       Margin="2,-5,2,5" WidthRequest="150" ReturnType="Next"
                       HorizontalOptions="FillAndExpand" Keyboard="Numeric" />
            <Label x:Name="OtherChargesError" Margin="2,-10,2,5" 
                   TextColor="Red" IsVisible="false" FontAttributes="Italic" />


            <Label Text="Total" 
                   Margin="2,-12" FontAttributes="Bold" />
            <Entry Text="{Binding BindProductInvModel.Total}"
                       Margin="2,-5,2,5" WidthRequest="150" ReturnType="Next" IsEnabled="False"
                       HorizontalOptions="FillAndExpand" Keyboard="Numeric" />
            <Label x:Name="TotalError" Margin="2,-10,2,5" 
                   TextColor="Red" IsVisible="false" FontAttributes="Italic" />

      </StackLayout>


            <StackLayout>

                <Grid HorizontalOptions="FillAndExpand" Margin="2,-12">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="1*" />
                <ColumnDefinition Width="1*" />
             </Grid.ColumnDefinitions>

            <Button Text="Save" x:Name="BtnSave" 
                        HorizontalOptions="FillAndExpand" CornerRadius="10" 
                        BorderWidth="2" BackgroundColor="#ff6633" TextColor="#fff" 
                        Margin="2" Grid.Column="0" Grid.Row="0" Command="{Binding SaveCommand}" />

            <Button Text="Clear" x:Name="BtnClear" HorizontalOptions="FillAndExpand" 
                        CornerRadius="10" BorderWidth="2" BackgroundColor="#bfbfbf" 
                        TextColor="#fff" Margin="2" Grid.Column="1" Grid.Row="0" Command="{Binding ClearCommand}" />
        </Grid>

            </StackLayout>


        </StackLayout>
        
        
    </ScrollView>

</ContentPage.Content>

enter image description here

enter image description here

Solution

If you want to make the grid with buttons always visable when you scroll or select any picker, you could make the buttons outside the scrollview.

 <StackLayout> 
 <ScrollView x:Name="MyScroll">

    <StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Padding="10">

    <StackLayout>

        <Entry Text="{Binding BindProductInvModel.ProductInvID}" Margin="0" FontSize="1" IsVisible="false" HorizontalOptions="FillAndExpand" />

        <Label Text="Product Name" Margin="2,-2" FontAttributes="Bold" />
        <Picker x:Name="ProductName" Margin="2,-10,2,5" HorizontalOptions="FillAndExpand" 
                ItemsSource="{Binding BindProductList}" 
                ItemDisplayBinding="{Binding ProductName}" 
                SelectedItem="{Binding BindSelectedProduct,Mode=TwoWay}" 
                Title="{Binding BindCommonDisplayName.PickerTitleDisplayName}"/>
        <Label x:Name="ProductIDError" Margin="2,-10,2,5" TextColor="Red" IsVisible="false" FontAttributes="Italic" />

        <Label Text="Quanity" Margin="2,-10" FontAttributes="Bold" />

        <Entry x:Name="Quantity"  Text="{Binding BindProductInvModel.Quantity}" Unfocused="Entry_Unfocused" Focused="Entry_Focused"
                   Margin="2,-5,2,5" WidthRequest="150" ReturnType="Next"
                   HorizontalOptions="FillAndExpand" Keyboard="Numeric" />
        <Label x:Name="QuantityError" Margin="2,-10,2,5" 
               TextColor="Red" IsVisible="false" FontAttributes="Italic" />


        <Label Text="Unit" Margin="2,-10" FontAttributes="Bold" />
        <Entry x:Name="Unit"  Text="{Binding BindProductInvModel.Unit}" IsReadOnly="True"
                   Margin="2,-5,2,5" WidthRequest="150" ReturnType="Next"
                   HorizontalOptions="FillAndExpand" Keyboard="Numeric" />
        <Label x:Name="UnitError" Margin="2,-10,2,5" TextColor="Red" IsVisible="false" FontAttributes="Italic" />

        <Label Text="Vendor Name" Margin="2,-10" FontAttributes="Bold" />
        <Picker x:Name="VendorName" Margin="2,-5,2,5" ItemsSource="{Binding BindVendorList}" 
                ItemDisplayBinding="{Binding VendorName}" 
                SelectedItem="{Binding BindSelectedVendor,Mode=TwoWay}" 
                Title="{Binding BindCommonDisplayName.PickerTitleDisplayName}" HorizontalOptions="FillAndExpand" />
        <Label x:Name="VendorIDError" Margin="2,-10,2,5" TextColor="Red" IsVisible="false" FontAttributes="Italic" />


        <Label Text="Receiving Date" Margin="2,-12" FontAttributes="Bold" />

        <DatePicker x:Name="PickerRecvDate" Margin="2,-5,2,5" Date="{Binding BindProductInvModel.ReceivingDate,Mode=TwoWay}" 
                    HorizontalOptions="FillAndExpand" Format="dd-MM-yyyy"  />
     
        <Label Text="Price" Margin="2,-12" FontAttributes="Bold" />
        <Entry x:Name="Price"  Text="{Binding BindProductInvModel.Price}" Unfocused="Entry_Unfocused" Focused="Entry_Focused"
                   Margin="2,-5,2,5" WidthRequest="150" ReturnType="Next"
                   HorizontalOptions="FillAndExpand" Keyboard="Numeric" />
        <Label x:Name="PriceError" Margin="2,-10,2,5" 
               TextColor="Red" IsVisible="false" FontAttributes="Italic" />


        <Label Text="Fair" Margin="2,-12" FontAttributes="Bold" />
        <Entry x:Name="Fair"  Text="{Binding BindProductInvModel.Fair}" Unfocused="Entry_Unfocused" Focused="Entry_Focused"
                   Margin="2,-5,2,5" WidthRequest="150" ReturnType="Next"
                   HorizontalOptions="FillAndExpand" Keyboard="Numeric" />
        <Label x:Name="FairError" Margin="2,-10,2,5" 
               TextColor="Red" IsVisible="false" FontAttributes="Italic" />


        <Label Text="OtherCharges" Margin="2,-12" FontAttributes="Bold" />
        <Entry x:Name="OtherCharges" Text="{Binding BindProductInvModel.OtherCharges}" Unfocused="Entry_Unfocused" Focused="Entry_Focused"
                   Margin="2,-5,2,5" WidthRequest="150" ReturnType="Next"
                   HorizontalOptions="FillAndExpand" Keyboard="Numeric" />
        <Label x:Name="OtherChargesError" Margin="2,-10,2,5" 
               TextColor="Red" IsVisible="false" FontAttributes="Italic" />


        <Label Text="Total" 
               Margin="2,-12" FontAttributes="Bold" />
        <Entry Text="{Binding BindProductInvModel.Total}"
                   Margin="2,-5,2,5" WidthRequest="150" ReturnType="Next" IsEnabled="False"
                   HorizontalOptions="FillAndExpand" Keyboard="Numeric" />
        <Label x:Name="TotalError" Margin="2,-10,2,5" 
               TextColor="Red" IsVisible="false" FontAttributes="Italic" />

  </StackLayout>
   
    </StackLayout>
    
    
</ScrollView>
  <StackLayout>

            <Grid HorizontalOptions="FillAndExpand" Margin="2,-12">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
         </Grid.ColumnDefinitions>

        <Button Text="Save" x:Name="BtnSave" 
                    HorizontalOptions="FillAndExpand" CornerRadius="10" 
                    BorderWidth="2" BackgroundColor="#ff6633" TextColor="#fff" 
                    Margin="2" Grid.Column="0" Grid.Row="0" Command="{Binding SaveCommand}" />

        <Button Text="Clear" x:Name="BtnClear" HorizontalOptions="FillAndExpand" 
                    CornerRadius="10" BorderWidth="2" BackgroundColor="#bfbfbf" 
                    TextColor="#fff" Margin="2" Grid.Column="1" Grid.Row="0" Command="{Binding ClearCommand}" />
    </Grid>

        </StackLayout>

</StackLayout>

Answered By – Wendy Zang – MSFT

Answer Checked By – Gilberto Lyons (Easybugfix Admin)

Leave a Reply

(*) Required, Your email will not be published