水平自定义列表框答案

【问题标题】：Horizontal Custom ListBox水平自定义列表框
【发布时间】：2016-07-26 06:47:41
【问题描述】：

如果项目的大小超过其父控件的可用宽度，我希望我的自定义构建 ListBox 在下一行显示项目。

以下是我用于此目的的 XAML。

<materialDesign:Card>
            <StackPanel>
                <TextBlock FontWeight="DemiBold" FontSize="30">Schedule</TextBlock>
                <ListBox ItemsSource="{Binding Schedule, Source={StaticResource dc}}">
                    <ListBox.ItemsPanel>
                        <ItemsPanelTemplate>
                            <StackPanel Orientation="Horizontal" />
                        </ItemsPanelTemplate>
                    </ListBox.ItemsPanel>
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <ListBoxItem>
                                <StackPanel Orientation="Horizontal">
                                    <StackPanel Orientation="Horizontal">
                                        <TextBlock>Day:</TextBlock>
                                        <TextBlock Text="{Binding Key, Mode=OneWay}" />
                                    </StackPanel>
                                    <materialDesign:TimePicker materialDesign:HintAssist.Hint="Time In" SelectedTime="{Binding Value.TimeIn}" />

                                    <materialDesign:TimePicker materialDesign:HintAssist.Hint="Time Out" SelectedTime="{Binding Value.TimeOut}"  />
                                </StackPanel>
                            </ListBoxItem>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>
            </StackPanel>
        </materialDesign:Card>

以下是上述 XAML 的输出

【问题讨论】：

标签： c# wpf xaml listbox material-design

【解决方案1】：

那么您应该使用WrapPanel 而不是StackPanel。

【讨论】：

【解决方案2】：

正如 HB 所说，您应该使用的 ItemPanel 控件是一个 WrapPanel，它可以让您实现您想要的（当没有为您的控件提供足够的空间，它会创建一个新行）。

这是一个例子：

            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel Orientation="Horizontal"/>
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>

【讨论】：