WPF MVVM GUI ändern nach dem Klicken auf Artikel

Question

Ich versuche derzeit, einen RSS-Feed zu visualisieren. Ich habe 2 Objekte erstellt: FeedChannel und FeedElement. Die FeedChannel kann FeedElement s enthalten.

Dieses Futter mehrere Kanäle haben, die wie folgt dargestellt werden:

<Grid> 
    <ScrollViewer> 
     <ListBox ItemsSource="{Binding Feed, IsAsync=True}" x:Name="ListFeed"> 
      <i:Interaction.Triggers> 
       <i:EventTrigger EventName="MouseLeftButtonUp"> 
        <i:InvokeCommandAction Command="{Binding ChannelClickCommand}" CommandParameter="{Binding ElementName=ListFeed, Path=SelectedItem}" /> 
       </i:EventTrigger> 
      </i:Interaction.Triggers> 
      <ListBox.ItemTemplate> 
       <DataTemplate> 
        <StackPanel Orientation="Horizontal"> 
         <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch"> 
          <Grid.ColumnDefinitions> 
           <ColumnDefinition Width="Auto"/> 
           <ColumnDefinition Width="*"/> 
          </Grid.ColumnDefinitions> 
          <Image Grid.Column="0" Margin="0,0,10,0" Source="{Binding ImageLink}" VerticalAlignment="Top" Width="100" Height="50"/> 
          <StackPanel Grid.Column="1" Orientation="Vertical"> 
           <TextBlock Text="{Binding Title}" FontWeight="ExtraBold" /> 
           <TextBlock Text="{Binding Description}" /> 
           <TextBlock Text="{Binding PublicationDate}" HorizontalAlignment="Right" FontWeight="Thin"/> 
          </StackPanel> 
         </Grid>       
        </StackPanel>      
       </DataTemplate> 
      </ListBox.ItemTemplate> 
     </ListBox> 
    </ScrollViewer> 
</Grid> 

Die ChannelClickCommand das geklickt Kanal in die ActiveChannel Eigenschaft speichern. Aus meiner Sicht sollte ich nun auf die ActiveChannel zugreifen und die FeedElement s darin anzeigen.

Das ist alles ganz leicht getan, aber ich kämpfen, um den richtigen Ansatz für die folgenden bei der Suche nach: (! Und nur Channels)

Da der Benutzer sieht zunächst alle Kanäle, kann er einen von ihnen klicken dann und wann Alle Elemente werden angezeigt (keine Kanäle sind mehr sichtbar). Er kann zurückgehen, um alle Kanäle mit einem Button-Klick oder ähnlichem anzuzeigen.

Ich habe über Stackpanels nachgedacht und sie je nach Bedarf sichtbar/zusammengelegt, aber gibt es eine bessere Lösung für dieses Problem?

Answer 1

Nicht sicher, dass aus UI/UX Sicht der Kanäle und Elemente in der gleichen Liste der beste Weg ist, damit umzugehen. Aber um Ihre Frage zu beantworten, können Sie sich die DataTemplateSelector Eigenschaft ansehen, oder Sie könnten die DataType Eigenschaft auf dem DataTemplate Element verwenden.

Ohne zu sehr ins Detail zu gehen (eine wenig Suche auf der Website gibt Ihnen alle erforderlichen Informationen), hier ist eine Lösung, mit der DataType Eigenschaft:

<Grid> 
    <ListBox ItemsSource="{Binding Feed, IsAsync=True}" x:Name="ListFeed">   
     <i:Interaction.Triggers> 
      <i:EventTrigger EventName="MouseLeftButtonUp"> 
       <i:InvokeCommandAction Command="{Binding ChannelClickCommand}" CommandParameter="{Binding ElementName=ListFeed, Path=SelectedItem}" /> 
      </i:EventTrigger> 
     </i:Interaction.Triggers> 

     <ListBox.Resources> 
      <ResourceDictionary> 
       <DataTemplate DataType="{x:Type my:FeedChannel}"> 
        <StackPanel Orientation="Horizontal"> 
         <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch"> 
          <Grid.ColumnDefinitions> 
           <ColumnDefinition Width="Auto"/> 
           <ColumnDefinition Width="*"/> 
          </Grid.ColumnDefinitions> 
          <Image Grid.Column="0" Margin="0,0,10,0" Source="{Binding ImageLink}" VerticalAlignment="Top" Width="100" Height="50"/> 
          <StackPanel Grid.Column="1" Orientation="Vertical"> 
           <TextBlock Text="{Binding Title}" FontWeight="ExtraBold" /> 
           <TextBlock Text="{Binding Description}" /> 
           <TextBlock Text="{Binding PublicationDate}" HorizontalAlignment="Right" FontWeight="Thin"/> 
          </StackPanel> 
         </Grid>       
        </StackPanel>      
       </DataTemplate> 

       <DataTemplate DataType="{x:Type my:FeedElement}"> 
        <!-- Your data template for FeedElement --> 
       </DataTemplate> 
      </ResourceDictionary> 
     </ListBox.Resources> 
    </ListBox> 
</Grid> 

Ersetzen Sie einfach die Elemente in Ihrer Feed Eigenschaft von die ChannelClickCommand und es sollte gut funktionieren.