如何使用 MVVM 模式在 WPF 中动态绑定 UserControl

Question

目前我正在使用 WPF MVVM 应用程序，我想在其中使用 ItemsControl 在 MainWindow.xaml 中显示 UserControl。根据要求，我必须通过从 ViewModel 管理一些条件来切换或绑定不同的用户控件。正如我在下面的代码中提到的，应该绑定 UserControl。但目前的问题是它的静态和完美的工作。但我无法根据条件更改它。那么有什么可以在运行时从 ViewModel 更改 UserControlColumn1XL 的吗？提前致谢。

<StackPanel Grid.Column="0" Background="Black" VerticalAlignment="Top" >

            <ItemsControl ItemsSource="{Binding NormalCollection}" Name="ListNormal" Margin="4,0" >

                <ItemsControl.ItemsPanel>

                    <ItemsPanelTemplate>

                        <WrapPanel HorizontalAlignment="Left" />

                    </ItemsPanelTemplate>

                </ItemsControl.ItemsPanel>

                <ItemsControl.ItemTemplate>

                    <DataTemplate>

                        <!--<This below line should be dynamically change through MVVM code>-->

                        <controls:UserControlColumn1XL HorizontalAlignment="Left" Margin="2" />

                    </DataTemplate>

                </ItemsControl.ItemTemplate>

            </ItemsControl>

    </StackPanel>

Answer 1

这里有一个使用的例子DataTemplateSelector......这里有一个简单的ViewModel：public class YourCustomObject : INotifyPropertyChanged{&nbsp; &nbsp; public string YourProperty { get; set; }&nbsp; // Remember to rise propertychanged&nbsp; &nbsp; public event PropertyChangedEventHandler PropertyChanged;}public class YourViewModel&nbsp;{&nbsp; &nbsp; public ObservableCollection<YourCustomObject> Objects { get; set; }}定义要使用的不同模板：<ItemsControl ItemsSource="{Binding Objects}" Name="ListNormal" Margin="4,0">&nbsp; &nbsp; <ItemsControl.Resources>&nbsp; &nbsp; &nbsp; &nbsp; <DataTemplate x:Key="firstDataTemplate">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <UserControl1 />&nbsp; &nbsp; &nbsp; &nbsp; </DataTemplate>&nbsp; &nbsp; &nbsp; &nbsp; <DataTemplate x:Key="otherDataTemplate">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <UserControl2 />&nbsp; &nbsp; &nbsp; &nbsp; </DataTemplate>&nbsp; &nbsp; </ItemsControl.Resources>创建一个继承自的类DataTemplateSelector：&nbsp;public class MySelector : DataTemplateSelector{&nbsp; &nbsp; public override DataTemplate SelectTemplate(object item, DependencyObject container)&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; FrameworkElement element = container as FrameworkElement;&nbsp; &nbsp; &nbsp; &nbsp; if (element != null && item != null && item is YourCustomObject)&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; YourCustomObject taskitem = item as YourCustomObject;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // HERE i'm putting the custom logic for choosing the correct template&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (taskitem.YourProperty == "Value 1")&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; element.FindResource("firstDataTemplate") as DataTemplate;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; else&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; element.FindResource("otherDataTemplate") as DataTemplate;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; return null;&nbsp; &nbsp; }}将选择器的一个实例添加到您的主视图中：<Window.Resources>&nbsp; &nbsp; <local:MySelector x:Key="Selector"/></Window.Resource>将的ItemTemplateSelector属性设置ItemsControl为 Selector：<ItemsControl ItemsSource="{Binding Objects}" Name="ListNormal" Margin="4,0" ItemTemplateSelector="{StaticResource Selector}">

Answer 2

通常这样做的方法是使用 DataTemplates。从ObservableCollection<object> Objects您的 ViewModel 中的an 开始...它不一定是<object>，如果您愿意，它可以是一些常见的基类。然后在您的 XAML 中为每种类型添加 DataTemplates。我把它们放在ItemsControl.Resources这里，但你可以把它们放在UserControl.Resources你觉得合适的地方：<ItemsControl>&nbsp; &nbsp; <ItemsControl.Resources>&nbsp; &nbsp; &nbsp; &nbsp; <DataTemplate DataType="{x:Type viewmodels:YourViewModel1}">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <views:UserControl1 />&nbsp; &nbsp; &nbsp; &nbsp; </DataTemplate>&nbsp; &nbsp; &nbsp; &nbsp; <DataTemplate DataType="{x:Type viewmodels:YourViewModel2}">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <views:UserControl2 />&nbsp; &nbsp; &nbsp; &nbsp; </DataTemplate>&nbsp; &nbsp; &nbsp; &nbsp; ... etc ...还要删除<ItemsControl.ItemTemplate>标签，因为如果不这样做，它只会覆盖 DataTemplates。这就是你需要做的！每次有一个类型的对象时YourViewModel1，Objects它都会与 UserControl1 一起显示，并且对于您指定的所有其他模板也是如此。