Windows UI中的ListView缓存？

Question

我有以下问题：我有一个Listview，其中每个项目都是一个自定义控件（“ DisruptionIcon”），它显示一个图标，具体取决于为该自定义控件设置的属性。图标可以具有多种形状（这里的示例中为“无”和“方形”）。现在的问题是，如果我向下滚动ListView并在之后备份，则图标是错误的。结果是：

向下滚动之前：

上下滚动后：

资源是：

MainPage.xaml：

<Page
x:Class="App1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Name="MainPg"
>

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <ListView
        Width="200"
        ItemsSource="{Binding LineList, ElementName=MainPg}"
        >
        <ListView.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <local:DisruptionIcon 
                        DisplayName="{Binding DisplayName}"
                        IconType="{Binding DisplayStyle}"
                        Color1="{Binding Color1}"
                        Color2="{Binding Color2}"
                        />
                    <TextBlock Text="{Binding DisplayName}" Foreground="Red"/>
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</Grid>

MainPage.xaml.cs：

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        LineList = new ObservableCollection<ServerLineDefinition>();

        for (byte i = 0; i <= 250; i++)
        {
            var ds = new ServerLineDefinition("ID " + i, "FFFFFF", "000000", 1, i);

            LineList.Add(ds);
        }

        InitializeComponent();
    }

    public ObservableCollection<ServerLineDefinition> LineList { get; set; }
}

我的自定义控件是：DisruptionIcon.xaml：

<UserControl
x:Class="App1.DisruptionIcon"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
Name="mainUc" mc:Ignorable="d"
d:DesignHeight="34" d:DesignWidth="80"
Width="80" Height="34"
>    
<Grid>
    <local:DisplayIconTemplateSelector Content="{Binding IconType, ElementName=mainUc}">
        <local:DisplayIconTemplateSelector.StyleNone>
            <DataTemplate>
                <Grid/>
            </DataTemplate>
        </local:DisplayIconTemplateSelector.StyleNone>
        <local:DisplayIconTemplateSelector.StyleSquare>
            <DataTemplate>
                <Rectangle 
                    Width="80" 
                    Height="32" 
                    Fill="{Binding Color2, ElementName=mainUc}"
                    VerticalAlignment="Top"
                    HorizontalAlignment="Left"
                    StrokeThickness="2" 
                    Stroke="{Binding Color1, ElementName=mainUc}"
                    />
            </DataTemplate>
        </local:DisplayIconTemplateSelector.StyleSquare>
    </local:DisplayIconTemplateSelector>

    <Viewbox 
        Stretch="Uniform" 
        HorizontalAlignment="Stretch"
        VerticalAlignment="Stretch"
        Margin="8,0"
        >            
        <TextBlock 
            Text="{Binding DisplayName, ElementName=mainUc}"
            Foreground="{Binding Color1, ElementName=mainUc}" 
            Height="auto"
            VerticalAlignment="Top"
            TextWrapping="NoWrap"
            FontWeight="Bold"
            TextAlignment="Center"
            Margin="0,-2,0,0"
            />
    </Viewbox>
</Grid>

这是后面的代码DisruptionIcon，disruptionicon.xaml.cs其中基本上只将属性与DependencyProperties绑定，SolidColorBrush如果颜色以字符串形式提供，则颜色将转换为。由于应用程序设计，这是我需要的：

public sealed partial class DisruptionIcon
{
    public DisruptionIcon()
    {
        Color1 = new SolidColorBrush(Colors.White);
        Color2 = new SolidColorBrush(Colors.Black);
        IconType = DisplayStyle.None;
        DisplayName = "";
        InitializeComponent();
    }

    #region Color1
    /// <summary>
    /// Used for the View of multiple Icons. Contains an IconId and the text to show for every Entry
    /// </summary>
    public object Color1
    {
        get { return (object)GetValue(DisruptionColor1Property); }
        set { SetValue(DisruptionColor1Property, value); }
    }

    // Using a DependencyProperty as the backing store for ItemSource.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty DisruptionColor1Property =
        DependencyProperty.Register("Color1", typeof(object), typeof(DisruptionIcon), new PropertyMetadata(null, DisruptionColor1PropertyCallback));

    public static void DisruptionColor1PropertyCallback(DependencyObject dp, DependencyPropertyChangedEventArgs args)
    {
        var iconColor1 = ((DisruptionIcon)dp).Color1;

        if (iconColor1 == null || iconColor1 is SolidColorBrush)
            return;

        //Convert Colors
        if (iconColor1 is string)
            iconColor1 = ConvertToSolidColorBrush((string)iconColor1);

        ((DisruptionIcon)dp).Color1 = iconColor1;
    }
    #endregion

    #region Color2
    /// <summary>
    /// Used for the View of multiple Icons. Contains an IconId and the text to show for every Entry
    /// </summary>
    public object Color2
    {
        get { return (object)GetValue(DisruptionColor2Property); }
        set { SetValue(DisruptionColor2Property, value); }
    }

    // Using a DependencyProperty as the backing store for ItemSource.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty DisruptionColor2Property =
        DependencyProperty.Register("Color2", typeof(object), typeof(DisruptionIcon), new PropertyMetadata(null, DisruptionColor2PropertyCallback));

    public static void DisruptionColor2PropertyCallback(DependencyObject dp, DependencyPropertyChangedEventArgs args)
    {
        var iconColor2 = ((DisruptionIcon)dp).Color2;

        if (iconColor2 == null || iconColor2 is SolidColorBrush)
            return;

        //Convert Colors
        if (iconColor2 is string)
            iconColor2 = ConvertToSolidColorBrush((string)iconColor2);

        ((DisruptionIcon)dp).Color2 = iconColor2;
    }
    #endregion

    #region IconType
    /// <summary>
    /// Used for the View of multiple Icons. Contains an IconId and the text to show for every Entry
    /// </summary>
    public object IconType
    {
        get { return (DisplayStyle)GetValue(DisruptionDisplayStyleProperty); }
        set { SetValue(DisruptionDisplayStyleProperty, value); }
    }

    // Using a DependencyProperty as the backing store for ItemSource.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty DisruptionDisplayStyleProperty =
        DependencyProperty.Register("IconType", typeof(object), typeof(DisruptionIcon), new PropertyMetadata(DisplayStyle.None, DisruptionDisplayStylePropertyCallback));

    public static void DisruptionDisplayStylePropertyCallback(DependencyObject dp, DependencyPropertyChangedEventArgs args)
    {
        var iconDisplayStyle = ((DisruptionIcon)dp).IconType;

        if (args.NewValue is Int32)
        {
            ((DisruptionIcon)dp).IconType = (DisplayStyle)args.NewValue;
        }


    }

    #endregion

    #region DisplayName
    /// <summary>
    /// Used for the View of multiple Icons. Contains an IconId and the text to show for every Entry
    /// </summary>
    public string DisplayName
    {
        get { return (string)GetValue(DisruptionDisplayNameProperty); }
        set { SetValue(DisruptionDisplayNameProperty, value); }
    }

    // Using a DependencyProperty as the backing store for ItemSource.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty DisruptionDisplayNameProperty =
        DependencyProperty.Register("DisplayName", typeof(string), typeof(DisruptionIcon), new PropertyMetadata(null, DisruptionDisplayNamePropertyCallback));

    public static void DisruptionDisplayNamePropertyCallback(DependencyObject dp, DependencyPropertyChangedEventArgs args)
    {
        var iconDisplayName = ((DisruptionIcon)dp).DisplayName;

        if (iconDisplayName == null)
            return;

        ((DisruptionIcon)dp).DisplayName = iconDisplayName;
    }
    #endregion


