你如何在屏幕中心放置一个正方形（使用 xaml）答案

【问题标题】：How do you put a square in center of screen(using xaml)你如何在屏幕中心放置一个正方形（使用 xaml）
【发布时间】：2016-06-25 22:59:07
【问题描述】：

我不明白为什么这么难。 relativelayout上没有anchor吗？

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

这么简单。

但到目前为止无法弄清楚使用 xaml。你能帮帮我吗？

【问题讨论】：

标签： xaml xamarin xamarin.forms

【解决方案1】：

最简单的 XAML 解决方案是（受@Funk 启发）：

更新：正如 cmets 中所说，这现在适用于 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));
    }
}

结果：

【讨论】：

对于第一个示例，这更简洁：第一个例子似乎也不适用于 Android。
我喜欢更简洁的方式，但它仍然无法在 android 上运行。
嗨，@jzeferino。我非常感谢您的回答和示例。这很有帮助，很高兴知道。我投了赞成票。再次感谢。
感谢@jzeferino 和Funk。这对我帮助很大。简单的方式，它在 iOS 上工作（似乎像 Android 上的总线）和困难的方式，它不是纯 XAML，但它是最好和足够好的答案。再次感谢。
@jzeferino Forms 中的错误现已修复，因此这也适用于 Android :)

【解决方案2】：

我不了解 Xamarin，但在 Xaml 中，您可以使用 squares ActualWidth 属性将比例宽度“转换”为与设备无关的像素。

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition Width="8*"/>
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition Height="Auto"/> 
        <RowDefinition/>
    </Grid.RowDefinitions>
    <Border Name="square"
            BorderBrush="Red" BorderThickness="1" Grid.Column="1" Grid.Row="1"
            Height="{Binding ElementName=square, Path=ActualWidth}"
            />
</Grid>

编辑

尝试使用Xamarin Binding Basics 转换语法。

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition Width="8*"/>
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition Height="Auto"/> 
        <RowDefinition/>
    </Grid.RowDefinitions>
    <BoxView x:Name="square"
             BindingContext="{x:Reference square}"
             Grid.Column="1" Grid.Row="1" BackgroundColor="Red" 
             Height="{Binding ActualWidth}"
             />
</Grid>

【讨论】：

这在 xamarin 中不起作用，因为我们没有绑定 ElementName。名称、Borderbrush 等与 Xamarin Forms XAML 不兼容。
@jzeferino Xamarin 是否支持绑定中的 RelativeSource？
不是直接的，但似乎可以使用行为。请观看此线程并告诉我您的想法。 forums.xamarin.com/discussion/25677/… 感谢您的帖子，我能够在 XAML 中实现这一点。请参阅下面的答案。
@jzeferino 为 Xamarin 改进了它。谢谢你们。
@BrightLee 不客气。我不熟悉 Xamarin，因为我从未使用过它。但我很确定你们会弄清楚的。

【解决方案3】：

由于性能问题，不建议使用 relativeLayout。对于您的问题，我建议使用像下面这样的 Grid

 <Grid>
    <Grid.ColumnDefinitions>
      <ColumnDefinition />
      <ColumnDefinition Width="8*"/>
      <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
      <RowDefinition/>
      <RowDefinition Height="8*"/>
      <RowDefinition/>
    </Grid.RowDefinitions>
    <BoxView BackgroundColor="Red" Grid.Column="1" Grid.Row="1"/>

</Grid>

【讨论】：

你好勇敢的心。谢谢。但它不是方形的。它是矩形的。