Blazor 相当于 WPFs ItemsControl+DataTemplate
Blazor equivalent to WPFs ItemsControl+DataTemplate
在 WPF 中,我可以通过 DataTemplates
自动让我的内容显示在不同的模板中,具体取决于它的类型。
例如,我有两个 类 ChildAViewModel
和 ChildBViewModel
都实现了 IChild
接口。 parent 现在有一个 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;}
}
在 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。
在 WPF 中,我可以通过 DataTemplates
自动让我的内容显示在不同的模板中,具体取决于它的类型。
例如,我有两个 类 ChildAViewModel
和 ChildBViewModel
都实现了 IChild
接口。 parent 现在有一个 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;}
}
在 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。