Develop Reference

WrapPanel not wrapping when using it with ItemControl

I have a WrapPanel that I'm filling in my ViewModel with UserControls:
<WrapPanel Width="250" Orientation="Horizontal" Margin="3">
<ItemsControl ItemsSource="{Binding PlaceableObjectsContent}">
<ItemsControl.ItemTemplate>
<DataTemplate DataType="{x:Type local:PlaceableObjectViewModel}">
<local:PlaceableObjectUserControl>
<local:PlaceableObjectUserControl.InputBindings>
<MouseBinding MouseAction="LeftClick"
Command="{Binding DataContext.OnPlaceableObjectClicked, RelativeSource={RelativeSource AncestorType=ItemsControl}}"
CommandParameter="{Binding}"/>
</local:PlaceableObjectUserControl.InputBindings>
</local:PlaceableObjectUserControl>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</WrapPanel>
When I fill them manuell with random Controls, everything works fine! I already read something about problems because of Using ItemTemplate!?
If its true, how can I manage that?
Thanks

You're putting a single ItemsControl inside a WrapPanel. That won't do anything. If you want your ItemsControl to use a WrapPanel to host its own items, here's how:
<ItemsControl
ItemsSource="{Binding PlaceableObjectsContent}"
Width="250"
Margin="3"
>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<!-- etc. -->
Note that something has to constrain the width of the ItemsControl for this to work: Either it must be limited by the size of its parent, or a Grid Column, or even by setting the Width or MaxWidth properties of the ItemsControl element itself, either directly or via a Style.

Fastest way to draw a grid c#

At the moment I am drawing a grid of "cells" (each cell is unique - different colours, borders etc) using a WPF window, with a Grid and binding a list of Cells to an ItemsControl ItemSource.
...this is slow, really slow. Takes a couple of seconds to render. Is there a faster way I could draw such a grid?
<Window.Resources>
<DataTemplate x:Key="CellTemplate">
<local:CellImage Width="10" Height="10" CellProperty="{Binding}"></local:CellImage>
</DataTemplate>
<DataTemplate x:Key="WholeTemplate">
<ItemsControl ItemsSource="{Binding}" ItemTemplate="{StaticResource CellTemplate}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</DataTemplate>
</Window.Resources>
<Grid Name="WholeGrid">
<StackPanel>
<ItemsControl x:Name="WholeGrid" ItemTemplate="{DynamicResource WholeTemplate}">
</ItemsControl>
</StackPanel>
</Grid>
And the binding:
List<List<Cell>> lsts = new List<List<Cell>>();
WholeGrid.ItemsSource = lsts;

Change your stack panel to VirtualizingStackPanel like this
ItemsControl ItemsSource="{Binding}" ItemTemplate="{StaticResource CellTemplate}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
Then it will only draw those items visible and should be much quicker, and as you scroll it should draw as many as it needs.

Why does my stackpanel orientate its controls vertically when it's Orientation is set to horizontal?

I have an Observable collection of custom user controls
ObservableCollection<TaskButton> TaskBarButtonList = new ObservableCollection<TaskButton>();
which I bind to a Stackpanel in xaml:
<StackPanel Grid.Row="3" Grid.ColumnSpan="2" Orientation="Horizontal">
<ItemsControl ItemsSource="{Binding TaskBarButtonList}"/>
</StackPanel>
Which works fine however the actual orientation of the 'TaskButtons' in the stack panel seems to be vertical. Can anyone please help my figure out why?

StackPanel is horizontal here and you can test it adding another element after or before ItemsControl.
ItemsControl has its own items panel and you need to change it
<ItemsControl ItemsSource="{Binding TaskBarButtonList}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>

Binding To ICollectionView is not working

So, I am making a List of UserControl which ViewModel is assigned via ItemsControl
<ItemsControl Grid.Column="0" Grid.Row="1" x:Name="itemsControlStack"
ItemsSource="{Binding ListOfViewModels, Mode=OneWay}" VerticalAlignment="Bottom">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel IsItemsHost="True"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<local:UserControlA/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
Above code works, but I want to show it reversed, without changing the data, so :
<ItemsControl Grid.Column="0" Grid.Row="1" x:Name="itemsControlStack"
ItemsSource="{Binding REVERSEDListOfViewModels, Mode=OneWay}" VerticalAlignment="Bottom">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel IsItemsHost="True"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<local:UserControlA/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
Somewhere in my ViewModel, which I have checked via breakpoint that the code is executed
public ICollectionView REVERSEDListOfViewModels { get; private set; }
REVERSEDListOfViewModels = CollectionViewSource.GetDefaultView(ListOfViewModels);
REVERSEDListOfViewModels.SortDescriptions.Add(new SortDescription("ID", ListSortDirection.Descending));
But it suddenly not working. it doesn't return error anywhere, but UserControlA now don't properly presented. (The user control are presented without its data - which stored on the REVERSEDListOfViewModels)
Any idea why?

An ItemsControl containing UserControl elements

I'm kind of shooting in the dark on this one and have been looking around but couldn't find much of anything related. Pretty much I am trying to create an ItemsControl on a current Window that I've got, so when the user clicks an "Add Product" button on the window, it will add a UserControl to the screen in a horizontal matter.
For starters I am using an MVVM pattern and I have a PricingViewModel which is my ViewModel for the MAIN window. I have a second view model named ComparisonViewModel, which is the ViewModel for the View of the UserControl that I would like to show everytime the user hits the "Add Product" button on the PricingView. Jumping into my code, I've got a declared ObservableCollection and my AddComparison method. The Collection is instantiated in the constructor of the VM.
public ObservableCollection<ComparisonViewModel> Products { get { return _products; } }
public void AddComparison()
{
var products = IoC.Get<ComparisonViewModel>();
Products.Add(products);
}
Next, I've got and ItemsControl in the PricingView that binds to that collection in the PricingViewModel:
<ItemsControl ItemsSource="{Binding Path=Products}" >
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" VerticalAlignment="Stretch"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
I run it and after hitting add, it just shows the collection name. How can I actually get it to Pop up with a new Comparison User Control when the user hits Add Comparison? Thanks a ton for the help in advance!

You'll want to set the ItemTemplate so the ItemsControl knows how to render each item in the collection (by default, it is just displaying the result of calling .ToString()).
<ItemsControl ItemsSource="{Binding Path=Products}" >
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" VerticalAlignment="Stretch"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate DataType="{x:Type namespace:ComparisonViewModel}">
<!-- EXAMPLE -->
<Border BorderBrush="Black"
BorderThickness="2">
<DockPanel Orientation="Horizontal">
<TextBlock Text="{Binding ComparisonResult}"
DockPanel.Dock="Right" />
<TextBlock Text="{Binding Name}"
DockPanel.Dock="Left" />
</DockPanel>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>

I have found that I needed to tell the ItemsControl two things... First is what type of "thing" the ItemsControl is:
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
And the second is how to display the Control:
<ItemsControl.ItemTemplate>
<DataTemplate>
<c:Widget Margin="5" />
</DataTemplate>
</ItemsControl.ItemTemplate>
The final code looks like:
<ItemsControl ItemsSource="{Binding Path=DynamicItems}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<c:Widget Margin="5" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
You also need to add a reference to your control namespace in the window declaration stuff:
xmlns:c="clr-namespace:IHateEverything.Controls"