UWP InkCanvas 内存不足

Question

我正在使用 MVVMLight 创建调查问卷，并在呈现 InkCanvas 控件时遇到内存问题。这是我正在使用的一个淡化示例：

QuestionVm

public Question Question { get; set; }
public HandwritingControl HandwritingControl { get; set; }

QuestionnaireVm

public List<QuestionVm> currentQuestions;
public List<QuestionVm> CurrentQuestions
{
    get { return currentQuestions; }
    set
    {
        currentQuestions = value;
        RaisePropertyChanged();
    }
}

Questionnaire.xaml.cs

//Clear form & iterate questions
questionnaireForm.Children.Clear();
foreach (var questionVm in questionnaireVm.CurrentQuestions)
{ 
  questionnaireForm.Children.Add(questionVm.Question);
  if(questionVm.HandwritingControl != null)
    questionnaireForm.Children.Add(new InkCanvas());
}

每个页面加载时 RAM 都会出现峰值，很明显分配给 InkCanvas 的内存永远不会被释放。在第三页左右呈现大约 125 个 InkCanvas 控件时，应用程序会引发 System.OutOfMemoryException。

我的问题是，为什么不释放这些控件？以及如何手动释放内存？如果我注释掉 InkCanvas，则调查问卷很好，并且 Children.Clear() 似乎正在清理 TextBlocks 或任何其他控件而没有问题。

更新

因此，在与@Grace Feng 合作后，我尝试重构我的方法并使用带有数据模板的 ListView，而不是从我的 xaml.cs 创建网格。

Questionnaire.xaml

                <ListView Name="questionnaireListView" ItemsSource="{Binding CurrentQuestions, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <StackPanel>
                            <TextBlock Text="{Binding Question.Text}" />
                            <TextBlock Text="{Binding Question.Description}" />
                            <InkCanvas/>
                        </StackPanel>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>

Questionnaire.xaml.cs

    private void buttonNext_Click(object sender, RoutedEventArgs e)
    {
        //Validate & goto next page
        if (questionnaireVm.CurrentPageIsValid())
        {
            questionnaireVm.CurrentQuestions.Clear();
            questionnaireVm.LoadNextPage();
        }
    }

不幸的是，即使使用 ListView 数据模板方法，我仍然遇到同样的内存不足错误。想法？

Answer 1

在第三页左右呈现大约 125 个 InkCanvas 控件时，应用会抛出 System.OutOfMemoryException。

我刚刚重现了这个问题，是的，你是对的。

我的问题是，为什么不释放这些控件？

从 Questionnaire.xaml.cs 中的代码来看，我认为您正在将 questionVm.Question 和 InkCanvas 的新实例动态添加到名为“questionnaireForm”的父控件中，在执行此操作之前，您清除了这个父控件。在加载数据期间没有“解除分配”操作，因此这些控件都不会被解除分配。

如何手动释放内存？如果我注释掉 InkCanvas，则调查问卷很好，并且 Children.Clear() 似乎正在清理 TextBlocks 或任何其他控件而没有问题。

如果您手动释放内存，您将需要删除其中的一些 InkCanvas，或者我认为您可以做的就是在这种情况下使用 UI 虚拟化来减少加载数据时的内存损失。

在UWP APP中，有两个控件已经具备UI虚拟化功能，ListView and GridView。我只是用超过 125 个空 InkCnavas 实例测试这两个控件。 GridView 的Item 的大小是根据它在item 中的布局自适应的，所以当InkCanvas 为空时，它仍然会一次加载所有数据，仍然会出现内存不足的错误。但是ListView 控件默认会占用一行来保存它的项目，UI 虚拟化在这里可以正常工作。

我看到您在questionVm.HandwritingControl != null 的基础上添加了InkCanvas，所以这里有一个解决方法，例如，您可以像这样设计您的 Questionnaire.xaml：

<Page.Resources>
    <DataTemplate x:Key="NoInkCanvasDataTemplate">
        <TextBlock Text="{Binding Questions}" />
    </DataTemplate>
    <DataTemplate x:Key="InkCanvasDataTemplate">
        <StackPanel>
            <TextBlock Text="{Binding Questions}" />
            <InkCanvas></InkCanvas>
        </StackPanel>
    </DataTemplate>
    <local:CustomDataTemplateSelector x:Key="InkCanvasDataTemplateSelector" NoInkCanvas="{StaticResource NoInkCanvasDataTemplate}" InkCanvas="{StaticResource InkCanvasDataTemplate}"></local:CustomDataTemplateSelector>
</Page.Resources>

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <ListView x:Name="listView" ItemTemplateSelector="{StaticResource InkCanvasDataTemplateSelector}" />
</Grid>

并以后面的代码为例：

private ObservableCollection<CurrentQuestions> questions = new ObservableCollection<CurrentQuestions>();

public MainPage()
{
    this.InitializeComponent();
    listView.ItemsSource = questions;
}

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    questions.Clear();
    foreach (var questionVm in questionnaireVm.CurrentQuestions)
    {
        //Add your data here
    }
}

然后像这样创建一个 CustomDataTemplateSelector 类：

public class CustomDataTemplateSelector : DataTemplateSelector
{
    public DataTemplate NoInkCanvas
    {
        get;
        set;
    }

    public DataTemplate InkCanvas
    {
        get;
        set;
    }

    protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
    {
        var canvas = item as HandwritingControl;
        if (canvas == null)
        {
            return this.NoInkCanvas;
        }
        else
        {
            return InkCanvas;
        }
    }
}

简而言之，您可以使用ListView 控件及其ItemTemplateSelector 执行此操作，因为我没有您的所有代码，以上代码只是一个示例，对于您的情况并非100% 正确。

Answer 2

问题出在这一行

foreach (var questionVm in questionnaireVm.CurrentQuestions)
{ 
  questionnaireForm.Children.Add(questionVm.Question);
  if(questionVm.HandwritingControl != null)
    questionnaireForm.Children.Add(new InkCanvas()); //everytime you are creating a new object                    
}

尝试创建一个 InkCanvas 对象并每次在 foreach 循环中使用它。您可以在构造函数或类级别创建对象