Xamarin.Forms-要素をページの中央に配置する方法

Question

コンテンツ（ユーザー名、パスワード、ログインボタン）にStackLayoutを使用したログインページがあります。ユーザーがログインボタンをクリックした後、ページの絶対的な中心にある既存のStackLayoutコンテンツの上に「読み込み」ブロックを設定します。いくつかの迷惑な理由により、これは簡単ではありません。それは簡単で一般的なことのようです-これはどのように行われますか？

Answer 1

正しいタグ AbsoluteLayout を使用しました。

var loadingView = new StackLayout
{
    Padding = 6,
    Orientation = StackOrientation.Horizontal,
    BackgroundColor = Color.Gray,
    Children =
    {
        new ActivityIndicator
        {
            Color = Color.White,
            IsRunning = true,
            VerticalOptions = LayoutOptions.Center,
            WidthRequest = 20,
            HeightRequest = 20
        },
        new Label 
        {
            TextColor = Color.White,
            Text = "Loading...",
            VerticalOptions = LayoutOptions.Center
        }
    }
};

var layout = new AbsoluteLayout
{
    Padding = 0,
    HorizontalOptions = LayoutOptions.FillAndExpand,
    VerticalOptions = LayoutOptions.FillAndExpand,
    Children =
    {
        {
            new BoxView {Color = Color.Green}, 
            new Rectangle(0, 0, 1, 1), 
            AbsoluteLayoutFlags.All
        },
        {
            loadingView, 
            new Rectangle(0.5, 0.5, -1, -1), 
            AbsoluteLayoutFlags.PositionProportional
        }
    }
};

またはXAML：

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.Microsoft.com/winfx/2009/xaml" x:Class="ArtiSO.LoadingPage">
    <ContentPage.Content>
        <AbsoluteLayout Padding="0" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
            <BoxView Color="Lime" AbsoluteLayout.LayoutBounds="0, 0, 1, 1" AbsoluteLayout.LayoutFlags="All" />
            <StackLayout Padding="6" Orientation="Horizontal" BackgroundColor="Gray" AbsoluteLayout.LayoutBounds="0.5, 0.5, -1, -1" AbsoluteLayout.LayoutFlags="PositionProportional">
                <ActivityIndicator Color="White" IsRunning="true" VerticalOptions="Center" WidthRequest="20" HeightRequest="20" />
                <Label TextColor="White" Text="Loading..." VerticalOptions="Center" />
            </StackLayout>
        </AbsoluteLayout>
    </ContentPage.Content>
</ContentPage>

結果：

Answer 2

ActivityIndi​​catorを中央に配置するには、次のグリッドヒントを試すことができます。

<ContentPage.Content>
    <Grid>
        <StackLayout>
            <Label Text="All content view in this StackLayout :D" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" />
        </StackLayout>
        <ActivityIndicator
            Color="#006699"
            HorizontalOptions="CenterAndExpand"
            VerticalOptions="CenterAndExpand"
            IsVisible="True"
            IsRunning="True" />
    </Grid>
</ContentPage.Content>