如何从ViewModel异步更新UI元素

时间:2019-08-08 15:27:17

标签: c# wpf mvvm async-await

我在多种形式上使用标签来显示气象数据,该数据是从WCF服务调用的。我希望每分钟都有一次更新,以显示更新的天气数据,而不会干扰用户交互。

我收到以下错误:

  

“必须在与DependencyObject相同的线程上创建DependencySource。”

我有一个View模型,用于异步获取天气数据,该模型继承自ViewModelBase来处理属性更改的事件。 ViewModel中的属性绑定到标签

用于天气的ViewModel

public class WeatherDataVM : ViewModelBase
{
    private string _windString;
    private SolidColorBrush _windState;
    private DispatcherTimer _timer;


    public WeatherDataVM()
    {
        _timer = new DispatcherTimer(DispatcherPriority.Render);
        _timer.Interval = TimeSpan.FromSeconds(10);
        _timer.Tick += async (sender, args) => {await Task.Run(() => GetWindAsync()); };
        //_timer.Tick += _timer_Tick;
        _timer.Start();
        GetWind();
    }

    private void GetWind()
    {
        var weatherFromService = Services.Instance.EmptyStackService.GetWeather();
        var windSpeed = Convert.ToDouble(weatherFromService.Windspeed);
        var maxGust = Convert.ToDouble(weatherFromService.Max_Gust_In_Last_Min);

        var windSpeedMPH = Math.Round(windSpeed * 1.15078, 1);
        var maxGustMPH = Math.Round(maxGust * 1.15078, 1);

        var windString = $"W/S: {windSpeedMPH}({maxGustMPH})";

        var windState = new Color();
        if (windSpeed >= 40)
            windState = Color.FromRgb(255, 64, 64);
        else if (windSpeed >= 24)
            windState = Color.FromRgb(255, 212, 128);
        else
            windState = Color.FromRgb(0, 255, 0);
        _windState = new SolidColorBrush(windState);

        _windString = windString;


    }

    private async Task GetWindAsync()
    {
        var weatherFromService = Services.Instance.EmptyStackService.GetWeather();
        var windSpeed = Convert.ToDouble(weatherFromService.Windspeed);
        var maxGust = Convert.ToDouble(weatherFromService.Max_Gust_In_Last_Min);

        var windSpeedMPH = Math.Round(windSpeed * 1.15078, 1);
        var maxGustMPH = Math.Round(maxGust * 1.15078, 1);

        var windString = $"W/S: {windSpeedMPH}({maxGustMPH})";

        var windState = new Color();
        if (windSpeed >= 40)
            windState = Color.FromRgb(255, 64, 64);
        else if (windSpeed >= 24)
            windState = Color.FromRgb(255, 212, 128);
        else
            windState = Color.FromRgb(0, 255, 0);

        WindState = new SolidColorBrush(windState);
        WindString = windString;

    }


    public string WindString
    {
        get { return _windString; }

        set
        {
            if (_windString == value)
                return;
            _windString = value;
            OnPropertyChanged("WindString");
        }
    }

    public SolidColorBrush WindState
    {
        get { return _windState; }

        set
        {
            if (_windState == value)
                return;
            _windState = value;
            OnPropertyChanged("WindState");
        }

    }
}

ViewModelBase

public class ViewModelBase : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void OnPropertyChanged(string propertyName = null)
    {
        var handler = PropertyChanged;
        if (handler != null)
        {
            handler(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

查看标签上的Xaml

<Label x:Name="lblWeather" Content="{Binding WindString}" Foreground="black" Background="{Binding WindState}" Style="{DynamicResource SmallLabel}"  />

构造函数视图后的代码

lblWeather.DataContext = new WeatherDataVM();

每当计时器计时时,天气标签应更改。相反,它会引发错误。

1 个答案:

答案 0 :(得分:1)

如果冻结,您可以在背景线程上创建画笔:

var brush = new SolidColorBrush(windState);
brush.Freeze();
WindState = brush;

但是,如果仅在DispatcherTimer事件处理程序中调用Task.Run,则使用Tick并没有多大意义。

假设事件处理程序仅创建画笔并且不直接操作任何UI元素(由于它是在视图模型中实现的,因此绝对不应该),您可以使用System.Timer.Timer。其Elapsed事件已排队等待在线程池线程上执行,您可以在其中查询服务而不会阻塞UI。