C#：如何在 Windows 核心 IOT 应用程序中的多个页面上显示时钟

Question

我是 UWP 的新手，我正在尝试在 Windows 核心物联网应用程序的多个页面上显示时钟。执行此操作的最佳方法是什么？

我当时尝试使用 class 并动态更新它并将其与 header 绑定，但是我将如何绑定来自 "template"?我想放入时钟的 header 位于我在应用程序所有页面上使用的 ResourceDictionary 中。或者我应该把时钟放在 App.xaml 中，但即使在这种情况下，我如何将它绑定到 header 以便它始终更新？

我是否需要在我的 class 中实施 INotifyPropertyChanged 或者是否有其他方法？

谢谢。

编辑： (05/17)

这是 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

我要在这里冒险，并建议您不要在应用程序的每个页面中添加相同的元素，而应使用两个框架。

前哨框架用于出现在每个页面上的元素。这可以是您的 header、菜单、更新时间 - 随您便。使处理该内容更容易。

使用它放置第二个框架，并将其用于页面之间的导航。看看我们的应用程序 - 它有一个垂直 "header" 标记 'Page 1'，右侧有 'Page 2' - 用于导航的那个。

Answer 2

您不需要在每一页都放置时钟。您可以使用 Frame 控件来托管其他页面作为 MainPage 的内容。将时钟放在 MainPgae "header" 上。其他页面之间的导航发生在时钟区域之外。那就只能在MainPage更新时钟，分享给其他页面了。

以下是您可以参考的简单示例：

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");
    }
}

C#：如何在 Windows 核心 IOT 应用程序中的多个页面上显示时钟

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

c#

raspberry-pi

win-universal-app

windows-10-universal

windowsiot