Wrap Panel is not wrapping DataItems - silverlight

I have WrapPanel where I want the control inside of it to go horizontally and centered, but when I have a listbox or a ItemsControl those elements just go downwards.
<toolkit:WrapPanel>
<ItemsControl x:Name="AnswerListBox" ItemsSource="{Binding Answers}" ScrollViewer.VerticalScrollBarVisibility="Disabled" >
<ItemsControl.ItemTemplate>
<DataTemplate>
<!-- those don't wrap horizontally and go downwards -->
<local:spriteToggleButton Text="{Binding text}" Selected="{Binding selected}" Sprites="{Binding Path=DataContext.UISprites, ElementName=questionField}" IsChecked="{Binding selected, Mode=TwoWay}" GroupName="{Binding Path=DataContext.QuestionTitle, ElementName=questionField}" ClickMode="Press" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</toolkit:WrapPanel>
I came across some similar issues and found out about ItemsPanel, so I tried that but it wrap but only to Content and didn't display the rest of the control inside of it.
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
I take it that ItemsPanel is telling the ItemsControl which control to wrap it with but then it seems to ignore the rest of my datatemplate.

Joseph,
Slightly shooting in the dark here; but this is how I have used the WrapPanel (not through the ItemControl).
<ListBox>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel Width="700" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
....
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Essentially the Listbox's ItemsPanel tells it to use the WrapPanel and then you could have anything you need in the DataTemplate. Note that the width is important as it tells the WrapPanel where to start wrapping.
Does this help?

Related

How to use UI virtualization with redefined ListBox templates

I'm trying to use ListBox as a view containing multiple items and, of course, I need to use UI virtualization in it.
The problem is virtualization works only when I declare ListBox this way:
<ListBox
ItemsSource="{Binding ItemsSource}"
VirtualizingStackPanel.IsVirtualizing="True"
VirtualizingStackPanel.VirtualizationMode="Recycling">
<ListBox.ItemTemplate>
<DataTemplate>
<views:SiteEntryView />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
But if I try to customize it, it doesn't virtualizing anymore:
<ListBox
ItemsSource="{Binding ItemsSource}"
VirtualizingStackPanel.IsVirtualizing="True"
VirtualizingStackPanel.VirtualizationMode="Recycling">
<ListBox.Template>
<ControlTemplate>
<ScrollViewer>
<ItemsPresenter />
</ScrollViewer>
</ControlTemplate>
</ListBox.Template>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<views:SiteEntryView />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
As far as I've found, this sample contains just the same that ListBox contains by default. But virtualization isn't working. I've read several articles and also couple of answers here, but still can't figure out the "general way" - what and where I must set, bind, add, etc to make virtualization work with custom templates?
Two things:
Update your PanelTemplate to use a VirtualizingStackPanel and add your virtualization options to the ScrollViewer of the ControlTemplate.
<ListBox.Template>
<ControlTemplate>
<ScrollViewer VirtualizingStackPanel.IsVirtualizing="True"
VirtualizingStackPanel.VirtualizationMode="Recycling">
<ItemsPresenter />
</ScrollViewer>
</ControlTemplate>
</ListBox.Template>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<views:SiteEntryView />
</DataTemplate>
</ListBox.ItemTemplate>
The reason is that you're using a StackPanel for your ItemsPanel - you should be using a VirtualizingStackPanel instead (which is also the default ItemsPanel for ListBox).
Either remove your ItemsPanel definition or modify it to use a VirtualizingStackPanel:
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>

Replacing cut off chars within content of WrapPanel item

I made a binding using WrapPanel and ItemsControl. Ok.
<ItemsControl
ItemsSource="{Binding Stations, Source={StaticResource Container}}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate DataType="{x:Type sys:String}">
<Button
Margin="5,5,5,5"
Content="{Binding}"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
The next thing bothering me is that I want to make buttons more intelligent. I want them to replace a couple of last chars by three dots if a string exceeds the boundary of the button content. I need such a behavior because I want to provide at least three columns on the screen.
You can do it as following with the help of TextTrimming property of TextBlock
<Button Margin="5,5,5,5">
<TextBlock Text="{Binding}" TextTrimming="CharacterEllipsis"></TextBlock>
</Button>

How to set WrapPanel itemsource to list?

I want to show in WrapPanel a list of images. How can I do that or maybe I shall use other control ?
You can absolutely use the WrapPanel to show a list of images, scrolling vertically or horizontally. To get the kind of panoramic tile effect like in People hub with your images, you could do something like this:
<controls:PanoramaItem Header="something" Orientation="Horizontal" Margin="0,-15,0,0" >
<ListBox Name="SomeList" Margin="0,0,-12,0" ItemsSource="{Binding SomeItemsList}" >
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel x:Name="wrapPanel" Width="700" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="0,0,0,17">
<Image Height="200" Width="200" Margin="12,0,9,0" Source="{Binding ImageURL}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</controls:PanoramaItem>
Please note that a WrapPanel inside a ListBox does pick up the DataTemplate you define .. so you have complete liberty to bind any list to your WrapPanel.
Hope this helps!
Search for the same thing and came across this: Displaying a Collection of Items in a WrapPanel.
<ItemsControl ItemsSource="{Binding ActorList}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Image Source="{Binding Image}" Height="100"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
or you can use Xceed's SwitchPanel.
Yes definetly not the WrapPanel, it has not ItemsSource, it can't take a list.
Use the ListBox, and you can set the ItemsSource.
Edit

Move down overflow contents in horizontal stackpanel

I have a list box in expander:
<ListBox ItemsSource="{Binding MySource">
<ListBox.ItemTemplate>
<DataTemplate>
<RadioButton Content="{Binding MyContent}" />
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
I wrap the radio button with horizontal orientation stackpanel. I want the overflow radio buttons move down like right image shown below (no horizontal scrollbar). Now, mine is like the left one.
Stackpanel Orientation="Horizontal" http://www.empirepic.com/images/i8f5sevyzqch10uodso.jpg
You need to use a WrapPanel, not a StackPanel. In WPF it's built into the main assemblies but in Silverlight you'll need to get the Silverlight Toolkit.
<ListBox ScrollViewer.HorizontalScrollBarVisibility="Disabled" ItemsSource="{Binding MySource">
<ListBox.ItemTemplate>
<DataTemplate>
<RadioButton Content="{Binding MyContent}" />
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<t:WrapPanel />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>

WPF ItemsPanelTemplate not working

I'm trying to get an ItemsPanelTemplate working for a ListBox. The ListBox is used in a DataTemplate, and none of my implicit ListBox styles override the default visual style. For some reason, the ItemsPanelTemplate I'm specifiying for the control (a WrapPanel) is being ignored and a StackPanel is used instead.
This is the entire template, I can only assume there's something I'm missing which is causing this.
<DataTemplate x:Key="GroupLargeIconsTemplate" DataType="{x:Type Core:IGroup}">
<ListBox ItemsSource="{Binding Children}" OverridesDefaultStyle="True">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel HorizontalAlignment="Left" VerticalAlignment="Top" IsItemsHost="True" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Auto"
Width="{Binding (FrameworkElement.ActualWidth), RelativeSource={RelativeSource AncestorType=ScrollContentPresenter}}" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<DataTemplate.Resources>
<conv:IconConverter x:Key="IconConverter"/>
</DataTemplate.Resources>
<StackPanel Margin="2" Width="100" Height="140">
<Image Source="{Binding Icon,Converter={StaticResource IconConverter},ConverterParameter=96}"/>
<TextBlock Text="{Binding Name}" TextWrapping="Wrap" TextTrimming="CharacterEllipsis" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</DataTemplate>
My guess is that the width property in the WrapPanel is making it behave as a Stackpanel.
Strange, the control template is not supposed to override the explicitly specified values, rather the opposite scenario comes to my mind...
That is, unless the control template provides a panel with "IsItemsHost" set to true. Then the ItemsPanel is ignored. Which, probably, is your case.

Resources