Xbox Video - Umsetzung dieses Listenstils

Hallo,

ich habe ein privates Projekt am laufen und stehe nun gewaltig auf dem Schlauch. Und zwar würde ich gerne eine Liste kreieren (WPF, .NET4.5.1, Desktop-Anwendung), die sich an der Xbox Video App orientiert (siehe Screenshot). Also eine Liste, die sich von Links nach Rechts aufbaut aber von oben nach unten gescrollt werden kann. Außerdem sollen die Bilder erst geladen werden, wenn Sie wirklich in den Fokus (also sichtbar werden) rücken.

Kann mir jemand Tipps geben, wie ich sowas umsetzen kann?

Hallo,

das kannst du mit einer ListView machen:

<ListView Name="MyLIstView" ScrollViewer.HorizontalScrollBarVisibility="Disabled" >
    <ListView.ItemTemplate>
        <DataTemplate>
            <Border BorderThickness="2" CornerRadius="5" BorderBrush="AliceBlue" >
                <TextBlock Margin="5" Text="{Binding Path=Name}" ></TextBlock>
            </Border>
        </DataTemplate>
    </ListView.ItemTemplate>
    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel Orientation="Horizontal" />
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
</ListView>

Richtig, mit einer ListView geht sowas wunderbar!

Zum Thema "Bilder sollen erst geladen werden wenn sie wirklich sichtbar werden". Genau für so einen Fall verwendet man das WrapGrid. Dieses Control unterstützt Virtualisierung des Inhaltes, was soviel bedeutet wie, die Items werden erst dann gerendert, wenn sie in den Fokus kommen.
MSDN: "The content of a WrapGrid is virtualized. This can improve performance when you work with large data sets. For more info, see Load, store, and display large sets of data efficiently." https://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.wrapgrid.aspx

Jetzt kannst du sagen, erst wenn deine Getter-Property in deinem ViewModel angesprochen wird, lädst du das Bild. Beispiel:

private ImageSource _image;
public ImageSource Image
{
 get 
 {
   if (_image != null) return _image; 
  
   LoadImageAsync();
   return _image;
}

Die Methode LoadImageAsync machst wie der Name schon sagt asynchron. Wenn du sie dann noch innerhalb eines neuen Task startest, blockierst du auch nicht die UI:

Task.Run(async () => await LoadImageAsync());

Den Task den du von Task.Run zurück bekommst, speicherst du dir in eine Variable um zu prüfen ob der Task schon läuft (in deinem Getter). Dadurch verhinderst du mehrfaches laden des Bildes.

Lg

Vielen Dank euch beiden! Ich hab zwar ne Weile ins Land gehen lassen müssen, aber hab letztens mal wieder Zeit gefunden und konnte eure Ideen fantastisch umsetzen, auch wenn es in Desktop-Applicationen das WrapGrid scheinbar nicht gibt. Hab ein VirtualizingWrapPanel gefunden und das funktioniert super!