如何在.NET MAUI中实现无需显式HeightRequest的展开动画？

核心实现思路 #

• 放弃用IsVisible="False"隐藏控件，改用Opacity="0" + HeightRequest="0"的组合，既让控件在布局中保留（可计算真实高度），又视觉不可见且不占用空间。
• 动画启动前，临时将控件恢复为自动高度模式，获取其真实渲染高度后，再把高度设回0，为动画做准备。
• 用高度动画替代ScaleY动画：直接修改HeightRequest从0过渡到真实高度，同时配合透明度动画从0到1，既能实现视觉展开效果，又能正确控制布局空间的占用变化（解决ScaleY仅缩放视觉但仍占满空间的问题）。

针对你代码的调整方案 #

修改后的XAML： #

<VerticalStackLayout>
    <Frame Margin="10">
        <VerticalStackLayout>
            <Button Text="Expand" Clicked="Expand"/>
            <Label
                x:Name="Expandable"
                Text="Hidden Text"
                FontSize="Large"
                BackgroundColor="Red"
                IsVisible="True"
                Opacity="0"
                HeightRequest="0"
                AnchorY="0"
            />
        </VerticalStackLayout>
    </Frame>
</VerticalStackLayout>

修改后的C#逻辑： #

async void Expand(System.Object sender, System.EventArgs e)
{
    // 触发控件计算真实高度
    Expandable.HeightRequest = -1; // 重置为自动高度模式
    await Expandable.LayoutTo(new Rectangle(Expandable.Bounds.X, Expandable.Bounds.Y, Expandable.Bounds.Width, Expandable.DesiredSize.Height));
    var targetHeight = Expandable.DesiredSize.Height;
    
    // 重置为动画初始状态
    Expandable.HeightRequest = 0;
    await Task.Delay(10); // 等待布局更新完成
    
    // 同时执行高度展开和淡入动画
    await Task.WhenAll(
        Expandable.HeightTo(targetHeight, 1000),
        Expandable.FadeTo(1, 1000)
    );
}

关键细节说明 #

• HeightRequest=-1是MAUI中让控件恢复自动高度计算的标准方式。
• LayoutTo强制控件完成一次布局刷新，确保DesiredSize.Height能拿到准确的真实高度值。
• 同时运行高度和透明度动画，可避免展开时的视觉突兀感，让动画更流畅。

内容的提问来源于stack exchange，提问作者user2146414