    /// <summary>
    /// Converts a ColorCode (i.e. FF8899) to SolidColorBrush
    /// </summary>
    /// <param name="colorCode">Six-Digit Hex-Code of the Color</param>
    /// <returns></returns>
    private static SolidColorBrush ConvertToSolidColorBrush(string colorCode)
    {
        if (colorCode != null && colorCode.Length == 6)
        {
            return new SolidColorBrush(Color.FromArgb(255,
                Convert.ToByte(colorCode.Substring(0, 2), 16),
                Convert.ToByte(colorCode.Substring(2, 2), 16),
                Convert.ToByte(colorCode.Substring(4), 16)));
        }

        return new SolidColorBrush(Colors.Black);

    }
}

我的TemplateSelector DisplayIconTemplateSelector.cs：

public class DisplayIconTemplateSelector : ContentControl
{
    protected override void OnContentChanged(object oldContent, object newContent)
    {
        base.OnContentChanged(oldContent, newContent);

        ContentTemplate = SelectTemplate(newContent, this);
    }

    public DataTemplate StyleNone { get; set; }
    public DataTemplate StyleSquare { get; set; }

    public DataTemplate SelectTemplate(object item, DependencyObject container)
    {
        var quoteItem = (DisplayStyle)item;

        switch (quoteItem)
        {
            default:
                return StyleNone;
            case DisplayStyle.Square:
                return StyleSquare;
        }
    }
}

最后是我的ServerLineDefinition-Class：

public class ServerLineDefinition : INotifyPropertyChanged
{
    public ServerLineDefinition() { }

    public ServerLineDefinition(
        string displayName,
        string backgroundColor,
        string foregroundColor,
        int displayStyle,
        int id)
    {
        DisplayName = displayName;
        Color2 = backgroundColor;
        Color1 = foregroundColor;
        DisplayStyle = displayStyle;
        Id = id;
    }

    public int Id { get; set; }
    public string DisplayName { get; set; }
    public int DisplayStyle { get; set; }


    /// <summary>
    /// RGB-Value for BackgroundColor
    /// </summary>
    public string Color2 { get; set; }

    /// <summary>
    /// RGB-Value for ForegroundColor
    /// </summary>
    public string Color1 { get; set; }


    #region PropertyChanged

    public event PropertyChangedEventHandler PropertyChanged; //To Update Content on the Form

    /// <summary>
    /// Helper for Triggering PropertyChanged
    /// </summary>
    /// <param name="triggerControl">The Name of the Property to update</param>
    private void RaisePropertyChanged(string triggerControl)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(triggerControl));
        }
    }

    #endregion
}

在我看来，的缓存存在问题ListView。如果我更换ListView用ItemsControl在挤包ScrollViewer，问题不存在，但使用更多的内存，需要更多的时间来加载。另外，如果取消注释TextBlock作为注释添加的MainPage.xaml，则您会在每一行中看到正确的ID，但屏幕截图中显示的是错误的Image。

编辑：如果我将任何控件放在中ScrollViewer，则速度较慢，但​​可以。如果我将DisruptionIcon.xaml的整个代码直接放在MainPage中引用DirutpionIcon的位置，则它也可以工作。

Answer 1

尝试使用ItemsControl的样式设置器，关键字“虚拟化”：

    <Setter Property="ItemsPanel">
        <Setter.Value>
            <ItemsPanelTemplate>
                <ItemsStackPanel Orientation="Vertical"/>
            </ItemsPanelTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ItemsControl">
                <Border x:Name="LayoutRoot">
                    <ScrollViewer>
                        <ItemsPresenter/>
                    </ScrollViewer>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>

在您的DisplayName的DependencyProperty上，更新为：

public static void DisruptionDisplayNamePropertyCallback(DependencyObject dp, DependencyPropertyChangedEventArgs args)
{
    var iconDisplayName = (string)e.NewValue;
    ((DisruptionIcon)dp).DisplayName = iconDisplayName;
}