Question

我正在创建特定日期的倒计时。剩余天数，剩余小时数和剩余分钟数必须显示在文本块中。

在XAML中制作平面设计，知道如何计算时间跨度。现在，当应用程序运行时，我需要一个实时更新程序。

我的Xaml

<Grid x:Name="myLayoutGrid"
      Background="CadetBlue" Margin="0,-26.667,0,-0.333"
      >

    <TextBlock x:Name="countDays" 
               HorizontalAlignment="Left" 
               Margin="45,150,0,0" 
               TextWrapping="Wrap" 
               Text="Dagen" 
               VerticalAlignment="Top"
               FontFamily="Tahoma"
               FontSize="34" Loaded="countDays_Loaded"/>
    <TextBlock x:Name="countHours" 
               HorizontalAlignment="Left" 
               Margin="45,200,0,0" 
               TextWrapping="Wrap" 
               Text="Uur" 
               VerticalAlignment="Top" 
               FontFamily="Tahoma"
               FontSize="30" Loaded="countHours_Loaded"/>
    <TextBlock x:Name="countMinutes" 
               HorizontalAlignment="Left"
               Margin="45,250,0,0" 
               TextWrapping="Wrap" 
               Text="Minuten" 
               VerticalAlignment="Top"
               FontFamily="Tahoma"
               FontSize="26" Loaded="countMinutes_Loaded"/>

我的代码;

private void countDays_Loaded(object sender, RoutedEventArgs e)
    {
        DateTime end = DateTime.Parse("01/01/2016 15:00");
        DateTime start = DateTime.Now;

        TimeSpan ts = end - start;

        countDays.Text = string.Format("{0} Dagen", ts.Days);



    }

    private void countHours_Loaded(object sender, RoutedEventArgs e)
    {
        DateTime end = DateTime.Parse("01/01/2016 15:00");
        DateTime start = DateTime.Now;

        TimeSpan ts = end - start;

        countHours.Text = string.Format("{0} Uur", ts.Hours);

    }

    private void countMinutes_Loaded(object sender, RoutedEventArgs e)
    {

        DateTime end = DateTime.Parse("01/01/2016 15:00");
        DateTime start = DateTime.Now;

        TimeSpan ts = end - start;

        countMinutes.Text = string.Format("{0} Minuten", ts.Minutes);
    }

在我理解了代码以及为什么我应该使用该代码之后，我想清理我的代码（将计时器放在一个类中）。之后，我研究了HUB应用程序，我将在绑定元素中使用它。

任何帮助都会很棒。

Answer 1

当您使用C＃/ XAML为WP8开发应用程序时，您应该使用MVVM模式。

这意味着您创建了一个View（例如XAML窗口），然后创建了一个名为ViewModel的数据的分隔上下文。当数据发生变化时，您需要通过实现INotifyPropertyChanged接口来通知变更视图。

要进行定期更改，您应该使用基于任务的异步模式。这样就不会阻止您的UI线程。使用Task。

最简单

当然还有其他几种方法可以做到这一点，但这就是我的建议。

然后您的应用程序可能如下所示。

<强> MainWindow.xaml

<!-- This would be <phone:PhoneApplicationPage in WP8 app -->
<!-- e.g. phone:PhoneApplicationPage x:Class="PhoneApp1.MainPage"-->
<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:wpfApplication1="clr-namespace:WpfApplication1"
        Title="MainWindow"
        Height="116"
        Width="250">
    <Window.DataContext>
        <wpfApplication1:MainViewModel />
    </Window.DataContext>

    <StackPanel VerticalAlignment="Center">
        <!-- Bind displayed text to MainViewModel's CountDown property -->
        <!-- This way it automically updates the TextBlock whenever value is changed -->
        <TextBlock Text="{Binding CountDown}" FontSize="24" TextAlignment="Center" />
    </StackPanel>        
</Window>

<强> MainWindow.xaml.cs

// No code added here, this is the initial class structure.
// This needs to be in same namespace as MainWindow/Page XAML (partial)
using System.Windows;

namespace WpfApplication1
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
    }
}

<强> MainViewModel.cs

