WPF MVVM項目をクリックした後にGUIを変更します

Question

現在、RSSフィードを視覚化しようとしています。私は2つのオブジェクト：FeedChannelとFeedElementを作成しました。 FeedChannelは、FeedElementを含むことがあります。

<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> 

ChannelClickCommandActiveChannelプロパティにクリックされたチャンネルを保存します：

このフィードは次のように表示される複数のチャネルを有していてもよいです。私の見解では、ActiveChannelにアクセスしてFeedElementを表示する必要があります。 （！とチャンネルのみ）：すべての非常に簡単に行うのですが、私は次のように正しいアプローチ見つけるのに苦労

は、ユーザーが最初にすべてのチャンネルを見ていることを考えると、彼は今、それらのいずれかとをクリックしてすべての要素が表示されます（チャンネルは表示されなくなります）。彼は、ボタンをクリックしたり、同様の方法ですべてのチャンネルを表示することができます。

私はStackpanelsを使用して、必要なものに応じて表示/折りたたみを行うことを考えましたが、この問題の解決策はありますか？

Answer 1

同じリスト内のチャンネルと要素を持つUI/UXの観点からは、それを処理する最善の方法は不明です。しかし、あなたの質問に答えるには、DataTemplateSelectorプロパティを見てみるか、DataTemplate要素のDataTypeプロパティを使うことができます。あまり詳細に入るがなければ

は（ウェブサイト上で少し検索があなたに必要なすべての情報を与える）、ここでDataType性質を持つソリューションです：

<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> 

だけからあなたのFeedプロパティの要素を置き換えますChannelClickCommandとうまく動作するはずです。