Skip to content

Instantly share code, notes, and snippets.

@KristofferBerge
Created March 23, 2018 14:37
Show Gist options
  • Save KristofferBerge/77abca453eb8da060482fb16788c5279 to your computer and use it in GitHub Desktop.
Save KristofferBerge/77abca453eb8da060482fb16788c5279 to your computer and use it in GitHub Desktop.
Xamarin workbook displaying difficulties getting the height of a component before animating it in on the visible part of the page
uti id title platforms packages
com.xamarin.workbook
5049b844-a5eb-4192-827c-722f03973cc9
toast
Android
id version
Xamarin.Forms
2.5.0.121934
#r "Xamarin.Forms.Core"
#r "Xamarin.Forms.Platform"
#r "Xamarin.Forms.Xaml"
using Xamarin.Forms;
public static class NotificationService{
    public static event EventHandler NotificationAppearing;

    public static void ShowNotification(){
        NotificationAppearing?.Invoke(null,EventArgs.Empty);
    }
}
using Xamarin.Forms;
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)
    {
        IsVisible = true;

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

        // Attempting to just awaiting a 1ms animation to get a heightdoes 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);
    }

    // Xaml stuff...
    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;
        
    }
}
public class MyPage: ContentPage{
    public MyPage(){
        Title = "My page";
        var wrapper = new Grid();
        // Only one row
        wrapper.RowDefinitions.Add(new RowDefinition());
        Content = wrapper;

        // Add main layout to the wrapper
        var mainLayout = new StackLayout();
        wrapper.Children.Add(mainLayout);
        // Add the notification conent on top of mainlayout
        wrapper.Children.Add(new ToastNotificationView());

        mainLayout.Children.Add(new Label{ Text = "Content goes here.."});
        var btn = new Button{
            Text = "Notify me"
        };
        btn.Clicked += OnButtonClicked;
        btn.IsEnabled = true;
        mainLayout.Children.Add(btn);
    }

    private void OnButtonClicked(Object sender,EventArgs e){
        NotificationService.ShowNotification();
    }
}
Application.Current.MainPage = new NavigationPage(new MyPage());
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment