How to add View on all the pages using base page?

JigarMJigarM USMember ✭✭

Hello Folks,

I would like to add a simple stack layout with height 50 to the bottom of all the pages of app.
Like, I need to show a progress indicator with the percentage in this view when user trying to sync the data.

On my side, I have BasePage and all the pages are extending from this page.
I tried below code for doing this.

BasePage.cs

            public void AddSyncview()
            {
                var syncView = new StackLayout();
                syncView.HorizontalOptions = LayoutOptions.FillAndExpand;
                syncView.VerticalOptions = LayoutOptions.FillAndExpand;
                syncView.BackgroundColor = Color.SeaGreen;

                var boxView = new BoxView();
                boxView.BackgroundColor = Color.Teal;
                boxView.HeightRequest = 30;
                boxView.HorizontalOptions = LayoutOptions.FillAndExpand;
                boxView.VerticalOptions = LayoutOptions.EndAndExpand;

                syncView.Children.Add(Content);
                syncView.Children.Add(boxView);
                this.Content = syncView;
            }

I thought the "Content" is pointing to the current page of content. So, I can take top stack layout and bind that content in that stacklayout.
so, I can call this method on BasePage OnAppearing and will get it working.

But actually, its not working.
This is replacing the current page content with "syncView"...

Answers

  • ShantimohanElchuriShantimohanElchuri USMember ✭✭✭✭✭

    @XamDev03 said:
    Hello Folks,

    I would like to add a simple stack layout with height 50 to the bottom of all the pages of app.
    Like, I need to show a progress indicator with the percentage in this view when user trying to sync the data.

    On my side, I have BasePage and all the pages are extending from this page.
    I tried below code for doing this.

    BasePage.cs

    public void AddSyncview()
    {
    var syncView = new StackLayout();
    syncView.HorizontalOptions = LayoutOptions.FillAndExpand;
    syncView.VerticalOptions = LayoutOptions.FillAndExpand;
    syncView.BackgroundColor = Color.SeaGreen;

    var boxView = new BoxView();
    boxView.BackgroundColor = Color.Teal;
    boxView.HeightRequest = 30;
    boxView.HorizontalOptions = LayoutOptions.FillAndExpand;
    boxView.VerticalOptions = LayoutOptions.EndAndExpand;

    syncView.Children.Add(Content);
    syncView.Children.Add(boxView);
    this.Content = syncView;
    }

    I thought the "Content" is pointing to the current page of content. So, I can take top stack layout and bind that content in that stacklayout.
    so, I can call this method on BasePage OnAppearing and will get it working.

    But actually, its not working.
    This is replacing the current page content with "syncView"...

    What is the purpose of syncView.Children.Add(Content); ?

    May it may be good to add the StackLayout etc in the Base Page constructor itself and just toggle IsVisible of StackLayout to make it visible when needed and hide it when not needed.

  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭

    Just create a ContentTemplate for your page then apply that to any page you want to use that same layout.

  • igorkr_10igorkr_10 Member ✭✭✭

    You can create an abstract property in your BasePage:

    protected abstract AbsoluteLayout AbsoluteLayout { get; }

    Then in child page in xaml create AbsoluteLayout with name:

    <AbsoluteLayout x:Name="absoluteLayout" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">

    Then implement abstract property:
    protected abstract AbsoluteLayout AbsoluteLayout { get { return absoluteLayout; } }

    In your base page by OnAppearing just add to AbsoluteLayout your views. You need OnAppearing because absoluteLayout in xaml will be created in constructor by InitializeComponent.

    You can also use ContentTemplate but I don't remember how properly it works with bindings.

Sign In or Register to comment.