动态加载 WPF UI答案

【问题标题】：Loading WPF UI dynamically动态加载 WPF UI
【发布时间】：2017-07-22 09:54:24
【问题描述】：

在我最近的项目中，我必须根据在组合框中选择的选项动态填充 WPF 窗口。例如，如果选择了选项 A，则会填充一个窗口，如果选择了选项 b，则会填充另一个窗口。如何使用 MVVM 来做到这一点。

只是为了详细说明。在该下拉列表中，我有三个选项，一个用于基本身份验证，一个用于 OAUTH 身份验证，另一个用于 NoAuth。因此，根据下拉菜单中选择的选项，UI 将填充。基本上我想要一个基于数据的模板。

【问题讨论】：

这个问题太笼统了。详细了解您想要实现的目标。

标签： wpf mvvm data-binding

【解决方案1】：

您为什么将这个问题与 MVVM 联系起来？是不是因为您的组合框与您要填充的窗口不在同一个视图上（仍然不够好）。

让我们首先回答组合框在同一个视图中的情况（这里不需要视图模型）。你只需要使用数据触发器+元素名称

<ComboBox x:Name="authSelector" >
        <ComboBoxItem >Basic</ComboBoxItem>
        <ComboBoxItem>OAUTH</ComboBoxItem>
        <ComboBoxItem>NoAuth</ComboBoxItem>
    </ComboBox>

    <ContentControl Content="{Binding}">
        <ContentControl.Style>
            <Style TargetType="ContentControl">
                <Style.Triggers>
                    <DataTrigger Binding="{Binding ElementName=authSelector,Path=SelectionBoxItem}" Value="Basic">
                        <Setter Property="ContentTemplate" Value="{StaticResource basicTemplate}" />
                    </DataTrigger>
                    <DataTrigger Binding="{Binding ElementName=authSelector,Path=SelectionBoxItem}" Value="OAUTH">
                        <Setter Property="ContentTemplate" Value="{StaticResource OAUTHTemplate}" />
                    </DataTrigger>
                    <DataTrigger Binding="{Binding ElementName=authSelector,Path=SelectionBoxItem}" Value="NoAuth">
                        <Setter Property="ContentTemplate" Value="{StaticResource noAuthTemplate}" />
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </ContentControl.Style>
    </ContentControl>

这里是这里使用的数据模板

<DataTemplate x:Key="basicTemplate" >
        <StackPanel>
            <TextBlock Text="basicTemplate"/>
        </StackPanel>
    </DataTemplate>

    <DataTemplate x:Key="OAUTHTemplate" >
        <StackPanel>
            <TextBlock Text="OAUTH Template"/>
        </StackPanel>
    </DataTemplate>

    <DataTemplate x:Key="noAuthTemplate" >
        <StackPanel>
            <TextBlock Text="noAuth Template"/>
        </StackPanel>
    </DataTemplate>

如果您的组合框不在同一个视图上，并且您想使用视图模型来获取所选项目，则在视图模型中创建名为 SelectedAuthType 的属性并在数据触发器中使用该属性而不是数据触发器中的这个

ElementName=authSelector,Path=SelectionBoxItem

喜欢这个

<DataTrigger Binding="{Binding SelectedAuthType }" Value="Basic">

【讨论】：