xamarinlayoutgridbusyindicator

Xamarin - make appear element over Grid Form


I have a form maked using a Grid inside a ContentPage like:

<ContentPage>
<Grid RowSpacing="0" 
           >
    <Grid.RowDefinitions>
        <RowDefinition Height="90" />
        <RowDefinition Height="1" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>


    <Grid BackgroundColor="{StaticResource TopBackground}" Padding="16" RowSpacing="4" ColumnSpacing="0" 
          >
        <Grid.RowDefinitions>
            <RowDefinition Height="4*" />
            <RowDefinition Height="6*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>


        <Button  Text="BUTTON"
                    FontSize="20" Grid.Row="1" Grid.Column="1"
             />  
    </Grid>


    <BoxView Grid.Row="1" HeightRequest="1" BackgroundColor="{StaticResource ColorSeparador}" HorizontalOptions="FillAndExpand" />

    <ScrollView Grid.Row="2">

        <StackLayout Orientation="Vertical" Margin="16" Spacing="4"
                     >
            <local:ContactEntry HeightRequest="35"  Keyboard="Email" x:Name="emailEntry" "/>

            <Button Margin="0,30,0,50" Grid.Row="9" Text="Send" 
                x:Name="BtnEntrar" Clicked= "onEnviarClicked" B/>  
        </StackLayout>

    </ScrollView>


</Grid>
</ContentPage>

My question is where and how position on center and over the forms my custom Busy indicator element (avoid covering entire page) that it will appear when user sends form?

     <custom:MyAct
         WidthRequest="150" HeightRequest="150" 
      />  

Solution

  • If you want your custom indicator to be in the center and drawn over the rest of the content of the grid, just do this:

    <ContentPage>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="90" />
                <RowDefinition Height="1" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <!-- Your content here -->
            <custom:MyAct
                Grid.Row="0"
                Grid.RowSpan="3"
                WidthRequest="150"
                HeightRequest="150"
                VerticalOptions="Center"
                HorizontalOptions="Center" />  
        </Grid>
    </ContentPage>
    

    This way, since you have defined exactly 3 rows for the grid, your custom activity indicator will take as much space as the whole grid thanks to the property Grid.RowSpan="3". In addition, the indicator will appear over everything else in the grid because it is defined after it in the XAML code.

    To get it to work properly, remember to do the necessary binding to hide/show your custom activity indicator.