在动画中获取 Xamarin.Forms ContentView 的高度

Question

我正在尝试在 Xamarin.Forms 的页面顶部创建一个动画通知。我已经很接近了，但是在页面上设置动画之前我无法获得 ContentView 的高度。我制作了一个 xamarin workbook 来演示我的问题，它可以在 android-simulator 上运行。 （猜想它也可以在 ios/wpf 上使用，并进行一些修改）

The workbook is available here

问题出在ToastNotificationView.AnimateIn() 中，我首先将整个内容视图的可见性设置为可见（红色背景）。绿色通知立即呈现在它的最终位置，尽管在动画之前设置它在屏幕外的位置的不同尝试。这只发生在第一次在页面上动画通知时，因为它的高度在动画后可用退出屏幕并再次隐藏。

我可以通过将高度偏移硬编码为 50 来解决这个问题，但是为了实现可变高度的一致动画，这不会削减它。我还可以创建一个计算行数的方法，然后根据它动态设置高度，但我希望有一种方法可以实际呈现它，并以某种方式获取组件的实际高度，而不会让用户看到它直到我从我想要的地方开始动画。

public class ToastNotificationView: ContentView {
    // The notification item to be animated in/out
    private StackLayout MainStackLayout;
    public ToastNotificationView() {
        InitializeComponent(); // Let's pretend workbooks supports xaml

        //Subscribing to notification events
        NotificationService.NotificationAppearing += AnimateIn;
        // TODO: Find out how to unsubscribe in contentview without access to life cycle hooks
    }
    private async void OnDismissClicked(object sender, EventArgs e) {
        await AnimateOut();
    }
    private async Task AnimateOut() {
        await MainStackLayout.TranslateTo(0, -MainStackLayout.Height, 1000);
        IsVisible = false;
    }
    private async void AnimateIn(object sender, EventArgs e) {
        // Make the entire view visible
        IsVisible = true;

        // First time, height is always zero, so we can't set it like this
        MainStackLayout.TranslationY = -MainStackLayout.Height;

        // Attempting to await a 1ms animation to get a height does not result in correct height either
        await MainStackLayout.TranslateTo(0, 0, 1);
        await MainStackLayout.TranslateTo(0, -MainStackLayout.Height, 1);

        //Still does not animate in on initial animation
        await MainStackLayout.TranslateTo(0, 0, 1000);
    }
}

在 InitializeComponent 方法中创建布局以支持 xamarin 工作簿。就本问题而言，这可能是任何事情。

// layout
private void InitializeComponent(){
    // Make contentview background red for debugging purposes
    this.BackgroundColor = Color.Red;
    this.VerticalOptions = LayoutOptions.Start;

    //The actual notification should be green
    MainStackLayout = new StackLayout{
        Orientation = StackOrientation.Horizontal,
        VerticalOptions = LayoutOptions.Start,
        BackgroundColor = Color.Green
    };
    var title = new Label{
        Text = "Hello There"
    };
    var msg = new Label{
        Text = "Importaint stuff you should be aware of"
    };

    var btn = new Button{
        Text = "X",
        VerticalOptions = LayoutOptions.Start,
        HorizontalOptions = LayoutOptions.EndAndExpand,
        BorderColor = Color.Transparent,
        BackgroundColor = Color.Transparent,
        HeightRequest = 40,
        WidthRequest = 40,
        Margin = 3
    };
    btn.Clicked += OnDismissClicked;
    var textStack = new StackLayout();
    textStack.Children.Add(title);
    textStack.Children.Add(msg);
    MainStackLayout.Children.Add(textStack);
    MainStackLayout.Children.Add(btn);
    Content = MainStackLayout;

    // Default visibility is hidden
    IsVisible = false;

}

Answer 1

您可以使用Measure 获取高度：

private async void AnimateIn(object sender, EventArgs e)
{
    var parent = (VisualElement)Parent;
    SizeRequest sizeRequest = MainStackLayout.Measure(parent.Width, parent.Height);

    MainStackLayout.TranslationY = -sizeRequest.Request.Height;

    IsVisible = true;

    await MainStackLayout.TranslateTo(0, 0, 1000);
}