保持WPF UI响应，同时显示缓慢加载UserControl

Question

我们有一个使用MVVM模式编写的WPF应用程序。应用程序中有一个TabControl，每个tab中都有不同的UserControls。在某些情况下，当切换到包含选项卡时，选项卡上的某个UserControls可能需要相当长的时间来加载。

这并不是因为ViewModel中存在任何性能瓶颈。相反，这是由于用户控件绑定到ViewModel、创建其中包含的各种UI元素并初始化它们所花费的大量时间。

当用户单击该用户控件的选项卡时，UI将变得完全无响应，直到控件完成加载。事实上，在加载所有内容之前，你甚至看不到"活动选项卡"开关。

在等待UI元素完成加载时，我可以使用什么策略来显示带有某种"请等待，正在加载…"消息的"spinner"?

使用示例代码更新:

下面展示了我试图解决的问题类型。当你点击"慢速"标签时。在slow选项卡中的所有项目都呈现出来之前，UI将变得无响应。

在下面，TestVM是slow选项卡的视图模型。它有大量的子对象。每个都使用自己的数据模板创建。

我怎么能显示一个"加载"消息，而慢标签完成加载?

public class MainVM
{
    private TestVM _testVM = new TestVM();
    public TestVM TestVM
    {
        get { return _testVM; }
    }
}
/// <summary>
/// TestVM is the ViewModel for the 'slow tab'. It contains a large collection of children objects that each will use a datatemplate to render. 
/// </summary>
public class TestVM
{
    private IEnumerable<ChildBase> _children;
    public TestVM()
    {
        List<ChildBase> list = new List<ChildBase>();
        for (int i = 0; i < 100; i++)
        {
            if (i % 3 == 0)
            {
                list.Add(new Child1());
            }
            else if (i % 3 == 1)
            {
                list.Add(new Child2());
            }
            else
            {
                list.Add(new Child3());
            }
        }
        _children = list;
    }
    public IEnumerable<ChildBase> Children
    {
        get {  return _children; }
    }
}
/// <summary>
/// Just a base class for a randomly positioned VM
/// </summary>
public abstract class ChildBase
{
    private static Random _rand = new Random(1);
    private int _top = _rand.Next(800);
    private int _left = _rand.Next(800);
    public int Top { get { return _top; } }
    public int Left { get { return _left; } }
}
public class Child1 : ChildBase { }
public class Child2 : ChildBase  { }
public class Child3 : ChildBase { }
<Window x:Class="WpfApplication3.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfApplication3"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <!-- Template for the slow loading tab -->
        <DataTemplate DataType="{x:Type local:TestVM}">
            <ItemsControl ItemsSource="{Binding Children}">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <Canvas IsItemsHost="True"></Canvas>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                <ItemsControl.ItemContainerStyle>
                    <Style TargetType="FrameworkElement">
                        <Setter Property="Canvas.Top" Value="{Binding Top}"></Setter>
                        <Setter Property="Canvas.Left" Value="{Binding Left}"></Setter>
                    </Style>
                </ItemsControl.ItemContainerStyle>
            </ItemsControl>
        </DataTemplate>
        <!-- examples of different child templates contained in the slow rendering tab -->
        <DataTemplate DataType="{x:Type local:Child1}">
            <DataGrid></DataGrid><!--simply an example of a complex control-->
        </DataTemplate>
        <DataTemplate DataType="{x:Type local:Child2}">
            <RichTextBox Width="30" Height="30">
                <!--simply an example of a complex control-->
            </RichTextBox>
        </DataTemplate>
        <DataTemplate DataType="{x:Type local:Child3}">
            <Calendar Height="10" Width="15"></Calendar>
        </DataTemplate>
    </Window.Resources>
    <Grid>
        <TabControl>
            <TabItem Header="Fast Loading tab">
                <TextBlock Text="Not Much Here"></TextBlock>
            </TabItem>
            <TabItem Header="Slow Tab">
                <ContentControl Content="{Binding TestVM}"></ContentControl>
            </TabItem>
        </TabControl>
    </Grid>
</Window>

Answer 1

你需要的是什么

http://msdn.microsoft.com/en-us/library/ms741870.aspx

 public partial class Window1 : Window
    {
        // Delegates to be used in placking jobs onto the Dispatcher. 
        private delegate void NoArgDelegate();
        private delegate void OneArgDelegate(String arg);
        // Storyboards for the animations. 
        private Storyboard showClockFaceStoryboard;
        private Storyboard hideClockFaceStoryboard;
        private Storyboard showWeatherImageStoryboard;
        private Storyboard hideWeatherImageStoryboard;
        public Window1(): base()
        {
            InitializeComponent();
        }  
        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            // Load the storyboard resources.
            showClockFaceStoryboard = 
                (Storyboard)this.Resources["ShowClockFaceStoryboard"];
            hideClockFaceStoryboard = 
                (Storyboard)this.Resources["HideClockFaceStoryboard"];
            showWeatherImageStoryboard = 
                (Storyboard)this.Resources["ShowWeatherImageStoryboard"];
            hideWeatherImageStoryboard = 
                (Storyboard)this.Resources["HideWeatherImageStoryboard"];   
        }
        private void ForecastButtonHandler(object sender, RoutedEventArgs e)
        {
            // Change the status image and start the rotation animation.
            fetchButton.IsEnabled = false;
            fetchButton.Content = "Contacting Server";
            weatherText.Text = "";
            hideWeatherImageStoryboard.Begin(this);
            // Start fetching the weather forecast asynchronously.
            NoArgDelegate fetcher = new NoArgDelegate(
                this.FetchWeatherFromServer);
            fetcher.BeginInvoke(null, null);
        }
        private void FetchWeatherFromServer()
        {
            // Simulate the delay from network access.
            Thread.Sleep(4000);              
            // Tried and true method for weather forecasting - random numbers.
            Random rand = new Random();
            String weather;
            if (rand.Next(2) == 0)
            {
                weather = "rainy";
            }
            else
            {
                weather = "sunny";
            }
            // Schedule the update function in the UI thread.
            tomorrowsWeather.Dispatcher.BeginInvoke(
                System.Windows.Threading.DispatcherPriority.Normal,
                new OneArgDelegate(UpdateUserInterface), 
                weather);
        }
        private void UpdateUserInterface(String weather)
        {    
            //Set the weather image 
            if (weather == "sunny")
            {       
                weatherIndicatorImage.Source = (ImageSource)this.Resources[
                    "SunnyImageSource"];
            }
            else if (weather == "rainy")
            {
                weatherIndicatorImage.Source = (ImageSource)this.Resources[
                    "RainingImageSource"];
            }
            //Stop clock animation
            showClockFaceStoryboard.Stop(this);
            hideClockFaceStoryboard.Begin(this);
            //Update UI text
            fetchButton.IsEnabled = true;
            fetchButton.Content = "Fetch Forecast";
            weatherText.Text = weather;     
        }
        private void HideClockFaceStoryboard_Completed(object sender,
            EventArgs args)
        {         
            showWeatherImageStoryboard.Begin(this);
        }
        private void HideWeatherImageStoryboard_Completed(object sender,
            EventArgs args)
        {           
            showClockFaceStoryboard.Begin(this, true);
        }        
    }

注:也许它也很有用http://tech.pro/tutorial/662/csharp-tutorial-anonymous-delegates-and-scoping和Make dispatcher示例

Answer 2

让控件惰性加载它的内容。

要做到这一点，在TestVM类中公开一个ObservableCollection属性，并将事件处理程序附加到CollectionChanged(也可能是PropertyChanged)以添加实际的UI元素。

在Window1中，在一个单独的线程上准备在TestVM中加载的数据(你正在做任何web查询吗?)，将数据传递给UI线程上的TestVM。

如果TestVM子控件本身加载缓慢你也可以把这个进程从一个单独的线程中分离出来但这更困难，所以希望是数据加载慢了

Answer 3

原因可能是绑定转换器中的代码慢，强制值回调，属性都可能使绑定看起来慢。例如，考虑一个图片，它的源绑定到一个URL。由于网络延迟，这可能会导致加载缓慢。

也要避免切换到分派器上下文——除非真的需要。例如启动线程，等待WaitHandles，甚至是大/慢的同步I/O操作等等等等

Sten Petrov关于延迟加载(UI和数据虚拟化)的建议也很重要。