Question

我正在使用MVVM结构在我的应用程序中实现用户控件。如何在一个页面中绑定不同的用户控件并显示在窗口屏幕中。如下图所示。我要和图像中的一样。

ViewModel代码

public RelayCommand OpenWidgetList => new RelayCommand(() =>
    {       
            ControlList = new List<UserControl>();
            ControlList.Add(ObjColumn1L);
            ControlList.Add(ObjColumn1L);
            ControlList.Add(ObjColumn1M);
            ControlList.Add(ObjColumn1S);
            ControlList.Add(ObjColumn1XL);
            ControlList.Add(ObjColumn1XXL);
            ControlList.Add(ObjColumn2L);
            ControlList.Add(ObjColumn2M);
            ControlList.Add(ObjColumn2S);
            ControlList.Add(ObjColumn2XL);
            ControlList.Add(ObjColumn2XXL);
            ControlList.Add(ObjColumn3L);
            ControlList.Add(ObjColumn3M);
            ControlList.Add(ObjColumn3S);
            ControlList.Add(ObjColumn4M);
            ControlList.Add(ObjColumn4S);
    }, true);

XAML代码

    <UniformGrid Name="widgetData" Background="Black" VerticalAlignment="Top" Height="691" Margin="0,50,0,0">
        <UniformGrid Columns="3">
            <UniformGrid Rows="6">
                <UniformGrid>
                    <ItemsControl ItemsSource="{Binding ControlList}" Name="UserControlColumn" Margin="4,0" >
                        <ItemsControl.ItemsPanel>
                            <ItemsPanelTemplate>
                                <WrapPanel HorizontalAlignment="Left" />
                            </ItemsPanelTemplate>
                        </ItemsControl.ItemsPanel>
                        <ItemsControl.ItemTemplate>
                            <DataTemplate>
                                <controls:UserControlColumn HorizontalAlignment="Left" Margin="2" />
                            </DataTemplate>
                        </ItemsControl.ItemTemplate>
                    </ItemsControl>
                </UniformGrid>
            </UniformGrid>
        </UniformGrid>
    </UniformGrid>
</Grid>

Answer 1

是的，我找到了答案。通过编码，我做了很多尝试，但是不能做到，但是我以一种简单的方式在XAML方面做了。只能复制代码，并将每个用户控件分别与DataCollection变量中来自后端的一个数据单独绑定。无需从后端代码绑定每个用户控件。下面是我的WPF文件的XAML代码。重复进行每个用户控件以表格形式绑定的操作。

<UniformGrid Rows="1">
    <ItemsControl ItemsSource="{Binding DataCollection}" Name="UserControlColumn1" Margin="4,0">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel HorizontalAlignment="Left" />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <controls:UserControlColumn1 HorizontalAlignment="Left" Margin="2" />
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</UniformGrid>

<UniformGrid Rows="1">
    <ItemsControl ItemsSource="{Binding DataCollection}" Name="UserControlColumn2" Margin="4,0">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel HorizontalAlignment="Left" />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <controls:UserControlColumn2 HorizontalAlignment="Left" Margin="2" />
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</UniformGrid>

<!--Same for other user Controls as above two...-->

Answer 2

每个用户控件都有自己的数据上下文，因此在主视图模型中为每个用户控件视图模型添加一个属性，然后将其绑定。像这样：

UserControl1ViewModel
{
    ....
}

MainViewModel
{
    UserControl1ViewModel UserControl1ViewModel {get; private set;}
}

WPF MVVM在Windows页面中绑定不同UserControl的列表

2 个答案: