在 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>

这是代码的开头：

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 但屏幕似乎是 true 。

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