WPF Wrappanel in Listbox - wpf

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>

Related

how to get a data templates to display data in columns

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>

ListBox selection Removed when item of other listbox selected

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?

Auto adjusting datatemplate inside the parent size

say its a listview bound to a collection
i fix the listview width to 100
the itemtemplate is some thing like below
<DataTemplate> <Border>
<TextBlock Foreground="{Binding Path=Color}"
Text="{Binding Path=Name}"
TextTrimming="CharacterEllipsis"/>
</Border> </DataTemplate>
i want to be able to
maximum allowed is 3 how do i make the text box trim to a uniformresize itself to a proper size giving space to other textboxes
i don't wanto have c# code written is it possible to achieve using only XAML ?
try this
<ListView Width="100">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Width="100" Columns="3"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<Border>
<TextBlock Foreground="{Binding Path=Color}" Text="{Binding Path=Name}" TextTrimming="CharacterEllipsis"/>
</Border>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
You can change ItemsPanel to UniformGrid which will split available space evenly between your items. Here's an ItemsControl example
<ItemsControl ItemsSource="{Binding Path=Items}" >
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Rows="1"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border>
<TextBlock
Foreground="{Binding Path=Color}"
Text="{Binding Path=Name}"
TextTrimming="CharacterEllipsis"/>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>

Order Images in ListBox DataTemplate Horizontally

Preview
alt text http://img39.imageshack.us/img39/5466/howtoorderhorizontal.jpg
On the highlighted item, the images still ordered vertically even I already use <StackPanel Orientation="Horizontal">. Am I missing something?
I don't want the images have ListBoxItem behavior (hover/click). I had added IsEnabled="False" to the list box, but the images' opacity decreased : ( Do you have any idea how to do this thing?
Data template
<!-- FacilityTreeView data template -->
<telerik:HierarchicalDataTemplate x:Key="FecilityTemplate" ItemsSource="{Binding Facilities}">
<StackPanel Orientation="Horizontal">
<ListBox ItemsSource="{Binding Icons}" BorderThickness="0" Background="Transparent">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Source="{Binding Source}" Margin=" 0,0,2,0" ToolTipService.ToolTip="{Binding Tooltip}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<TextBlock Text="{Binding Description}" VerticalAlignment="Center" />
</StackPanel>
</telerik:HierarchicalDataTemplate>
By using ItemsPanelTemplate.
<ListBox.ItemTemplate>
<DataTemplate>
<Image Source="{Binding Source}" Margin=" 0,0,2,0" ToolTipService.ToolTip="{Binding Tooltip}" />
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ListBox.ItemsPanelTemplate>
You need to use <StackPanel Orientation="Horizontal"> as an ItemsPanelTemplate.
Read more here.
I was trying the solution and I found it's incomplete, ItemsPanelTemplate must be inside <ListBox.ItemsPanel>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"></StackPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>

DataBind string to DataTemplated checkbox

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>

Resources