位于ContentView中心的ContentView

Question

我有个问题。我正在尝试创建一个页面，它有一个透明背景的覆盖(ContentView)。在那个ContentView中，我想在屏幕中央加入一个ProgressBar。ContentView必须填满整个页面。

我试过这个：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="MyApp.LoadingPreview"
             BackgroundColor="#212121">
    <ContentPage.Content>
        <RelativeLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" x:Name="RelativeLoadingLayout">
        </RelativeLayout>
    </ContentPage.Content>
</ContentPage>

在这方面：

ContentView LoadingView = new ContentView
{
    VerticalOptions = LayoutOptions.CenterAndExpand,
    HorizontalOptions = LayoutOptions.CenterAndExpand,
    BackgroundColor = Color.Red
};

ProgressBar progressBar = new ProgressBar
{
    ProgressColor = Color.FromHex("#3897F0"),
    HorizontalOptions = LayoutOptions.FillAndExpand,
    HeightRequest = 30
};

RelativeLoadingLayout.Children.Add(LoadingView,
        Constraint.RelativeToParent((parent) =>
        {
            return (0);
        }),
        Constraint.RelativeToParent((parent) =>
        {
            return ((.5 * parent.Height) - (30/2));
        }),
        Constraint.RelativeToParent((parent) =>
        {
            return (parent.Width - (2 * 15));
        }), Constraint.RelativeToParent((parent) =>
        {
            return (parent.Height);
        }));

LoadingView.Content = progressBar;

但这会导致底部中心有一个很小的ContentView。

我做错了什么？

Answer 1

您的意思是希望LoadingView填充整个页面，而progressBar位于页面的中心位置？

如果是，您可以更改如下：

ContentView LoadingView = new ContentView
        {
            VerticalOptions = LayoutOptions.FillAndExpand,
            HorizontalOptions = LayoutOptions.FillAndExpand,
            BackgroundColor = Color.Red
        };

        ProgressBar progressBar = new ProgressBar
        {
            ProgressColor = Color.FromHex("#3897F0"),
            HorizontalOptions = LayoutOptions.FillAndExpand,
            HeightRequest = 30
        };

        RelativeLoadingLayout.Children.Add(LoadingView,
                Constraint.RelativeToParent((parent) =>
                {
                    return (0);
                }),
                Constraint.RelativeToParent((parent) =>
                {
                    return (0);
                }),
                Constraint.RelativeToParent((parent) =>
                {
                    return parent.Width;
                }), Constraint.RelativeToParent((parent) =>
                {
                    return parent.Height;
                }));

LoadingView.Content = progressBar;        

Answer 2

使用绝对布局，您的问题将得到解决。

<ContentView x:Name="overlay" AbsoluteLayout.LayoutBounds="0, 0, 1, 1"  AbsoluteLayout.LayoutFlags="All" IsVisible="{Binding isWorking}" BackgroundColor="#C0808080" Padding="0">
    <ProgressBar  ProgressColor="#3897F0" HeightRequest=“30"   IsVisible="True"  HorizontalOptions="FillAndExpand" VerticalOptions="CenterAndExpand"/>
</ContentView>