Xamarin XAML語言教程Xamarin.Forms中活動指示器的顯示隱藏

Xamarin XAML語言教程Xamarin.Forms中活動指示器的顯示隱藏

開發者除了可以在XAML中使用IsRunning屬性控制指示器的顯示隱藏外，還可以在程式碼隱藏檔案中使用IsRunning屬性控制指示器的顯示隱藏。這時，首先需要在XAML檔案中，使用x:Name屬性為活動指示器定義一個名稱，然後在程式碼隱藏檔案中透過定義的名稱對IsRunning屬性進行設定即可。

【示例12-2：ActivityIndicatorIsRunningTwo】以下將在程式碼隱藏檔案中控制活動指示器的顯示和隱藏。具體的操作步驟如下：

（1）MainPage.xaml檔案，編寫程式碼，對內容頁面進行佈局。程式碼如下：

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage xmlns=""

             xmlns:x=""

             xmlns:local="clr-namespace:ActivityIndicatorIsRunningTwo"

             x:Class="ActivityIndicatorIsRunningTwo.MainPage">

  <StackLayout Spacing="55"

               VerticalOptions="Center">

    <ActivityIndicator x:Name="activityIndicator" />

    <StackLayout Spacing="10">

      <Button x:Name="showButton"

              Text="ShowActivityIndicator"

              Clicked="OnShowActivityIndicator"/>

      <Button x:Name="hideButton"

              IsEnabled="False"

              Text="HideActivityIndicator"

              Clicked="OnHideActivityIndicator"/>

    </StackLayout>

  </StackLayout>

</ContentPage>

（2）開啟MainPage.xaml.cs檔案，編寫程式碼，實現透過按鈕控制活動指示器的顯示和隱藏功能。程式碼如下：

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Threading.Tasks;

using Xamarin.Forms;

namespace ActivityIndicatorIsRunningTwo

{

    public partial class MainPage : ContentPage

    {

        public MainPage()

        {

            InitializeComponent();

        }

        //顯示活動指示器

        void OnShowActivityIndicator(object sender, EventArgs args)

        {

            activityIndicator.IsRunning = true;

            showButton.IsEnabled = false;

            hideButton.IsEnabled = true;

        }

        //隱藏活動指示器

        void OnHideActivityIndicator(object sender, EventArgs args)

        {

            activityIndicator.IsRunning = false;

            showButton.IsEnabled = true;

            hideButton.IsEnabled = false;

        }

    }

}

此時執行程式，會看到如圖12.4~12.6所示的效果。當開發者輕拍ShowActivityIndicator按鈕，會看到活動指示器顯示了，並且進行活動，效果類似於圖12.7~12.9所示。

圖12.4 圖12.7   Android           圖12.5  圖12.8  iOS       圖12.6 圖12.9   Windows Phone

開發者除了可以為ActivityIndicator定義的IsRunning屬性直接賦布林值外，還可以透過資料繫結的方式為該屬性賦值，此時繫結的資料也一樣是返回布林型別的。

【示例12-3：ActivityIndicatorIsRunningThree】以下將實現載入網路影像的功能。程式碼如下：

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage xmlns=""

             xmlns:x=""

             xmlns:local="clr-namespace:ActivityIndicatorIsRunningThree"

             x:Class="ActivityIndicatorIsRunningThree.MainPage">

  <StackLayout>

    <Image x:Name="myImage"

Source="https://timgsa.baidu.com/timg?image&amp;quality=80&amp;size=b9999_10000&amp;sec=1487155536489&amp;di=cc531038dafb3b75d689fdd47a5a775c&amp;imgtype=0&amp;src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F1%2F57973400dbbf3.jpg"

         HeightRequest="480"

         WidthRequest="300"

         HorizontalOptions="Center"/>

    <ActivityIndicator x:Name="indicator"

                       BindingContext="{x:Reference Name=myImage}"

                       IsRunning="{Binding Path=IsLoading}"/>

  </StackLayout>

</ContentPage>

在此程式碼中，我們將ActivityIndicator屬性繫結到了Image的IsLoading屬性上。此時執行程式，會看到如圖12.10~12.12所示的效果。當影像載入完成後，會看到類似於圖12.13~12.15所示的效果。

圖12.10圖12.13  Android          圖12.11 圖12.14   iOS     圖12.12 圖12.15 Windows Phone