具有两个分隔列的 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 中填满一个 "column"，它就会换行到另一列。我已经禁用了 ListBox 的垂直滚动条，否则它将有无限的垂直 space，因此 WrapPanel 永远不会换行。

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

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

WPF List box with two separated columns

c#

wpf

wpf-controls