ListView 标题在滚动时闪烁答案

【问题标题】：ListView headers flickering while scrollingListView 标题在滚动时闪烁
【发布时间】：2014-08-31 14:54:55
【问题描述】：

我的 ListView 有问题。我的数据模板由图像和 2 个文本块组成。但有些图像没有来源，因此不会显示。我认为闪烁的原因是某些项目没有图像（只有文本块），因此它们的大小不同。那我该如何解决呢？

这是我的 xaml 代码：

<Page.Resources>
    <CollectionViewSource x:Name="phts" IsSourceGrouped="True"/>

    <DataTemplate x:Key="AddrBookItemTemplate">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Image Grid.Column="0" Source="{Binding Image}" Name="image" MaxHeight="90" MaxWidth="90" Stretch="Fill" Tag="{Binding Url}"/>
            <Grid Grid.Column="1">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <TextBlock Grid.Row="0" Name="txt1" Text="{Binding Title}" Tag="{Binding Url}"/>
                <TextBlock Grid.Row="1" Name="txt2" Text="{Binding Title2}" Tag="{Binding Url}"/>
            </Grid>
        </Grid>
    </DataTemplate>
    <DataTemplate x:Key="AddrBookGroupHeaderTemplate">
        <Border Background="Transparent" Margin="0,5,0,5" Tag="{Binding Key}">
            <Border Background="#E0E0E0" 
                    Width="400" Height="30" Margin="0,0,0,0" HorizontalAlignment="Left" Tag="{Binding Group_ID}">
                <TextBlock Text="{Binding Key}" Foreground="Black" FontSize="18" Padding="6"
                           FontFamily="{StaticResource PhoneFontFamilySemiLight}" HorizontalAlignment="Left" VerticalAlignment="Center"/>
            </Border>
        </Border>
    </DataTemplate>
</Page.Resources>

<Grid x:Name="grid">
    <ListView Background="White"
              Foreground="Black"
              ItemsSource="{Binding Source={StaticResource phts}}"
              ItemTemplate="{StaticResource AddrBookItemTemplate}">
        <ListView.GroupStyle>
            <GroupStyle HidesIfEmpty="True" HeaderTemplate="{StaticResource AddrBookGroupHeaderTemplate}"/>
        </ListView.GroupStyle>
    </ListView>
</Grid>

这是我的代码：

public sealed partial class TestPage : Page
{

    public TestPage()
    {
        this.ManipulationMode = ManipulationModes.All;
        this.InitializeComponent();

        loadContent();
    }

    /// <summary>
    /// Invoked when this page is about to be displayed in a Frame.
    /// </summary>
    /// <param name="e">Event data that describes how this page was reached.
    /// This parameter is typically used to configure the page.</param>
    protected override void OnNavigatedTo(NavigationEventArgs e)
    {
    }

    private void loadContent()
    {
        NewsGroup group1 = new NewsGroup("Test 1");
        NewsGroup group2 = new NewsGroup("Test 2");
        NewsGroup group3 = new NewsGroup("Test 3");
        NewsGroup group4 = new NewsGroup("Test 4");
        NewsGroup group5 = new NewsGroup("Test 5");
        NewsGroup group6 = new NewsGroup("Test 6");

        List<NewsGroup> groups = new List<NewsGroup>(new NewsGroup[] {group1, group2, group3, group4, group5, group6});

        Random rand = new Random();
        foreach(NewsGroup group in groups)
        {
            for (int i = 0; i < 10; i++)
            {
                ArticleHeader hdr = new ArticleHeader();

                if (rand.Next() % 5 == 2)
                {
                    hdr.Image = "https://pbs.twimg.com/profile_images/1885929594/Nomad_watermark_white.jpg";
                }

                hdr.Title = "Short title";
                hdr.Title2 = "Very big title here should be. Bla bla bla bla bla! Bla bla bla? Blablabl blab bla bla lab bbalblablalb blablalbal";

                group.Add(hdr);
            }
        }

        ((CollectionViewSource)Resources["phts"]).Source = groups;
    }
}

public class ArticleHeader
{
    public string Time { get; set; }
    public string Title { get; set; }
    public string Url { get; set; }
    public string Image { get; set; }
    public string Title2 { get; set; }
}

public class NewsGroup : List<ArticleHeader>
{
    public NewsGroup(string name)
    {
        Key = name;
    }

    public string Key { get; set; }
    public string GroupUrl { get; set; }
    public string Group_ID { get; set; }
}

【问题讨论】：

在 ColumnDefinition 中使用 * 大小而不是 Auto。
@Vishal，这不能解决问题
可以发图片吗？
这只是测试图像。无论图像是什么，我认为问题是 listviewitems 有不同的内容。例如，如果没有图像，则不会发生闪烁，或者如果每个列表视图项都有图像，则也不会发生闪烁。这是我的测试图片：pbs.twimg.com/profile_images/1885929594/…
当我用 gridview 更改我的列表视图时，问题消失了，但 gridview 以不同的方式放置内容，这不适合我

标签： c# xaml listview windows-phone-8 windows-phone-8.1

【解决方案1】：

我遇到了同样类型的问题。当我导航到一个新屏幕时，我的情况发生了，我浏览了一些文档和博客文章，发现如果我在列表或整个 xaml 页面的 xaml 标记中将我的不透明度设置为 99% (0.99)，它就会消失.我知道这是一个非常 hacky 的解决方案，但原来的问题本身没有意义。试试这个，让我知道它是否有效。当我将上面的代码部署到我的设备时，它不会闪烁。我正在使用诺基亚 Lumia 1520 进行测试。

我还建议使用 MVVM 模式，这样您就可以在与 UI 相关的代码之外使用逻辑。会更容易管理和发现问题。只是一个建议:)

【讨论】：

我试图改变不透明度，但这对我没有帮助。这是我当前应用程序的视频，我遇到了这个麻烦。您可以从一开始就看到，顶部标题在闪烁：onedrive.live.com/…

【解决方案2】：

我的应用程序的多个 ListView 中的行为完全相同。唯一的解决方案（据我所知）是将项目内容高度设置为固定值。

还有：使用 min-height 可以减少闪烁，如果只有少数项目具有不同的高度。

【讨论】：