Question

我是ReactiveUI的新手，需要专家的帮助才能找到如何实现以下目标。

我在C＃中有一个UWP应用程序，其中一个页面包含一个ListView，它显示了一堆项目（无论什么类型的项目都无关紧要，所以我们假设它显示了一堆整数）。

当调用Page.Loaded时，我向服务器发送一个查询，获取结果（整数数组），并用结果填充ListView。

我想要做的是显示ProgressRing，直到从服务器收到数据和列表完成填充（即新项目全部添加）。完成这两个操作后，我想隐藏ProgressRing。

我想使用ReactiveUI进行上述操作，但无法弄清楚如何执行此操作。

任何帮助将不胜感激

Answer 1

我从未与UWP合作，但我可以提供一个WPF的例子，我希望它会有用。在此示例中，我使用了来自MahApps.Metro

的进度循环

视图模型

public class MainViewModel : ReactiveObject
{
    private readonly ObservableAsPropertyHelper<bool> _isLoading;

    public MainViewModel()
    {
        Load = ReactiveCommand.CreateFromTask(async () =>
        {
            // Simulating a long running task, like DB query
            await Task.Delay(TimeSpan.FromSeconds(10));
            // Populating list
            Items.Clear();
            Items.AddRange(Enumerable.Range(0, 30).Where(x => x%2 == 0));
        });
        Load.IsExecuting.ToProperty(this, x => x.IsLoading, out _isLoading);
    }

    public bool IsLoading => _isLoading.Value;
    public ReactiveList<int> Items { get; } = new ReactiveList<int>();
    public ReactiveCommand<Unit, Unit> Load { get; }
}

查看

public partial class MainWindow : IViewFor<MainViewModel>
{
    public static readonly DependencyProperty ViewModelProperty = DependencyProperty.Register(nameof(ViewModel), typeof(MainViewModel), typeof(MainWindow));
    public MainWindow()
    {
        InitializeComponent();
        ViewModel = new MainViewModel();
        this.OneWayBind(ViewModel, x => x.Items, x => x.ListView.ItemsSource);
        this.OneWayBind(ViewModel, x => x.IsLoading, x => x.ProgressRing.IsActive);
        this.Events().Loaded.Subscribe(_ => this.ViewModel.Load.Execute().Subscribe());
    }
    public MainViewModel ViewModel
    {
        get { return (MainViewModel)GetValue(ViewModelProperty); }
        set { SetValue(ViewModelProperty, value); }
    }

    object IViewFor.ViewModel
    {
        get { return ViewModel; }
        set { ViewModel = (MainViewModel)value; }
    }
}
<Window x:Class="ProgressRing.MainWindow"
                  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                  xmlns:controls="http://metro.mahapps.com/winfx/xaml/controls"
                  Title="MainWindow">
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <ScrollViewer Grid.Row="0">
        <ListView x:Name="ListView" ItemStringFormat="Item {0}" />
    </ScrollViewer>
    <controls:ProgressRing x:Name="ProgressRing" Grid.Row="1" />
</Grid>

ReactiveUI并响应列表中的更改

1 个答案: