xaml - 你如何在屏幕中央放置一个正方形(使用 xaml)

Question

我不明白为什么这这么难。
相对布局上没有 anchor 吗？

我想把正方形放在屏幕中央。
正方形的宽度是屏幕宽度的 80%。
正方形的高度与宽度相同。

很简单。

但到目前为止无法弄清楚与 xaml 一起使用。
你可以帮帮我吗？

Answer 1

最简单的 XAML 解决方案是(受@Funk 启发):

更新:正如评论中所说，这现在适用于 Android 和 iOS(修复了 Xamarin.Android 错误)

<Grid>
<Grid.ColumnDefinitions>
    <ColumnDefinition />
    <ColumnDefinition Width="8*" />
    <ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
    <RowDefinition />
    <RowDefinition Height="Auto" />
    <RowDefinition />
</Grid.RowDefinitions>
<BoxView x:Name="thebox" Grid.Column="1" Grid.Row="1" BackgroundColor="Aqua" HeightRequest="{Binding Source={x:Reference thebox}, Path=Width}" />
</Grid>

结果:



艰难的方式(适用于 Android 和 iOS):

假设您想使用 BoxView，我为您的案例制定了一个临时解决方案。 .
我已延长 BoxView并强制 wight 与 width 相同。您可以使用它来获得其他结果。

XAML 将如下所示:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="forms_pcl.MyPage" xmlns:local="clr-namespace:forms_pcl;assembly=forms_pcl">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition Width="8*" />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition Height="8*" />
            <RowDefinition />
        </Grid.RowDefinitions>
        <local:SquareBox HorizontalOptions="CenterAndExpand" VerticalOptions="Center" BackgroundColor="Aqua" Grid.Column="1" Grid.Row="1" />
    </Grid>
</ContentPage>

注意:旗帜 HorizontalOptions="CenterAndExpand" VerticalOptions="Center"强制执行 GetSizeRequest被称为高度和宽度。

SquareBox 将如下所示:

public class SquareBox : BoxView
{
    public override SizeRequest GetSizeRequest(double widthConstraint, double heightConstraint)
    {
        return new SizeRequest(new Size(widthConstraint, widthConstraint), new Size(widthConstraint, widthConstraint));
    }
}

结果: