C# : How to display a clock on multiple pages in Windows core IOT app

Question

I'm new to UWP and I'm trying to display a clock on a Windows core IOT app on multiple pages. What would be the best way to do this?

I tried to use a class for the time and to update it dynamically and bind it with the header, but how would I bind a header that is from a "template"? The header I want to put the clock in is in a ResourceDictionary that I use on all pages of the app. Or should I put the clock in App.xaml, but even in this case, how can I bind it to the header so that it will always be updated?

Do I need to implement INotifyPropertyChanged in my class and or is there another way?

Thank you.

EDIT: (05/17)

This is the code for the header

ResourceDictionnary:

<ResourceDictionary
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:local="using:Project.Resources"
 x:Class="Project.Header">
<!-- ... -->
   <!-- Header -->
   <DataTemplate x:Key="Header" x:DataType="local:Header">
      <TextBlock x:Name="labelHeader" Text="{x:Bind Time, Mode=OneWay}"/>
   </DataTemplate>
<!-- ... -->
</ResourceDictionary>

Answer 1

You don't need to put the clock to every page. You can use Frame control to host other pages as content of the MainPage. Put the clock on the MainPgae "header". Navigation between other pages occurs outside of the clock region. Then you can only update the clock in MainPage and share it between other pages.

The following is a simple sample you can reference:

MainPage.xaml

<StackPanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <TextBlock Text="{Binding Time}" Margin="20,5,5,5"/>
    <StackPanel>
        <Button Name="Page1" Content="Page1" Click="Page1_Click" />
        <Button Name="Page2" Content="Page2" Click="Page2_Click" />
        <Button Name="Page3" Content="Page3" Click="Page3_Click" />
    </StackPanel>
    <StackPanel VerticalAlignment="Center">
        <Frame Name="MyFrame"></Frame>
    </StackPanel>
</StackPanel>

MainPage.xaml.cs

    Clock clock = new Clock();
    public MainPage()
    {
        this.InitializeComponent();
        this.DataContext = clock;
        clock.InitClock();
    }

    private void Page1_Click(object sender, RoutedEventArgs e)
    {
        MyFrame.Navigate(typeof(Page1));
    }

    private void Page2_Click(object sender, RoutedEventArgs e)
    {
        MyFrame.Navigate(typeof(Page2));
    }

    private void Page3_Click(object sender, RoutedEventArgs e)
    {
        MyFrame.Navigate(typeof(Page3));
    }

Clock.cs

public class Clock : INotifyPropertyChanged
{
    DispatcherTimer Timer = new DispatcherTimer();
    public string _time { get; set; }
    public string Time
    {
        get { return _time; }
        set
        {
            _time = value;
            OnPropertyChanged("Time");
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    protected void OnPropertyChanged(string name)
    {
        PropertyChangedEventHandler hander = PropertyChanged;
        if (hander != null)
        {
            hander(this, new PropertyChangedEventArgs(name));
        }

    }

    public void InitClock()
    {
        Timer.Tick += Timer_Tick;
        Timer.Interval = new TimeSpan(0, 0, 1);
        Timer.Start();
    }

    private void Timer_Tick(object sender, object e)
    {
        Time = DateTime.Now.ToString("h:mm:ss tt");
    }
}