带有两个分隔列的 WPF 列表框

Question

我必须创建与图片相同的自定义列表框。

我为列表框中的每个项目创建了 UpDown 控件。但是如果有很多项目，我需要在列表框中有两列。如果是两列，则必须如图所示分开，并且每一列都应有圆角边框。

列表框代码如下：

<Style TargetType="{x:Type ListBox}" x:Key="ListBoxService">
        <Setter Property="ItemTemplate">
            <Setter.Value>
                <DataTemplate DataType="{x:Type model:Service}">
                    <Border 
                        x:Name="border" 
                        VerticalAlignment="Center"
                        BorderThickness="0, 0, 0, 2"
                        BorderBrush="{StaticResource CommonBackgroundColor}">
                        <view:ServiceUpDown/>
                    </Border>
                </DataTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <UniformGrid Columns="2" HorizontalAlignment="Center"/>
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Disabled"/>
    </Style>

感谢您的帮助。

Answer 1

不是针对您的确切问题的解决方案，但也许这可以帮助您入门：

<ListBox
        ItemsSource="{Binding Items}" 
        ScrollViewer.VerticalScrollBarVisibility="Disabled"
        >
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel Orientation="Vertical"  />
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>

        <ListBox.ItemContainerStyle>
            <Style TargetType="ListBoxItem">
                <Setter Property="Margin"
          Value="0 0 20 0" />
            </Style>
        </ListBox.ItemContainerStyle>
    </ListBox>

我已将 ListBox 的ItemsPanel 设置为垂直方向的WrapPanel，因此一旦它填满了 ListBox 中的一个“列”，它就会自动换行。 我已禁用 ListBox 的垂直滚动条，否则它将有无限的垂直空间，因此 WrapPanel 将永远不会换行。

一旦使用了ListBox 的所有垂直空间，此示例会将项目包装到其他列中。根据列表框的垂直大小和项目的数量，可能还会有第三列或第四列，如果需要的话。您可以使用ItemContainerStyle 分隔列，但这并不能解决圆角边框的要求。