在Xamarin.Forms上居中活動指示器

Question

我有上面的XAML代碼，我試圖在點擊按鈕後將一個ActivityIndi​​cator放在頁面的中心。我嘗試使用網絡的例子，但沒有成功。

<ScrollView> 
    <StackLayout> 
    <StackLayout Padding="30" Spacing="2" VerticalOptions="CenterAndExpand" HorizontalOptions="FillAndExpand"> 
     <Label x:Name="lblUsuario" Text="ID do Usuário" TextColor="#555" FontSize="20" FontAttributes="Bold"/> 
     <Entry x:Name="EntUsuario" Keyboard="Numeric" Placeholder="Digite usuário" PlaceholderColor="#CCC" FontSize="20" TextColor="#555" /> 
     <Label x:Name="lblSenha" Text="Senha de acesso" TextColor="#555" FontSize="20" FontAttributes="Bold"/> 
     <Entry x:Name="EntSenha" Placeholder="Digite sua senha" Keyboard="Default" IsPassword="True" FontSize="20" PlaceholderColor="#CCC" TextColor="#555" /> 
    </StackLayout> 
    <StackLayout Padding="30" VerticalOptions="CenterAndExpand" HorizontalOptions="FillAndExpand"> 
     <Button x:Name="BtnLogin" Text="Login" BorderColor="#CB9600" BackgroundColor="#F4B400" /> 
    </StackLayout> 
    </StackLayout> 
</ScrollView> 

這是代碼的beggining：

