将 ProgressRing 绑定到 mvvm答案

【问题标题】：Bind ProgressRing to mvvm将 ProgressRing 绑定到 mvvm
【发布时间】：2020-02-21 22:54:57
【问题描述】：

我正在从 api 下载数据，并在视图中显示该数据。当我等待时，我想显示一个 ProgressRing，但是当我绑定它时它不起作用

将环绑定到cityData属性，采用双向模式，属性变化时更新
在 VM 中创建了一个新属性，默认情况下为 true，当我取回数据时它会变为 false

XAML

<TextBox x:Name="currentLocation"
                 PlaceholderText="Please wait..."
                 IsReadOnly="True"
                 Margin="20"
                 Width="300"
                 Text="{Binding cityData,  Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
<ListView RelativePanel.Below="currentLocation"
                  x:Name="ForecastList"
                  Margin="20"
                  SelectedItem="{Binding currentDay, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                  ItemsSource="{Binding dailyForecasts}">
     <ListView.ItemTemplate>
        <DataTemplate>
            <StackPanel Margin="10">
               <TextBlock x:Name="dateTB" Text="{Binding Date.DayOfWeek}" />
               <TextBlock x:Name="highTB" Text="{Binding Temperature.Maximum.Value, Converter={StaticResource cv}}" FontSize="10" />
               <TextBlock x:Name="lowTB" FontSize="10" Text="{Binding Temperature.Minimum.Value, Converter={StaticResource cv}}" />
            </StackPanel>
        </DataTemplate>
     </ListView.ItemTemplate>
</ListView>
<ProgressRing x:Name="pRing" RelativePanel.Above="ForecastList" RelativePanel.AlignHorizontalCenterWith="currentLocation" IsActive="{Binding ring, Mode=TwoWay}" RelativePanel.Below="currentLocation" />

虚拟机

public class WeatherVM: INotifyPropertyChanged 
{
 public AccuWeather accuWeather { get; set; }    
 private string _cityData;
 public string cityData 
 {
  get { return _cityData; }
  set 
  { 
    if (value != _cityData) 
      {
       _cityData = value;
       onPropertyChanged("cityData");
       GetWeatherData();
      }
   }
 }

 private DailyForecast _currentDay;
 public DailyForecast currentDay 
 {
  get { return _currentDay; }
  set 
  {
   if (value != _currentDay) \
   {
    _currentDay = value;
    onPropertyChanged("currentDay");
   }
  }
 }
 public bool ring { get; set; } = true;
 public ObservableCollection<DailyForecast> dailyForecasts { get; set; }
 public WeatherVM() 
 {
  GetCuurentLocation();
  dailyForecasts = new ObservableCollection<DailyForecast>();
 }
 private async void GetCuurentLocation() {
   cityData = await BingLocator.GetCityData();
 }
public async void GetWeatherData() {
 var geoposition = await LocationManager.GetGeopositionAsync();
 var currentLocationKey = await WeatherAPI.GetCityDstaAsync(geoposition.Coordinate.Point.Position.Latitude, geoposition.Coordinate.Point.Position.Longitude);
 var weatherData = await WeatherAPI.GetWeatherAsync(currentLocationKey.Key);
    if (weatherData != null) {
      foreach (var item in weatherData.DailyForecasts) {
          dailyForecasts.Add(item);
      }
    }
 currentDay = dailyForecasts[0];
 ring = false;
 }
 public event PropertyChangedEventHandler PropertyChanged;
 private void onPropertyChanged(string property) {
   PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(property));
 }
} 
}

进度环在应用启动时出现，在返回数据时消失

【问题讨论】：

代码没有显示ring 曾被更改过，并且此更改伴随着onPropertyChanged("ring") 调用，这可能是问题。描述和代码不一致，这意味着可能存在其他问题，但这是我要检查的第一件事。
你建议什么，进度条有自己的value属性，默认是true，所以至少要显示。我把它改成了一个完整的属性和一个 OnpropertyChqnged，什么都没有
我只是放了环的完整属性，默认值为true，它不显示pastebin.com/ree9WJ1C

标签： mvvm uwp

【解决方案1】：

从您的代码来看，这似乎是一个布局问题。首先将 ListView 放在 currentLocation 下方，然后将 ProgressRing 设置在 ListView 上方和 currentLocation 下方，因此 ProgressRing 的高度将为零。我不清楚你的布局，你可以尝试只为 ProgressRing 设置RelativePanel.Above="ForecastList" 看看会不会出现。

【讨论】：

我检查了您的代码，发现 WeatherVM 类中不存在 ProgressRingIsActive 属性。那么如果将ring属性绑定到ProgressRing，会不会出现同样的问题呢？
对不起，我的错误，它的工作知道。我有一个问题 MVVM 这些天非常使用？我只使用后面的代码和 xaml
你的意思是你不知道如何使用MVVM？可以参考这个document。
这个天气应用，是使用MVVM开发的，我只是想知道是否经常使用
MVVM 只是一种设计模式。 UWP 支持这种设计模式，但使用任何开发方法都是可行的。没有必要使用 MVVM。

【解决方案2】：

您可以使用 Windows Community Toolkit 控件来显示进度环（忙碌指示器）。

<Page ...
     xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"/>

<controls:Loading x:Name="LoadingControl" IsLoading="{Binding IsBusy}">
    <!-- Loading screen content -->
</controls:Loading>

【讨论】：