I have a ListBox (WPF) that contains CheckBoxes. I'm using is in a configuration screen. Schematic example below:
Now I want to add a "Test 5" CheckBox. I have limited vertical space, so I want it to appear in the horizontal direction, as shown below:
Can the ListBox layout be modified so the CheckBoxes will be arranged like this?
<ListBox Name="CategoryListBox"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
ItemsSource="{Binding Path=RefValues,
UpdateSourceTrigger=PropertyChanged}"
SelectionMode="Multiple">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate >
<StackPanel Orientation="Horizontal"
MinWidth="150" MaxWidth="150"
Margin="0,5, 0, 5" >
<CheckBox
Name="checkedListBoxItem"
IsChecked="{Binding
RelativeSource={RelativeSource FindAncestor,
AncestorType={x:Type ListBoxItem} },
Path=IsSelected, Mode=TwoWay}" />
<ContentPresenter
Content="{Binding
RelativeSource={RelativeSource TemplatedParent},
Path=Content}"
Margin="5,0, 0, 0" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
or as simple as this:
<Grid>
<ListBox ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel IsItemsHost="True" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBoxItem>listbox item 1</ListBoxItem>
<ListBoxItem>listbox item 2</ListBoxItem>
<ListBoxItem>listbox item 3</ListBoxItem>
<ListBoxItem>listbox item 4</ListBoxItem>
<ListBoxItem>listbox item 5</ListBoxItem>
</ListBox>
</Grid>
I encountered a similar problem and eibhrum's answer gave me some idea. I used the following code and I think this also what you need. I used UniformGrid instead of WrapPanel.
<ListBox HorizontalAlignment="Stretch"
ItemsSource="{Binding Timers}"
>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<!-- UNIFORM GRID HERE -->
<UniformGrid Columns="3" IsItemsHost="True"
HorizontalAlignment="Stretch"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Border>
<StackPanel Orientation="Vertical" >
<TextBlock Text="{Binding Label}" TextWrapping="Wrap"/>
<Separator Margin="5,0,10,0"/>
</StackPanel>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With