// This would be plain C# class in WP8, too
using System;
using System.ComponentModel;
using System.Runtime.CompilerServices;
using System.Threading;
using System.Threading.Tasks;

namespace WpfApplication1
{
    public class MainViewModel : INotifyPropertyChanged
    {
        // This event takes care of notifying the page so it updates
        public event PropertyChangedEventHandler PropertyChanged;
        private string _countDown;

        public MainViewModel()
        {
            // Day to countdown to
            DateTime targetDate = DateTime.Now.AddDays(5d);

            // Start new thread
            Task.Factory.StartNew(() =>
                {
                    // Loop until target date and update value every second
                    while (DateTime.Now <= targetDate)
                    {
                        // Format and set new value
                        CountDown = (targetDate - DateTime.Now).ToString("d'd 'h'h 'm'm 's's'");
                        Thread.Sleep(1000);
                    }
                    // Final value
                    CountDown = "It's tiem!";
                });
        }

        // Value displayed in Page's TextBlock
        public string CountDown
        {
            get { return _countDown; }
            set { _countDown = value; OnPropertyChanged();}
        }

        // This is INotifyPropertyChanged implementation
        protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            var handler = PropertyChanged;
            if (handler != null) 
                handler(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

这使您的计数器看起来如下所示，每秒更新一次并且不会冻结UI。

enter image description here （示例适用于.NET 4.5 WPF应用程序，但它应该是99％...对于Windows Phone应用程序100％相同）。

如果您愿意，可以使用

替换while块，而不是简单的Task.Factory.StartNew循环，您可以采用更长的路径并用计时器替换它

var timer = new DispatcherTimer { Interval = TimeSpan.FromSeconds(1) };
timer.Tick += (sender, args) =>
    {
        DateTime now = DateTime.Now;
        int difference = (int) (targetDate - now).TotalSeconds;
        CountDown = difference >= 0 ? 
                    (targetDate - now).ToString("d'd 'h'h 'm'm 's's'") : 
                    "It's tiem!";
        if (difference < 0)
            timer.Stop();
    };
timer.Start();

Answer 2

您需要某种计时器来定期刷新剩余时间。尝试以下方法：

public partial class MainWindow : Window
{
    private readonly DateTime _endDate;
    private readonly DispatcherTimer _timer;

    public MainWindow()
    {
        InitializeComponent();

        _endDate = new DateTime(2016, 1, 1, 15, 0, 0);
        _timer = new DispatcherTimer();
        _timer.Tick += CountDown;
        _timer.Interval = TimeSpan.FromMinutes(1);
        _timer.Start();
    }

    private void CountDown(object sender, EventArgs e)
    {
        var remainingTime = _endDate.Subtract(DateTime.Now);

        countDays.Text = string.Format("{0} Dagen", remainingTime.Days);
        countHours.Text = string.Format("{0} Uur", remainingTime.Hours);
        countMinutes.Text = string.Format("{0} Minuten", remainingTime.Minutes);
    }
}

要使代码编译，请从XAML中的文本块中删除Loaded="countX_Loaded"事件处理程序。

<Window x:Class="Stackoverflow28009341.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid x:Name="myLayoutGrid" Background="CadetBlue" Margin="0,-26.667,0,-0.333">
        <TextBlock x:Name="countDays" 
               HorizontalAlignment="Left" 
               Margin="45,150,0,0" 
               TextWrapping="Wrap" 
               Text="Dagen" 
               VerticalAlignment="Top"
               FontFamily="Tahoma"
               FontSize="34"/>
        <TextBlock x:Name="countHours" 
               HorizontalAlignment="Left" 
               Margin="45,200,0,0" 
               TextWrapping="Wrap" 
               Text="Uur" 
               VerticalAlignment="Top" 
               FontFamily="Tahoma"
               FontSize="30"/>
        <TextBlock x:Name="countMinutes" 
               HorizontalAlignment="Left"
               Margin="45,250,0,0" 
               TextWrapping="Wrap" 
               Text="Minuten" 
               VerticalAlignment="Top"
               FontFamily="Tahoma"
               FontSize="26"/>
    </Grid>
</Window>

Windows phone应用程序中的倒计时日期

2 个答案: