第十四章：绝对布局（六）

叠加

在AbsoluteLayout中重叠子项的能力有一些有趣且有用的应用程序，其中包括用有时称为叠加层的东西掩盖整个用户界面的能力。也许您的页面正在执行冗长的工作，并且您不希望用户在作业完成之前与页面进行交互。您可以在页面上放置半透明叠加层，也可以显示ActivityIndicator或ProgressBar。
这是一个名为SimpleOverlay的程序，它演示了这种技术。 XAML文件以填充整个页面的AbsoluteLayout开头。 AbsoluteLayout的第一个子节点是Stack？Layout，您也想要填充页面。但是，StackLayout上填充的默认HorizontalOptions和VerticalOptions设置不适用于AbsoluteLayout的子项。相反，StackLayout通过使用AbsoluteLayout.LayoutBounds和AbsoluteLayout.LayoutFlags附加的可绑定属性来填充AbsoluteLayout：

<ContentPage xmlns=""
             xmlns:x=""
             x:Class="SimpleOverlay.SimpleOverlayPage">
    <AbsoluteLayout>
        <StackLayout AbsoluteLayout.LayoutBounds="0, 0, 1, 1"
                     AbsoluteLayout.LayoutFlags="All">
            <Label Text=
"This might be a page full of user-interface objects except
that the only functional user-interface object on the page
is a Button."
                   FontSize="Medium"
                   VerticalOptions="CenterAndExpand"
                   HorizontalTextAlignment="Center" />
            <Button Text="Run 5-Second Job"
                    FontSize="Large"
                    VerticalOptions="CenterAndExpand"
                    HorizontalOptions="Center"
                    Clicked="OnButtonClicked" />
            <Button Text="A Do-Nothing Button"
                    FontSize="Large"
                    VerticalOptions="CenterAndExpand"
                    HorizontalOptions="Center" />
            <Label Text=
"This continues the page full of user-interface objects except
that the only functional user-interface object on the page
is the Button."
                   FontSize="Medium"
                   VerticalOptions="CenterAndExpand"
                   HorizontalTextAlignment="Center" />
        </StackLayout>

        <!-- Overlay -->
        <ContentView x:Name="overlay"
                     AbsoluteLayout.LayoutBounds="0, 0, 1, 1"
                     AbsoluteLayout.LayoutFlags="All"
                     IsVisible="False"
                     BackgroundColor="#C0808080"
                     Padding="10, 0">
            <ProgressBar x:Name="progressBar"
                         VerticalOptions="Center" />

        </ContentView>
    </AbsoluteLayout>
</ContentPage>

AbsoluteLayout的第二个子项是ContentView，它也填充AbsoluteLayout并且基本上位于StackLayout之上。但是，请注意IsVisible属性设置为False，这意味着此ContentView及其子项不参与布局。 Con？tentView仍然是AbsoluteLayout的子代，但是当布局系统调整大小并渲染页面的所有元素时，它就会被跳过。
此ContentView是叠加层。当IsVisible设置为True时，它会阻止用户对其下方视图的输入。 BackgroundColor设置为半透明灰色，ProgressBar在其中垂直居中。
ProgressBar类似于没有拇指的滑块。 ProgressBar始终是水平定向的。除非您还设置了WidthRequest属性，否则不要将ProgressBar的HorizontalOptions属性设置为Start，Center或End。
程序可以通过将ProgressBar的Progress属性设置为0到1之间的值来指示进度。这在程序中唯一功能Button的Clicked处理程序中进行了演示。此处理程序模拟在代码中执行的冗长作业，该计时器确定何时经过五秒：

public partial class SimpleOverlayPage : ContentPage
{
    public SimpleOverlayPage()
    {
        InitializeComponent();
    }
    void OnButtonClicked(object sender, EventArgs args)
    {
        // Show overlay with ProgressBar.
        overlay.IsVisible = true;
        TimeSpan duration = TimeSpan.FromSeconds(5);
        DateTime startTime = DateTime.Now;
        // Start timer.
        Device.StartTimer(TimeSpan.FromSeconds(0.1), () =>
        {
            double progress = (DateTime.Now - startTime).TotalMilliseconds /
            duration.TotalMilliseconds;
            progressBar.Progress = progress;
            bool continueTimer = progress < 1;
            if (!continueTimer)
            {
                // Hide overlay.
                overlay.IsVisible = false;
            }
            return continueTimer;
        });
    }
}

Clicked处理程序首先将overlay的IsVisible属性设置为true，从而重现覆盖及其子ProgressBar，并防止与下面的用户界面进一步交互。 计时器设置为十分之一秒，并根据已用时间计算ProgressBar的新Progress属性。 当五秒钟结束时，再次隐藏覆盖并且计时器回调返回false。
这是覆盖页面的覆盖层和正在进行的漫长工作的样子：

覆盖不必限于ProgressBar或ActivityIndicator。 您可以包含“取消”按钮或其他视图。