Xamarin 表单中 ViewBox 的替代方案

Question

Xamarin 中的 ViewBox 是否有任何替代方法，我可以在其中保持图像的纵横比？

我正在将我的 Windows Phone 应用程序转换为 Xamarin Forms。我的大部分屏幕都有可点击的图像，我在其中捕获图像部分的 X Y 坐标。我将所有图像都放在 ViewBox 中以保持其纵横比，这样无论屏幕尺寸/分辨率如何，我都能获得相同的图像 x y 位置。

我也愿意使用 Xamarin.IOS 中的任何本机控件执行此操作。

Answer 1

很遗憾，Xamain.forms 中的BoxView 与 WP 中的同名不同。

您需要的是RelativeLayout，它有点复杂但很灵活。当应用程序在不同尺寸的屏幕上运行时，控件将根据您的约束进行调整。

例如：

<RelativeLayout>
    <Image BackgroundColor="Red" Source="Icon-76.png" Aspect="Fill" x:Name="redBox"
        RelativeLayout.XConstraint="{ConstraintExpression 
            Type=RelativeToParent,
            Property=Width,
            Factor=0.05,
            Constant=0}"
        RelativeLayout.YConstraint="{ConstraintExpression 
            Type=RelativeToParent,
            Property=Y,
            Factor=1,
            Constant=20}"
        RelativeLayout.WidthConstraint="{ConstraintExpression
            Type=RelativeToParent,
            Property=Width,
            Factor=.6,
            Constant=0}"
        RelativeLayout.HeightConstraint="{ConstraintExpression
            Type=RelativeToParent,
            Property=Height,
            Factor=.6,
            Constant=0}" />
</RelativeLayout>

RelativeLayout.XConstraint 和 RelativeLayout.YConstraint 定位控件的 X、Y 坐标。

RelativeLayout.WidthConstraint 和 RelativeLayout.HeightConstraint 用于为控件添加宽度/高度约束。

示例中此图像的 (x,y) 是 ((5% of Parent Width), 20) 相对于父级。它的宽度或高度是父级的 60%。当然，您可以通过 Type 和 ElementName 将其设置为相对于其他视图，如下所示：

RelativeLayout.XConstraint="{ConstraintExpression 
            Type=RelativeToView,
            ElementName=redBox,
            Property=Width,
            Factor=1,
            Constant=0}"

约束表达式：

Type – 约束是相对于父视图还是相对于另一个视图。

属性 – 使用哪个属性作为约束的基础。

因素 – 应用于属性值的因素。

Constant – 用作值偏移量的值。

ElementName – 约束相关的视图的名称。

您可以设置 Aspect 来为您的图像找到合适的显示方式。

<Image Source="Icon-76.png" Aspect="Fill"/>

AspectFill 缩放图像以填充视图。有些部分可能会被剪裁以填充视图。

AspectFit 缩放图像以适应视图。有些部分可能是空的（字母装箱）。

填充 缩放图像，使其完全填充视图。 X 和 Y 的缩放比例可能不一致。