Question

我正在编写一个应用程序，该应用程序允许我监控我为我的企业和客户托管的网站的运营状态，以便在网站上保持良好的正常运行时间。

我已经完成了大部分应用，但是我在UI上为每个网站呈现状态时遇到了一些布局障碍，我正在使用ItemsControl：< / p>

<ItemsControl ItemsSource="{Binding Sites, UpdateSourceTrigger=PropertyChanged}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <materialDesign:Card Margin="5" Width="220" Padding="5">
                <StackPanel>
                    <TextBlock HorizontalAlignment="Center"
                        FontSize="20" 
                        Style="{DynamicResource MaterialDesignHeadlineTextBlock}"
                        Text="{Binding Name}" 
                        TextWrapping="WrapWithOverflow"/>
                    <materialDesign:PackIcon 
                        HorizontalAlignment="Center" Kind="Web"
                        Visibility="{Binding OkayIconVisibility}"
                        Height="50" Width="50" />
                    <materialDesign:PackIcon 
                        HorizontalAlignment="Center" Kind="Alert"
                        Visibility="{Binding AlertIconVisibility}"
                        Height="50" Width="50" />
                    <TextBlock HorizontalAlignment="Center"
                        Text="{Binding Status}" 
                        TextWrapping="WrapWithOverflow"/>
                </StackPanel>
            </materialDesign:Card>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

除了它们只是将它们叠加在一起之外，它才有效。

我更喜欢的是包含溢出的水平堆栈 - 可以这么说。

窗口为MinWidth="450"，因此一行中至少列出2个网站，而网站3和4位于其下方。

我已经看过一些关于创建自定义ItemsControl或将网格设置为ItemsControl模板的帖子，但这些帖子主要使用固定数量的项目，这使得它更容易。

我非常不知道如何继续这里。如果我可以为ItemsControl中的项目设置一个容器，这个容器很适合我，因为我至少可以使用它。事实上，我不知道如何解决这个问题。

Answer 1

您可以将WrapPanel用作ItemsControl.ItemsPanel，如下所示：

<ItemsControl ItemsSource="{Binding Sites, UpdateSourceTrigger=PropertyChanged}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel></WrapPanel>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    ...
</ItemsControl>

这将水平堆叠您的Site项目，并在项目溢出时根据您的喜好将其包装。

将ItemsControl中的动态数据显示为响应式网格

1 个答案: