将用户控件列表插入特定的列和行答案

【问题标题】：Insert list of user control to a specific column and rows将用户控件列表插入特定的列和行
【发布时间】：2020-12-03 09:49:40
【问题描述】：

我有一个包含项目列表的用户控件。我想像下图一样显示它们。

网格有 4 列，但行数取决于项目的数量。我尝试了统一网格和网格，但找不到解决方案。

我的 XAML

<ItemsControl Grid.Row="1" ItemsSource="{Binding Foods}" >
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <UniformGrid  Width="750" >
                <local:FoodItemControl />
            </UniformGrid>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

当我使用统一网格时，它会垂直显示项目。我的问题有什么解决办法吗？

【问题讨论】：

也许这会有所帮助：stackoverflow.com/questions/16596579/…
包装板怎么样？像这样social.technet.microsoft.com/wiki/contents/articles/…。
@Vernou 是的，但在这种情况下使用环绕面板是更好的选择

标签： c# .net wpf xaml mvvm

【解决方案1】：

如果您使用带有水平方向的包装面板：

<ItemsControl.ItemsPanel>
    <ItemsPanelTemplate>
        <WrapPanel Orientation="Horizontal"

这将在面板中从左到右和向下排列内容。

请注意，这是项目面板模板。就像在容器的模板中一样，它将包含许多用户控件并像您的图片一样排列它们。

在您的标记中，您有 itemtemplate。

itemtemplate 只提供您的用户控件。

   <ItemsControl.ItemTemplate>
         <DataTemplate>
             <local:FoodItemControl  Width="200"  />
           </DataTemplate>
   </ItemsControl.ItemTemplate>

您似乎不太可能需要连续 4 个用户控件，每个控件宽 750 像素。上面，我的宽度是 200，但这只是一个随意的猜测。

【讨论】：