Question

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

此Feed可能有多个频道，显示如下：

<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属性，也可以使用DataType元素上的DataTemplate属性。

如果没有太多详细信息（网站上的一些搜索将为您提供所有必需的信息），这里有一个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即可，它应该可以正常工作。

单击项目后，WPF MVVM更改GUI

1 个答案: