CODEWITHSUNDEEP
c#wpfwpf-controls
Dmitrii Polianskii
Dmitrii Polianskii

Reputation: 575

WPF List box with two separated columns

I have to create custom list box the same as on the picture.

enter image description here

I've created UpDown control for each item in list box. But I need to have two columns in list box if will be many items. If it will be two columns, they must be separated as on the picture and each of the column should have border with round corners.

Code for list box is below:

<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>

Thanks for any help.

Upvotes: 0

Views: 1330

Answers (1)

David
David

Reputation: 623

Not a solution for your exact problem, but maybe this can get you started:

<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>

I have set the ListBox' ItemsPanel to a vertical oriented WrapPanel, so once it filled up one "column" in the ListBox it will just wrap into another column. I have disabled the vertical scrollbar of the ListBoxsince otherwise it would have infinite vertical space, thus the WrapPanelwould never wrap.

This example will wrap the items into additional columns, once all the vertical space of the ListBox has been used. Depending of the vertical size of your listbox and the amount of items there might also be a third or fourth column, when required. You can use the ItemContainerStyle to separate the columns, though this does not resolve the requirement of the rounded borders.

Upvotes: 3

Related Questions