主页 / coding / 问题 / 79198355
Accepted
Al John
Asked: 2024-11-18 07:31:34 +0800 CST

如何在显示区域内将 MAUI 图像与纵横填充对齐？

  • 772

有没有办法在 .NET MAUI 8 中对齐/定位<Image/>其显示区域内Aspect="AspectFill"，或者有没有产生相同视觉效果的解决方法？

我试图获得一个宽大的显示区域，让高大的图像完全填满该区域，同时保持其纵横比。然后，图像应与其显示区域的顶部或底部对齐，因此只有图像的顶部或底部可见。输入图像的高度可能有所不同，但包装元素的高度是固定的，这就是我需要纵横比的原因。

<Border HeightRequest="100">
    <Image 
        Source="t-pose.png"
        Aspect="AspectFill"
        WidthRequest="128"/>
</Border>

完整图像：
全图

期望结果示例：
所需图像

期望结果示例 2：（
稍后添加图像）
在此处输入图片描述

image

3 个回答

  1. Best Answer

    您可以使用一种ScrollView解决方法：

    <Border HeightRequest="100">
    <ScrollView IsEnabled="False" VerticalScrollBarVisibility="Never">
        <Image
            Source="t_pose.png"
            Aspect="AspectFill"
            WidthRequest="128" />
    </ScrollView>
</Border>
    • 1

  2. 您需要“开始”对齐的图像，以填充容器。

    我的建议是：

    1. 将其从图像中删除。WidthRequest="128"
    2. 将图像放置在 VerticalStackLayout 内。
    3. 从图像的父级控制宽度。（它甚至可以是一个网格，包含边框、包含堆栈布局、包含图像。）

    如果你同意 Quan 的答案，并选择 ScrollView 作为替代品，你仍然必须删除 WidthRequest，然后应用VerticalOptions="Start"

    稍微解释一下为什么这不行：

    如果您的宽高被图片的高度覆盖，则宽度请求将起作用。只要有需要修剪的内容，它就会正确修剪。一旦图片的高度覆盖边框高度，您将开始从图片宽度进行修剪。（您不想这样做）。

    这就是为什么解决方案是开始对齐、不受限制、纵横填充的图像。

    • 1

  3. 除了 Stephen Quan 的回答（我接受了）之外，我还发现了一些“非法”的解决方法，也能够将图像底部对齐。

    <VerticalStackLayout Rotation="180">
    <ScrollView 
        VerticalScrollBarVisibility="Never"
        VerticalOptions="Start"
        HeightRequest="176"
        WidthRequest="128"
        IsEnabled="False">
        <Image 
            Source="t_pose.png"
            VerticalOptions="End"
            Aspect="AspectFill"
            WidthRequest="128"
            Rotation="180"/>
    </ScrollView>
</VerticalStackLayout>

    请注意，<ScrollView/>Quan 的答案中的 现已被包裹在父元素 中，该<VerticalStackLayout/>元素被上下旋转 180 度。然后，图像再旋转 180 度，使其恢复直立。

    这会诱使 ScrollView 切换上下方向，从而允许图像底部对齐，而不是只能将其对齐到顶部。当旋转 ScrollView 本身时，此方法不起作用，因为这会导致 ScrollView 出现错误，并且其内容会因某种原因变得不可见。ScrollView 必须包裹在旋转的父级内。

    但是，当图像的高度小于父级 ScrollView 时，图像将无法正确对齐，正如 HAH 的回答中提到的那样。ScrollView 的高度只能与您计划在此处加载的最短图像一样高。

    • 0

相关问题