在Xamarin.Forms上居中一个Activityindicator

Question

我有上面的XAML代码,我试图在单击Button后将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应该运行.

网格中发生的是网格中的所有控件默认采用0 Grid.Column和Grid.Row0.所以所有控件都是另一个.

编辑:

如果您尝试使用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;
    }
}

希望能帮助到你.