Blazor 等效于 WPF ItemsControl+DataTemplate

Question

在 WPF 中，我可以通过 DataTemplates 自动将我的内容显示在不同的模板中，具体取决于它的类型。

例如，我有两个类ChildAViewModel 和ChildBViewModel，它们都实现了IChild 接口。父级现在有一个List<IChild>，其中包含ChildAViewModel 和ChildBViewModel 的不同实例。

    public interface IChild
    {
        public string Name { get; set; }
    }

    public class ChildAViewModel : IChild
    {
        public string Name { get; set; }
    }

    public class ChildBViewModel : IChild
    {
        public string Name { get; set; }
    }

    public class ParentViewModel
    {
        public ParentViewModel()
        {
            Children = new();
            Children.Add(new ChildAViewModel() { Name = "ernie" });
            Children.Add(new ChildBViewModel() { Name = "bert" });
        }
        List<IChild> Children { get; set;}
    }

在父视图中，我现在可以将子类绑定到DataTemplates 并在ItemsControl 中显示我的List<IChild>。

    <UserControl.Resources>

        <DataTemplate DataType="{x:Type local:ChildAViewModel}">
            <!--  something  -->
        </DataTemplate>

        <DataTemplate DataType="{x:Type local:ChildBViewModel}">
            <!--  something different  -->
        </DataTemplate>

    </UserControl.Resources>

    <StackPanel>

        <ItemsControl ItemsSource="{Binding Children}"/>

    </StackPanel>

所以我让每个孩子都显示在正确的模板中。

但是，如何在 Blazor/Razor 中归档相同的结果：不同类的一个列表，但相同的界面显示在不同的 UI 元素中？

Answer 1

XAML 和 Razor 是两个完全不同的东西，因此没有真正的等价物，但在 Blazor 中，您可以更灵活地直接在标记中执行操作。例如，您可以直接在类型上使用 switch：

@foreach (var item in Children)
{
    switch (item)
    {
        case ChildAViewModel:
            <div>template a...</div>
            break;
        case ChildBViewModel:
            <div>template b...</div>
            break;
    }
}

您还可以将两个不同的template parameters 添加到您的组件中。