Question

I want to have multiple columns in listbox which contains checkbox which I am creating dynamically by taking values from database. Code is like this:

<StackPanel Width="250" Height="80">
<ListBox Name="listBoxZone" ItemsSource="{Binding TheList}" Height="115"    Background="Azure">
 <ListBox.ItemTemplate>
    <DataTemplate>
       <CheckBox Name="CheckBoxZone" Content="{Binding TheText}" Tag="{Binding TheValue}" Checked="CheckBoxZone_Checked" Margin="0,5,0,0"/>
     </DataTemplate>
  </ListBox.ItemTemplate>
</ListBox>

But here the checkbox comes one after another horizontally … I want change columns after 5 checkboxes … I used wrap panel here but it puts all checkbox all checkbox vertically in line.

So what to do now?

Answer 1

You should try this:

<ListBox Name="listBoxZone" ItemsSource="{Binding TheList}" Height="115"    Background="Azure">
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel Width="{Binding (FrameworkElement.ActualWidth), RelativeSource={RelativeSource AncestorType=ScrollContentPresenter}}"
                        ItemWidth="{Binding (ListBox.View).ItemWidth, RelativeSource={RelativeSource AncestorType=ListBox}}"
                        MinWidth="{Binding ItemWidth, RelativeSource={RelativeSource Self}}"
                        ItemHeight="{Binding (ListBox.View).ItemHeight, RelativeSource={RelativeSource AncestorType=ListBox}}" />
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
    <ListBox.ItemTemplate>
        <DataTemplate>
            <CheckBox Name="CheckBoxZone" Content="{Binding TheText}" Tag="{Binding TheValue}" Checked="CheckBoxZone_Checked" Margin="0,5,0,0"/>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

This code will wrap when reaches the control’s width boundary instead item count reaches 5. If this does not meets your requirement then I would suggest you use Grid instead of ListBox.