I have a data template in a listbox that is dynamically creating 6 labels. It displays the content for those labels in one row. How would I get the data template to list the data in 3 columns of 2 rows? So, if I added 9 dynamic labels, it would be arrange it as 3 columns of 3 rows.
<Grid Grid.Row="1">
<ListBox ItemsSource="{Binding AvailableLayoutsOC, Mode=TwoWay}"
Margin="0">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Label Content="{Binding AvailableLayoutLabel}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
Try this, but don't forget to have a SelectedLayoutLabel binding for the selection:
<Grid>
<ListBox ItemsSource="{Binding AvailableLayoutsOC}"
Margin="0" HorizontalAlignment="Left" VerticalAlignment="Top" SelectedValue="{Binding SelectedLayoutLabel}">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Columns="3" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Label Content="{Binding AvailableLayoutLabel}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
Related
I want to display several images in a vertical scrolling list, but these images are subdivided into several groups that must be distiguishable by the user. To achive this, I use a ListView which items contain a WrapPanel, which contains the single images:
<ListView Name="ListGroups" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<Label Content="{Binding Groupname}" />
<ListBox ItemsSource="{Binding Images}" >
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<Image Source="{Binding Thumb}" />
<Label Content="{Binding Res}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
What I get is:
Current result - wrong
but what I want to achive is:
Thats what I want
That is to say I dont want any horizontal Scollbars at all, and the groups clearly must be separated. On the other hand, when sizing the window, the images within one group must wrap to fill all available space.
Just also disable the horizontal ScrollBar of the inner ListBox, and set Stretch="None" on the Image element.
<ListView ... ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel>
<Label Content="{Binding Groupname}"/>
<ListBox ItemsSource="{Binding Images}"
ScrollViewer.HorizontalScrollBarVisibility="Disabled" >
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<Image Source="{Binding Thumb}" Stretch="None"/>
<Label Content="{Binding Res}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I have created one WPF user control having two list boxes.
<ListBox ItemsSource="{Binding Colors}"
Style="{DynamicResource ProductListBoxStyle}"
SelectedItem="{Binding SelectedColor, Mode=TwoWay}"
Margin="0,40,0,0"
ItemContainerStyle="{DynamicResource ProductListColorItemContainerStyle}">
<ListBox.ItemTemplate>
<StaticResource ResourceKey="ItemsDetailsTemplate" />
</ListBox.ItemTemplate>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
<ListBox Grid.Row="1"
ItemsSource="{Binding CurrentProduct.DimensionAttributes}"
SelectedItem="{Binding SelectedDimention, Mode=TwoWay}"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
Style="{DynamicResource ProductListBoxStyle}"
ItemContainerStyle="{DynamicResource ProductListItemContainerStyle}"
Margin="0,40">
<ListBox.ItemTemplate>
<StaticResource ResourceKey="SizeTemplate" />
</ListBox.ItemTemplate>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
But the problem is when I select one item from color then if I try to select one size >the selection from Color is removed. why it is so?
I am trying to horizontally align items in a listbox(items are checkbox items). How can i use a wrap panel with datatemplate?
<ListBox Name="Horizontal" ItemsSource="{Binding Solution}" scrollViewer.HorizontalScrollBarVisibility="Disabled" >
<ListBox.ItemTemplate >
<DataTemplate >
<CheckBox Content="{Binding Name}" IsChecked="{Binding IsChecked}" Margin="5 5 0 0"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I think you want the ItemsPanel property:
<ListBox Name="Horizontal" ItemsSource="{Binding Solution}" scrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<CheckBox Content="{Binding Name}" IsChecked="{Binding IsChecked}" Margin="5 5 0 0"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I am trying to create a table which have x colums and y rows.
This table can have a item source and each cell in this table will be an item.
For exmple how to bind a images collection to table where each image is an item.
If someone can implement this with liskbox so even better
This is my code:
<ListBox Grid.Row="2">
<ItemsControl ItemsSource="{Binding Projects, Mode=TwoWay}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Image Source="{Binding Path=ProjectIcon, Mode=TwoWay}" Height="30" Width="30" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ListBox>
The control you are looking for is the WrapPanel from the Silverlight Toolkit.
<ItemsControl ItemsSource="{Binding ImageSet}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Image Source="{Binding}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
I want to create a ListBox filled with checkboxes in WPF, and I want to databind the "Content" value with a simple string value. However when I try <CheckBox Margin="5" Content="{Binding}" /> the app crashes.
This is what I have. ( I'm sure I am missing something simple )
<ListBox Grid.Row="1" IsSynchronizedWithCurrentItem="True" x:Name="drpReasons">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal" >
</WrapPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.Resources>
<DataTemplate DataType="{x:Type System:String}">
<CheckBox Margin="5" Content="{Binding}" />
</DataTemplate>
</ListBox.Resources>
</ListBox>
You created an infinitely recursive DataTemplate. By setting the DataTemplate for String, and then setting the Content of CheckBox to a String, the CheckBox will use the DataTemplate itself, so you'll have CheckBoxes within CheckBoxes and so on.
You can fix it by putting a TextBlock inside the CheckBox explicitly:
<ListBox x:Name="drpReasons" Grid.Row="1" IsSynchronizedWithCurrentItem="True">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal">
</WrapPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.Resources>
<DataTemplate DataType="{x:Type sys:String}">
<CheckBox Margin="5">
<TextBlock Text="{Binding}"/>
</CheckBox>
</DataTemplate>
</ListBox.Resources>
</ListBox>