c# - 根据 VM 的属性将 VM 绑定(bind)到不同的 View

Question

现在我有以下代码:

查看模型

public class VMBase
{
   public string TabID{get;set;}
   public string TabHeader {get;set;}
}

public class VM1:VMBase //implements the properties in base class
{
}

public class VM2:VMBase //implements the properties in base class
{
}

在我的 DataTemplate.xaml ，我将不同的本地控件绑定(bind)到 ViewModel ，取决于 ViewModel 的类型它是，即:

<DataTemplate DataType="{x:Type VM:VM1}">
  <local: Control1 />
</DataTemplate>
<DataTemplate DataType="{x:Type VM:VM2}">
  <local: Control2 />
</DataTemplate>

Control1和 Control2是不同类型的 UserControl :

public class Control1:UserControl
{
}

public class Control2:UserControl
{
}

当我只有 VMBase 的两个派生类时，事情仍然可以管理。 ，但是如果我有十个呢？或者更多？它会变得丑陋。

是否可以将单个 VM 绑定(bind)到不同的 View (用户控制) ，这样我就不必为 VMBase 手动创建这么多派生类?我只需要指定 VM 属性，例如 TabID和 TabHeader ，因此将绑定(bind)正确的 View 。

编辑:

以下是更多详细信息:我的 VM 绑定(bind)到 ContentControl(即: contentcontrol.Content=VM)。每个虚拟机都有两个属性 TabID和 Header .是否 DataTemplateSelector应该调用取决于它是否具有特定的 TabID (如果它有其他 TabID 则不应调用此 DataTemplateSelector)，调用哪个 DataTemplate(DataTemplateSelector 内部的逻辑)进一步取决于 Header .如何实现？

Answer 1

更新的答案 - v2(根据问题编辑)

我认为只需返回 null在您的 DataTemplateSelector当TabID is not a match 应该可以解决问题，因为 WPF 然后会尝试选择下一个最佳匹配项(即与 DataType 匹配的模板)。万一TabID是匹配的，可以根据TabHeader返回模板值(value)。

所以你的自定义DataTemplateSelector看起来像这样:

public class TabHeaderDataTemplateSelector : DataTemplateSelector
{
    public override DataTemplate SelectTemplate(object item, DependencyObject container)
    {
        var element = container as FrameworkElement;
        if (element == null)
            return null;

        var viewModel = item as VMBase;
        if (viewModel == null || viewModel.TabID != "02") 
            return null; //continue only if TabID is a match

        if (viewModel != null)
        {
            switch(viewModel.TabHeader)
            {
                case "two":
                    return element.FindResource($"Template2") as DataTemplate;
                case "three":
                    return element.FindResource($"Template3") as DataTemplate;
            }
        }

        return null;
    }
}

示例 XAML

<Window.Resources>
    <!-- data template for VM1 -->
    <DataTemplate DataType="{x:Type local:VM1}">
        <Grid>
            <Rectangle Stroke="Black" />
            <TextBlock Margin="5" Text="{Binding TabHeader}" FontSize="18"/>
        </Grid>
    </DataTemplate>

    <!-- data template for VM2 -->
    <DataTemplate DataType="{x:Type local:VM2}">
        <Grid>
            <Rectangle Stroke="Red" />
            <TextBlock Margin="5" Text="{Binding TabHeader}" FontSize="18"/>
        </Grid>
    </DataTemplate>

    <DataTemplate x:Key="Template2">
        <Grid>
            <Ellipse Stroke="Green" StrokeThickness="4"/>
            <TextBlock Margin="10" Text="{Binding TabHeader}" FontSize="24" 
                Foreground="Red" FontWeight="Bold"
                HorizontalAlignment="Center" VerticalAlignment="Center" />
        </Grid>
    </DataTemplate>

    <DataTemplate x:Key="Template3">
        <Grid>
            <TextBlock Margin="10" Text="{Binding TabHeader}" FontSize="24" 
                Foreground="White" Background="Black" FontWeight="Bold"
                HorizontalAlignment="Center" VerticalAlignment="Center" />
        </Grid>
    </DataTemplate>

    <Style TargetType="ContentControl">
        <Setter Property="ContentTemplateSelector">
            <Setter.Value>
                <local:TabHeaderDataTemplateSelector />
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>
<StackPanel Margin="25">
    <ContentControl Content="{Binding VmObj_1}" />
    <ContentControl Content="{Binding VmObj_2}" />
    <ContentControl Content="{Binding VmObj_3}" />
    <ContentControl Content="{Binding VmObj_4}" />
</StackPanel>

和代码隐藏

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();

        this.DataContext = new
        {
            VmObj_1 = new VM1 { TabID = "01", TabHeader = "one" },
            VmObj_2 = new VM1 { TabID = "02", TabHeader = "two" },
            VmObj_3 = new VM2 { TabID = "02", TabHeader = "three" },
            VmObj_4 = new VM2 { TabID = "03", TabHeader = "four" },
        };
    }
}

public class VMBase
{
    public string TabID { get; set; }
    public string TabHeader { get; set; }
}

