How to fix a bug inside of listview Windows Phone 8.1 XAML

Question

I made a list within a HUB and managed successfully, but when I try to create a style to separate the items to be listed I have a very strange bug when I try to slide down in the middle of the list he began to shake just becauseI added a margin, if I remove works normally.

heres my code!

<ListView x:Name="list" Loaded="ListView_Loaded" SelectedItem="true"  SelectionChanged="searchResultsList_SelectionChanged" ItemsSource="{Binding}">
                                    <ListView.ItemContainerStyle>
                                        <Style TargetType="ListViewItem">
                                            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                                            <Setter Property="Margin" Value="0,0,0,20" />
                                        </Style>
                                    </ListView.ItemContainerStyle>
                                    <ListView.ItemTemplate>
                                        <DataTemplate>
                                            <Grid>
                                                <Grid.ColumnDefinitions>
                                                    <ColumnDefinition Width="80" />
                                                    <ColumnDefinition Width="10" />
                                                    <ColumnDefinition Width="*" />
                                                </Grid.ColumnDefinitions>

                                                <Border Width="80" Height="80">
                                                    <Image Source="{Binding Caminho}" />
                                                </Border>

                                                <StackPanel Margin="0,16,0,0" Grid.Column="2">
                                                    <TextBlock Foreground="White" Text="{Binding NomeCurso}" TextWrapping="WrapWholeWords" FontSize="{StaticResource TextStyleExtraLargeFontSize}" />

                                                </StackPanel>
                                            </Grid>
                                        </DataTemplate>
                                    </ListView.ItemTemplate>
                                </ListView>

so my bug is specially in this part of code :

<Setter Property="Margin" Value="0,0,0,20" />

if i leave this Works well,somebody knows what is it ?

Answer 1

That is strange it should work. but to fix your issue you can use margin with your datatemplate grid. set margin to the main grid of listitem data template

   <DataTemplate>
                                        <Grid Margin="0,0,0,20">
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition Width="80" />
                                                <ColumnDefinition Width="10" />
                                                <ColumnDefinition Width="*" />
                                            </Grid.ColumnDefinitions>

                                            <Border Width="80" Height="80">
                                                <Image Source="{Binding Caminho}" />
                                            </Border>

                                            <StackPanel Margin="0,16,0,0" Grid.Column="2">
                                                <TextBlock Foreground="White" Text="{Binding NomeCurso}" TextWrapping="WrapWholeWords" FontSize="{StaticResource TextStyleExtraLargeFontSize}" />

                                            </StackPanel>
                                        </Grid>
                                    </DataTemplate>

Answer 2

This is a bug in WP 8.1 and it has something to do with virutalization.

You need to specify the width explicitly for each item or use what I use (thanks to Rudy ), which is an extended ListView that fixes this problem and the margins will still work:

public class PerfectScrollListView : ListView
{
    public PerfectScrollListView()
    {
        this.SizeChanged += PerfectScrollListView_SizeChanged;
    }

    private void PerfectScrollListView_SizeChanged(object sender, SizeChangedEventArgs e)
    {
        if (ItemsPanelRoot != null)
        {
            ItemsPanelRoot.Width = e.NewSize.Width;
        }
    }
}