WPF MVVM单击项目后更改GUI

Question

我目前尝试将RSS源可视化。我创建了2个对象：FeedChannel和FeedElement。 FeedChannel可能包含FeedElement s。

该进料可以具有多个信道，其将被显示这样的：

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

的ChannelClickCommand将保存点击频道进入ActiveChannel属性。在我看来，我现在应该访问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，它应该很好。