Blazor 相当于 WPFs ItemsControl+DataTemplate

Blazor equivalent to WPFs ItemsControl+DataTemplate

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

例如,我有两个 类 ChildAViewModelChildBViewModel 都实现了 IChild 接口。 parent 现在有一个 List<IChild>,其中包含 ChildAViewModelChildBViewModel.

的不同实例
    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;}
    }

在 parent 的视图中,我现在可以将 child 类 绑定到 DataTemplate 并在 [=21] 中显示我的 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>

所以我在正确的模板中显示了每个 child。

但是,如何在 Blazor/Razor 中存档相同的结果:一个不同 类 的列表但在不同的 UI 元素中显示相同的界面?

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