在Xamarin.Forms上居中一个Activityindicator

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>

这是代码的开始：

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;
    }
}

希望它有所帮助。

Answer 3

在页面的xaml中，添加如下所示的活动指示器表单组件

<ActivityIndicator x:Name="activityMonitor" IsRunning="{Binding IsBusy}" 
   VerticalOptions="Center" HorizontalOptions="Center" Color="Red" />

在您的xaml代码后面。在页面的构造器中添加以下内容：

public partial class LoginPage : ContentPage
{
    public LoginPage()
    {
        InitializeComponent();

        //This will initialize your activity inidicator and set busy to false
        this.activityMonitor.BindingContext = this;
        this.IsBusy = false;
    }
...
}

现在在您的方法中： 例如：

public void Login_Clicked(object sender, System.EventArgs e)
{
    this.IsBusy = true;
    //Login logic. //call web service
    //Finished processing.  Set isBusy to false;

    this.IsBusy = false;
}