When I am navigating to a new Xamarin Page, content isnt displaying when I am running System.Timer.Timer code

Question

I used the System.Timers.Timer(); code to do the count down Timer on page load and then I used the Navigate.Push to go into another page.

Timer Code on page load:

public Index()
{
    InitializeComponent();
    StartCountDownTimer();
}

DateTime endTime = new DateTime(2019, 08, 25, 14, 00, 0);
public void StartCountDownTimer()
{
    try
    {
        timer = new System.Timers.Timer();
        timer.Interval = 1000;
        timer.Elapsed += t_Tick;
        TimeSpan ts = endTime - DateTime.Now;        
        lblCountDown.Text = ts.ToString("d' Days 'h' Hours 'm' Minutes 's' Seconds'");
        timer.Start();
    }
    catch (Exception ex)
    {
        string Error = ex.Message;
    }
}


System.Timers.Timer timer;
void t_Tick(object sender, EventArgs e)
{
    try
    {
        TimeSpan ts = endTime - DateTime.Now;
        string NewTimer = ts.ToString("d' Days 'h' Hours 'm' Minutes 's' Seconds'");
        //txtCountDown.Text = NewTimer;
        lblCountDown.Text = NewTimer;
        if ((ts.TotalMilliseconds < 0) || (ts.TotalMilliseconds < 1000))
        {
            timer.Stop();
            lblCountDown.Text = "The day has arrived";
        }
    }
    catch (Exception ex)
    {
        string Error = ex.Message;
    }
}

Navigate Code using a button click on the same page:

private void ClickAboutTab(object sender, EventArgs e)
        {

                await Navigation.PushAsync(new ReferralPage());

        }

Code of page I am navigating to:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:behavior="clr-namespace:AppName.Validation"
             xmlns:views="clr-namespace:AppName"
             xmlns:controls="clr-namespace:ImageCircle.Forms.Plugin.Abstractions;assembly=ImageCircle.Forms.Plugin"
             xmlns:input="clr-namespace:Plugin.InputKit.Shared.Controls;assembly=Plugin.InputKit"
             x:Class="AppName.Pages.ReferralPage"
             Title="Referral">
    <ContentPage.Content>
        <ScrollView>
            <AbsoluteLayout>
                <StackLayout AbsoluteLayout.LayoutBounds="0,0,1,1" 
                         AbsoluteLayout.LayoutFlags="All"  HorizontalOptions="CenterAndExpand">
                    <StackLayout>
                        <Grid BackgroundColor="White">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="80"/>
                                <RowDefinition Height="*"/>
                                <RowDefinition Height="50"/>
                            </Grid.RowDefinitions>
                            <StackLayout Orientation="Horizontal"  HorizontalOptions="Center" Margin="0,10,0,0">
                                <controls:CircleImage Source="Assets/xinix.png"  WidthRequest="160" HeightRequest="160"  ></controls:CircleImage>
                            </StackLayout>
                            <Grid Grid.Row="1" Margin="20,0,20,0">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="40"/>
                                    <RowDefinition Height="40"/>
                                    <RowDefinition Height="40"/>
                                    <RowDefinition Height="40"/>
                                    <RowDefinition Height="40"/>
                                    <RowDefinition Height="40"/>
                                </Grid.RowDefinitions>
                                <Entry Placeholder="First Name" x:Name="txtFirstname" Grid.Row="0"/>
                                <Entry  x:Name="txtLastname" Placeholder="Last Name" Grid.Row="1"/>

                                <Entry x:Name="txtEmail" Placeholder="name@domain.com" Grid.Row="2"/>
                                <Entry  x:Name="txtPhone"  Placeholder="Cell Phone" Grid.Row="3" MaxLength="10" Keyboard="Telephone"/>

                                <Button Text="Submit" x:Name="btnSubmit" Clicked="btnReferral_clicked" BackgroundColor="#3897F0" TextColor="White" HeightRequest="50" VerticalOptions="Start" Grid.Row="4"/>
                            </Grid>
                        </Grid>
                    </StackLayout>
                </StackLayout>
                <views:MenuBar AbsoluteLayout.LayoutBounds="0,1,1,52" 
                           AbsoluteLayout.LayoutFlags="PositionProportional,WidthProportional"/>
            </AbsoluteLayout>
        </ScrollView>
    </ContentPage.Content>
</ContentPage>

public ReferralPage()
        {
            InitializeComponent();
        }

Solutions I already tried before navigating are:

timer.Stop();
timer.Dispose();
timer = null;

Device.BeginInvokeOnMainThread(async () =>);

Answer 1

I have updated my code. The Device.BeginInvokeOnMainThread you tried before, could solve your problem. Maybe you try the wrong way. You could refer to the code below.

void t_Tick(object sender, EventArgs e)
    {
        Device.BeginInvokeOnMainThread(() =>
        {
            try
            {
                TimeSpan ts = endTime - DateTime.Now;
                string NewTimer = ts.ToString("d' Days 'h' Hours 'm' Minutes 's' Seconds'");
                lblCountDown.Text = NewTimer;
                if ((ts.TotalMilliseconds < 0) || (ts.TotalMilliseconds < 1000))
                {
                    timer.Stop();
                    lblCountDown.Text = "The day has arrived";
                }
            }
            catch (Exception ex)
            {
                string Error = ex.Message;
            }
        });

    } 

My result:

Answer 2

updates to UI elements need to happen on the UI thread

Device.BeginInvokeOnMainThread( () => {
    lblCountDown.Text = NewTimer;
});