c# - UWP InkCanvas 内存不足

Question

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

问题Vm

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

问卷调查

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 创建网格。

问卷.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

On the third or so page when roughly ~125 InkCanvas controls are rendered, the app throws a System.OutOfMemoryException.

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

My question is, why aren't these controls being deallocated?

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

And how can I manually free up the memory? If I comment out the InkCanvas, the questionnaire is fine and Children.Clear() appears to be cleaning up the TextBlocks or any other controls without issue.

如果你手动释放内存，你将需要删除其中一些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% 正确适合您的情况。