public partial class LoginPage : ContentPage 
    { 
     public LoginPage() 
     { 
      IsBusy = false; 
      InitializeComponent(); 

      int contadorErroLogin = 0; 
      string result = null; 

      BtnLogin.Clicked += async (sender, e) => 
       { 
        IsBusy = true; 

當開始IsBusy = false，但屏幕看起來是真實的。

Answer 1

嘗試使用這樣的：

<AbsoluteLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"> 

     <StackLayout AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1"> 
      <ScrollView> 
       <StackLayout> 
        <StackLayout Padding="30" Spacing="2" VerticalOptions="CenterAndExpand" HorizontalOptions="FillAndExpand"> 
        <Label x:Name="lblUsuario" Text="ID do Usuário" TextColor="#555" FontSize="20" FontAttributes="Bold"/> 
        <Entry x:Name="EntUsuario" Keyboard="Numeric" Placeholder="Digite usuário" PlaceholderColor="#CCC" FontSize="20" TextColor="#555" /> 
        <Label x:Name="lblSenha" Text="Senha de acesso" TextColor="#555" FontSize="20" FontAttributes="Bold"/> 
        <Entry x:Name="EntSenha" Placeholder="Digite sua senha" Keyboard="Default" IsPassword="True" FontSize="20" PlaceholderColor="#CCC" TextColor="#555" /> 
       </StackLayout> 
       <StackLayout Padding="30" VerticalOptions="CenterAndExpand" HorizontalOptions="FillAndExpand"> 
        <Button x:Name="BtnLogin" Text="Login" BorderColor="#CB9600" BackgroundColor="#F4B400" /> 
       </StackLayout> 
      </StackLayout> 
      </ScrollView> 

     </StackLayout> 

     <StackLayout IsVisible="{Binding IsBusy}" Padding="12" 
       AbsoluteLayout.LayoutFlags="PositionProportional" 
       AbsoluteLayout.LayoutBounds="0.5,0.5,-1,-1"> 

     <ActivityIndicator IsRunning="{Binding IsBusy}" Color ="#80000000"/> 

     <Label Text="Loading..." HorizontalOptions="Center" TextColor="White"/> 

     </StackLayout> 

</AbsoluteLayout> 

Answer 2

您可以嘗試封裝的ScrollViewer一個Grid內，在你ScrollViewer插入ÀctivityIndi​​cator`垂直和水平居中。

像這樣：

<Grid> 
    <ScrollView> 
     <StackLayout> 
     <StackLayout Padding="30" Spacing="2" VerticalOptions="CenterAndExpand" HorizontalOptions="FillAndExpand"> 
      <Label x:Name="lblUsuario" Text="ID do Usuário" TextColor="#555" FontSize="20" FontAttributes="Bold"/> 
      <Entry x:Name="EntUsuario" Keyboard="Numeric" Placeholder="Digite usuário" PlaceholderColor="#CCC" FontSize="20" TextColor="#555" /> 
      <Label x:Name="lblSenha" Text="Senha de acesso" TextColor="#555" FontSize="20" FontAttributes="Bold"/> 
      <Entry x:Name="EntSenha" Placeholder="Digite sua senha" Keyboard="Default" IsPassword="True" FontSize="20" PlaceholderColor="#CCC" TextColor="#555" /> 
     </StackLayout> 
     <StackLayout Padding="30" VerticalOptions="CenterAndExpand" HorizontalOptions="FillAndExpand"> 
      <Button x:Name="BtnLogin" Text="Login" BorderColor="#CB9600" BackgroundColor="#F4B400" /> 
     </StackLayout> 
     </StackLayout> 
    </ScrollView> 

    <ActivityIndicator x:Name="activityIndicator" IsRunning="False" VerticalOptions="Center" HorizontalOptions="Center" /> 
    </Grid> 

這種觀點背後的代碼：

public MainPage() 
{ 
    this.InitializeComponent(); 
    this.BtnLogin.Clicked += BtnLogin_Clicked; 
} 

private void BtnLogin_Clicked(object sender, EventArgs e) 
{ 
    this.activityIndicator.IsRunning = true; 
    // TODO: do stuff here 
} 

當我點擊BtnLogin我說，activityIndi​​cator應該運行。

網格中發生的情況是網格內的所有控件默認採用Grid.Column和Grid.Row 0。所以所有的控件都是另一個控件。

編輯：

如果你想有一個MVVM方法，你可以定義當前視圖具有BindingContext

查看：

<Grid> 
    <ScrollView> 
     <StackLayout> 
     <StackLayout Padding="30" Spacing="2" VerticalOptions="CenterAndExpand" HorizontalOptions="FillAndExpand"> 
      <Label x:Name="lblUsuario" Text="ID do Usuário" TextColor="#555" FontSize="20" FontAttributes="Bold"/> 
      <Entry x:Name="EntUsuario" Keyboard="Numeric" Placeholder="Digite usuário" PlaceholderColor="#CCC" FontSize="20" TextColor="#555" /> 
      <Label x:Name="lblSenha" Text="Senha de acesso" TextColor="#555" FontSize="20" FontAttributes="Bold"/> 
      <Entry x:Name="EntSenha" Placeholder="Digite sua senha" Keyboard="Default" IsPassword="True" FontSize="20" PlaceholderColor="#CCC" TextColor="#555" /> 
     </StackLayout> 
     <StackLayout Padding="30" VerticalOptions="CenterAndExpand" HorizontalOptions="FillAndExpand"> 
      <Button x:Name="BtnLogin" Text="Login" BorderColor="#CB9600" BackgroundColor="#F4B400" /> 
     </StackLayout> 
     </StackLayout> 
    </ScrollView> 

    <!-- The '{Binding IsBusy}' is going to search the 'IsBusy' property inside the 'BindingContext'. In our case, is the code behind --> 
    <ActivityIndicator x:Name="activityIndicator" IsRunning="{Binding IsBusy}" VerticalOptions="Center" HorizontalOptions="Center" /> 
    </Grid> 

後面的代碼：

public partial class MainPage : ContentPage 
{ 
    public MainPage() 
    { 
     this.InitializeComponent(); 

     // Define the binding context 
     this.BindingContext = this; 

     // Set the IsBusy property 
     this.IsBusy = false; 

     // Login button action 
     this.BtnLogin.Clicked += BtnLogin_Clicked; 
    } 

    private void BtnLogin_Clicked(object sender, EventArgs e) 
    { 
     this.IsBusy = true; 
    } 
} 

希望它有幫助秒。