Как сделать, чтобы ActivityIndicator накладывал изображение на весь экран?

Question

У меня есть StackLayout и несколько элементов внутри (кнопки, тексты и т. Д.).
Я хочу, чтобы ActivityIndicator перекрывал весь экран и не позволял емусделайте что-нибудь с этими элементами.
Я поместил ActivityIndicator в StackLayout , но обернул его AbsoluteLayout, думая, что AbsoluteLayout может легко перекрывать все:

<StackLayout>
    <AbsoluteLayout>
        <ActivityIndicator ... />
    </AbsoluteLayout>
    <...other elements...> 
</StackLayout>

Вместо этого индикатор активности отображается в верхней части StackLayout, а другие элементы доступны для воздействия. Я новичок в Xamarin и раскладках, что я делаю не так? Все образцы в Интернете имеют один ActivityIndicator на страницу ...

Answer 1

Лучше сказать, что дети AbsoluteLayout могут легко перекрывать друг друга. Точно так же, как StackLayout позволяет складывать элементы управления внутри, вертикально или горизонтально, AbsoluteLayout позволяет позиционировать элементы управления внутри, используя абсолютные или пропорциональные значения, поэтому, если два элемента управления имеют одинаковый набор абсолютного позиционирования, они будут перекрывать 100%.

Следовательно, вы хотите обернуть ваш StackLayout и еще один StackLayout, у которого ваш ActivityIndicator внутри AbsoluteLayout, используя пропорциональный размер, например:

<AbsoluteLayout>
    <StackLayout
        x:Name="mainLayout"
        AbsoluteLayout.LayoutBounds="0,0,1,1"
                 AbsoluteLayout.LayoutFlags="All" >
        <Label Text="Welcome to Xamarin.Forms!"
               HorizontalOptions="Center"
               VerticalOptions="CenterAndExpand" />
        <Button Text="Do Something"
                Clicked="DoSomethingBtn_Clicked" />
    </StackLayout>
    <StackLayout
        x:Name="aiLayout"
        IsVisible="False"
        AbsoluteLayout.LayoutBounds="0,0,1,1"
        AbsoluteLayout.LayoutFlags="All"
        BackgroundColor="Gray" Opacity="0.5">
        <ActivityIndicator
            x:Name="ai"
            IsRunning="False"
            HorizontalOptions="CenterAndExpand"
            VerticalOptions="CenterAndExpand"
            Color="Black"/>
    </StackLayout>

</AbsoluteLayout>

Выше приведены дваStackLayouts для того, чтобы оба заняли полный размер родительского контейнера AbsoluteLayout, который предположительно является Page. StackLayout с индикатором изначально скрыт. В коде страницы для приведенного выше примера я показываю второй StackLayout, запускаю индикатор активности и показываю его в течение 2 секунд, а затем скрываю снова:

    private async void DoSomethingBtn_Clicked(object sender, EventArgs e)
    {
        ai.IsRunning = true;
        aiLayout.IsVisible = true;
        await Task.Delay(2000);
        aiLayout.IsVisible = false;
        ai.IsRunning = false;

    }

Вот как это выглядит:

И поскольку второй StackLayout полностью покрывает первый, ни один из элементов управления в первом StackLayout не активируется.

Может быть стоит просмотреть документы для AbsoluteLayout, чтобы понять AbsoluteLayout.LayoutBounds и AbsoluteLayout.LayoutFlags: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/absolute-layout

Answer 2

Если вы хотите «перекрывать», вы должны быть вне StackLayout. Сетка является наиболее распространенным элементом управления для этого:

<Grid>
  <StackLayout>
        <...other elements...> 
  </StackLayout>
  <ActivityIndicator ... />
</Grid>