c# - ListView en Windows Phone 8.1 Wobbles mientras se desplaza por la lista larga(XAML)

windows-runtime windows-phone-8.1

Question

Tengo problemas para desplazarme por ListViews en mi aplicación Windows Phone 8.1. Las listas cortas se desplazan muy bien, se desplazan sin problemas, sin embargo, tan pronto como la virtualización se activa en todo el ListView "se tambalea" hacia la izquierda ligeramente, pero lo suficientemente notable como para ser molesto.

He intentado eliminar todas las transiciones sin ningún efecto, así como hacer que los elementos se carguen de forma incremental sin éxito. Establecer el panel de elementos en un StackPanel (eliminar la virtualización) corrige el problema, pero no es preferible.

Mis listas de vista son vinculantes para una propiedad en DefaultViewModel que viene con la plantilla de página básica.

¿Qué estoy haciendo mal y qué está causando que mi ListViews muestre este comportamiento?

XAML:

<ListView x:Name="searchResultsList" IsItemClickEnabled="True" ItemClick="ListView_ItemClick" ItemsSource="{Binding searchResults}">
   <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 Image}" />
             </Border>

             <StackPanel Grid.Column="2">
                <TextBlock Text="{Binding PodcastTitle}" TextWrapping="WrapWholeWords" FontSize="{StaticResource TextStyleExtraLargeFontSize}" />
                <TextBlock Text="{Binding LastUpdated, Converter={StaticResource dateConverter}}" Style="{ThemeResource ListViewItemSubheaderTextBlockStyle}" />
                <TextBlock Text="{Binding PodcastArtist}" TextWrapping="WrapWholeWords" Style="{ThemeResource ListViewItemContentTextBlockStyle}" />
             </StackPanel>
           </Grid>
       </DataTemplate>
   </ListView.ItemTemplate>
 </ListView>

Answer 1

Así que esto parece ser un problema de sistema operativo, como se evidencia en este hilo en los foros de MS: http://social.msdn.microsoft.com/Forums/en-US/9a363d33-5760-4d38-9c81-84259c4edcbe/listview-jiggles-horizontally-when-large-item-about-to-scroll-in-or-out-in-windows-phone-81-preview?forum=WindowsPhonePreviewSDK&prof=required .

El problema radica en la virtualización, con elementos que no tienen ancho fijo. Usar estrella como el ancho o hacer que la alineación horizontal sea elástica no funcionará, por lo que la única solución que tiene en cuenta la orientación y la resolución es vincular el ancho a la propiedad ActualWidth del contenedor de ListView:

<Grid x:name="contentRoot" Margin="19,9.5,19,0">
<ListView>
 <ListView.ItemTemplate>
   <DataTemplate>
     <Grid Width={Binding ActualWidth, ElementName=contentRoot} />

   </DataTemplate>

 </ListView.ItemTemplate>
</ListView>
</Grid>

Answer 2

El primer elemento en la vista de lista no se visualiza porque el AnchoActual de la Cuadrícula es 0 en el primer segundo, cuando se carga la página. Esta es la solución, eso está funcionando para mí:

<Grid x:Name="contentRoot" Margin="20">
<ListView>
 <ListView.ItemTemplate>
   <DataTemplate>
     <Grid MinWidth="{Binding ActualWidth, ElementName=contentRoot}" />
   </DataTemplate>
 </ListView.ItemTemplate>
</ListView>
</Grid>

Answer 3

Este es un error realmente molesto. No puedo entender por qué esto no se soluciona desde hace años.

Imho estirando elementos en una vista de lista de desplazamiento vertical es una característica muy básica y debería funcionar al 100%.

Una solución posible también es esta cortada, que también debe tener en cuenta los cambios de tamaño:

public class StrechItemsListView : ListView
{
    public StrechItemsListView()
    {
        SizeChanged += StrechItemsListView_SizeChanged;
    }

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

Cambiar el xaml solo a un tipo de vista de lista personalizada es menos trabajo y más limpio, luego edite cada plantilla de datos, etc. Solo mis 2 centavos.

Answer 4

Esto se corrigió en Windows 10 para aplicaciones de Windows 8.1

Answer 5

Mi práctica parece funcionar. Al menos en WP8.1 .

Simplemente configure el ItemsPanelTemplate en el ItemsPanelTemplate <ListView></ListView> explícitamente, pero no use

Style="{StaticResource ListViewStyle1}" u otra cosa.

Código de muestra:

<ListView ItemsSource="{Binding RadioList}" ScrollViewer.HorizontalScrollBarVisibility="Hidden" ScrollViewer.HorizontalScrollMode="Disabled"
            ScrollViewer.VerticalScrollBarVisibility="Hidden" ScrollViewer.VerticalScrollMode="Auto">
        <ListView.ItemTemplate>
            <DataTemplate>
                <Grid Margin="10,3,10,0">
                    <TextBlock Text="{Binding RadioName}" FontSize="15" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
        <ListView.ItemContainerStyle>
            <Style TargetType="ListViewItem">
                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            </Style>
        </ListView.ItemContainerStyle>
        <ListView.ItemsPanel>
            <ItemsPanelTemplate>
                <VirtualizingStackPanel Orientation="Vertical" Width="{Binding PhoneWidth}"/>
            </ItemsPanelTemplate>
        </ListView.ItemsPanel>
    </ListView>

Los ajustes HorizontalContentAlignment y Width of VirtualizingStackPanel se utilizan para centrar el contenido en ListView . Puede mover estos ajustes libremente. No sé por qué, pero funciona.