public class VM1 : VMBase { }

public class VM2 : VMBase { }

更新的答案 - v1

您可以通过两种不同的方式解决此问题。每个选项都有自己的优缺点；但我最推荐的方法是(正如@jon-stødle 建议的那样)是使用 DataTemplateSelector
选项 1 - 使用数据模板选择器

当您使用 Type基于数据模板 - 那么我假设您最有可能使用 ContentControl (或变体)显示动态 View 模型驱动的 UI。 ContentControl和其他模板化控件，例如 Label , UserControl , ItemsControl , ListBox等通常具有依赖属性，如 ContentTemplateSelector或 ItemTemplateSelector您可以将模板选择器绑定(bind)到。

您可以引用 this link使用 Label 的示例与 DataTemplateSelector ;或以下示例用于 TabControl
XAML:

<Window.Resources>
    <DataTemplate x:Key="Tab1Template">
        <Grid>
            <Rectangle Stroke="Black" />
            <TextBlock Margin="5" Text="{Binding}" FontSize="18"/>
        </Grid>
    </DataTemplate>

    <DataTemplate x:Key="Tab2Template">
        <Grid>
            <Ellipse Stroke="Green" StrokeThickness="4"/>
            <TextBlock Margin="10" Text="{Binding}" FontSize="24" 
                        Foreground="Red" FontWeight="Bold"
                        HorizontalAlignment="Center" VerticalAlignment="Center" />
        </Grid>
    </DataTemplate>

    <DataTemplate x:Key="Tab3Template">
        <Grid>
            <TextBlock Margin="10" Text="{Binding}" FontSize="24" 
                        Foreground="White" Background="Black" FontWeight="Bold"
                        HorizontalAlignment="Center" VerticalAlignment="Center" />
        </Grid>
    </DataTemplate>

    <Style TargetType="{x:Type TabControl}">
        <Setter Property="ContentTemplateSelector">
            <Setter.Value>
                <local:TabIdDataTemplateSelector />
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>
<TabControl>
    <TabControl.ItemsSource>
        <col:ArrayList>
            <sys:String>1</sys:String>
            <sys:String>2</sys:String>
            <sys:String>3</sys:String>
        </col:ArrayList>
    </TabControl.ItemsSource>
</TabControl>

数据模板选择器:

public class TabIdDataTemplateSelector : DataTemplateSelector
{
    public override DataTemplate SelectTemplate(object item, DependencyObject container)
    {
        var element = container as FrameworkElement;
        if (element == null)
            return null;

        //var vm = item as VMBase;
        //var id = vm.TabId;
        string id = item as string;
        if (id != null)
        {
            return element.FindResource($"Tab{id}Template") as DataTemplate;
        }

        return null;
    }

}

选项 2 - 使用 Style基于数据触发器

另一种选择是在 ViewModel 的属性(即 TabId)上使用数据触发器来更新 ContentTemplate您的容器 View (即 TabControl )。

<Window.Resources>
    <DataTemplate x:Key="Tab1Template">
        <Grid>
            <Rectangle Stroke="Black" />
            <TextBlock Margin="5" Text="{Binding Key}" FontSize="18"/>
        </Grid>
    </DataTemplate>

    <DataTemplate x:Key="Tab2Template">
        <Grid>
            <Ellipse Stroke="Green" StrokeThickness="4"/>
            <TextBlock Margin="10" Text="{Binding Key}" FontSize="24" 
                    Foreground="Red" FontWeight="Bold"
                    HorizontalAlignment="Center" VerticalAlignment="Center" />
        </Grid>
    </DataTemplate>

    <DataTemplate x:Key="Tab3Template">
        <Grid>
            <TextBlock Margin="10" Text="{Binding Key}" FontSize="24" 
                    Foreground="White" Background="Black" FontWeight="Bold"
                    HorizontalAlignment="Center" VerticalAlignment="Center" />
        </Grid>
    </DataTemplate>

    <Style TargetType="{x:Type TabControl}">
        <Style.Triggers>
            <DataTrigger Binding="{Binding TabId}" Value="1">
                <Setter Property="ContentTemplate" Value="{StaticResource ResourceKey=Tab1Template}" />
            </DataTrigger>
            <DataTrigger Binding="{Binding TabId}" Value="2">
                <Setter Property="ContentTemplate" Value="{StaticResource ResourceKey=Tab2Template}" />
            </DataTrigger>
            <DataTrigger Binding="{Binding TabId}" Value="3">
                <Setter Property="ContentTemplate" Value="{StaticResource ResourceKey=Tab3Template}" />
            </DataTrigger>
        </Style.Triggers>
    </Style>
</Window.Resources>
<TabControl DisplayMemberPath="Value" SelectedValuePath="Key" 
            SelectedValue="{Binding TabId}">
    <TabControl.ItemsSource>
        <col:Hashtable>
            <sys:String x:Key="1">one</sys:String>
            <sys:String x:Key="2">two</sys:String>
            <sys:String x:Key="3">three</sys:String>
        </col:Hashtable>
    </TabControl.ItemsSource>
</TabControl>