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＆＃39; ItemsPanel为垂直方向WrapPanel，所以一旦填满了一个＆＃34;列＆＃34;在ListBox中它将包装到另一列。我已禁用ListBox的垂直滚动条，否则会有无限的垂直空间，因此WrapPanel永远不会换行。

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

WPF列表框，包含两个分隔的列

1 个答案: