Question

如何根据ViewModel中的属性设置切换UserControl？

如果Vm.View =＆＃34; A＆＃34;

<Window>
<local:UserControlA/>
</Window>

如果Vm.View =＆＃34; B＆＃34;

<Window>
<local:UserControlB/>
</Window>

Vm.View是一个枚举，有一天可能会允许C，D等。两个UserControl都绑定到相同的Vm，但它们根据用户的输入呈现完全不同的数据。因此，基于类型的DataTemplate在这里确实不起作用。

思想？

Answer 1

在Window中添加 ContentControl ，并根据 View 值设置 ContentTemplate 使用 DataTriggers 。

<ContentControl Content="{Binding}">
    <ContentControl.Style>
        <Style TargetType="ContentControl">
            <Setter Property="ContentTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <local:UserControlA/>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <DataTrigger Binding="{Binding View}" Value="B">
                    <Setter Property="ContentTemplate">
                        <Setter.Value>
                            <DataTemplate>
                                <local:UserControlB/>
                            </DataTemplate>
                        </Setter.Value>
                    </Setter>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </ContentControl.Style>
</ContentControl>

Answer 2

您可以利用DataTemplate的{{3}}属性，并让绑定引擎处理剩下的事情......

XAML

<Window.Resources>
    <DataTemplate DataType="localEnums:ProduceType.Apples">
        <local:ApplesView />
    </DataTemplate>
    <DataTemplate DataType="localEnums:ProduceType.Oranges">
        <local:OrangesView />
    </DataTemplate>
</Window.Resources>
<StackPanel>
    <ContentPresenter Content="{Binding ProduceType}" />
    <Button Content="Change Produce" Click="Button_Click"/>
</StackPanel>

查看模型

public class ProduceViewModel : ViewModel
{
    public ProduceViewModel()
    {
        this.ProduceType = ProduceType.Apples;
    }

    private ProduceType _produceType;

    public ProduceType ProduceType
    {
        get
        {
            return _produceType;
        }
        set
        {
            if (_produceType != value)
            {
                _produceType = value;
                RaisePropertyChanged();
            }
        }
    }
}

按钮单击处理程序（违反纯MVVM但仅用于演示DataTemplate切换）

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        (this.DataContext as ProduceViewModel).ProduceType = ProduceType.Oranges;
    }

根据属性切换UserControl

2 个答案: