I may just be missing something obvious here, so I apologize if this is a really dumb question. I have a WrapPanel in a view that I need to bind to an ObservableCollection on the ViewModel. This ObservableCollection contains a different type of ViewModel that needs to be bound to another type of view when displayed in the WrapPanel. The goal is to create a wrappable list of items, each of which displays via an instance of a smaller view which should be added to the WrapPanel.
I am using MVVM, and the ViewModel does not have direct access to the View. I would rather not create a binding between the ViewModel and the View if at all possible, so manually adding items to the WrapPanel.Children collection is not a viable option. I am at a loss as to how I can bind a collection of child ViewModel objects to the WrapPanel in such a way that it will create instances of another view and add them to itself. Am I simply approaching the problem incorrectly? I figure there is probably a DataTemplate involved, but it doesn't appear that a WrapPanel has a DataTemplate, nor is it bindable.
Thanks for any insight.
What you need is a ListView that uses a WrapPanel to host all of the items.
<ListView ItemsSource={...}>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel IsItemsHost="True" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<!-- Fill in how you want each item to look here -->
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Use an ItemsControl, and set its ItemsPanel to a WrapPanel:
<ItemsControl ItemsSource="{Binding Something}" ItemTemplate="{StaticResource YourDataTemplate}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
Related
I have an ItemsControl with ListViews inside to make a custom grid like layout
Here is roughly what the code looks like to do this, names changed and irrelevant styling is removed.
Each ListView is created by an instance of ItemsSubList and therefore there is no set amount of listboxes or properties to be made.
Does anyone know How I would be able to bind the SelectedItem property of each listbox out somehow, into a list preferably.
<ItemsControl ItemsSource="{Binding Items}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<ListView ItemsSource="{Binding ItemsSubList}"
DisplayMemberPath="ItemVersion"
SelectionMode="Single"
Width="100"
VerticalAlignment="Top"
Background="#282828"
BorderBrush="#282828">
</ListView>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
I would solve it in your Model.
Your datacontext seems to be a class with a property Items of type ObservableCollection<MyItem> and your class MyItem then as a property ItemsSubList of type ObservableCollection<MySubItem>. Is that right?
The datacontext of your ListView is the instance of type MyItem. You can add a Property SelectedSubItem to your class MyItem and bind it with Two-way-binding to your listbox.SelectedItem.
And then in your main class, that holds your model and where the property Items lives, there I would add a property
public List<MySubItem> SelectedSubItems => Items.Select(i => i.SelectedSubItem).ToList();, a property that dynamically selects all selected subitems from all your items.
I have a view model containing an observable collection property:
public ObservableCollection<ExplorerPane> Panes { get; set; } = new ObservableCollection<ExplorerPane>();
In the user control corresponding to my view model, I am using Panes as the ItemsSource to an ItemsControl and just using a ContentPresenter to display the content of each ExplorerPane:
<ItemsControl ItemsSource="{Binding Panes}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<ContentPresenter Content="{Binding}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
The catch is that I want the content presenters to render their panes on top of each other, so that only one is visible at a time.
I have thought of a solution along these lines: "Controls in the same cell of a Grid are rendered back-to-front. So a simple way to put one control on top of another is to put it in the same cell."
My question then is how do I get the content presenters to be in the same cell of a grid?
Use a Grid as ItemsPanel:
<ItemsControl ItemsSource="{Binding Panes}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Grid/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
The ItemTemplate isn't necessary, because an ItemsControl already uses a ContentPresenter as item container.
However, if you only want to show a single ExplorerPane, add a CurrentPane property to your view model, and show it by
<ContentControl Content={Binding CurrentPane}"/>
I'm looking for a simple way to add data-virtualization support to WPF ComboBox?
How can I achieve that?
I tried to plug different collections to the ItemsSource property:
- https://www.codeproject.com/Articles/34405/WPF-Data-Virtualization
- https://alphachitech.wordpress.com/2015/01/31/virtualizing-observable-collection
But seems my ComboBox is displaying nothing, am I doing something wrong?
Are they supposed to work with any controls supporting ItemsSource property?
You should set the ItemsPanel of the property to be a VirtualizingStackPanel.
<ComboBox VirtualizingPanel.IsVirtualizing="True" VirtualizingPanel.ScrollUnit="Pixel"
VirtualizingPanel.VirtualizationMode="Recycling">
<ComboBox.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel/>
</ItemsPanelTemplate>
</ComboBox.ItemsPanel>
</ComboBox>
I defined a ListView like this:
<ListView x:Name="libraryBooksListView"
AutomationProperties.AutomationId="VideoListView"
AutomationProperties.Name="Videos"
TabIndex="1"
Padding="0,0,4,0"
ItemsSource="{Binding}"
IsSwipeEnabled="False"
ItemTemplate="{StaticResource LibraryBooksItemTemplate}"
ItemContainerStyle="{StaticResource LibraryListViewItemStyle}"
Grid.Column="1"
SelectionMode="None">
</ListView>
and I defined the LibraryBooksItemTemplate like this:
<DataTemplate x:Key="LibraryBooksItemTemplate">
<Grid Margin="0">
<GridView x:Name="booksGridView"
AutomationProperties.AutomationId="ItemGridView"
AutomationProperties.Name="Grouped Items"
ItemsSource="{Binding Items}"
ItemTemplateSelector="{StaticResource textbookTemplateSelector}"
SelectionMode="Multiple"
IsItemClickEnabled="True"
ItemClick="booksGridView_ItemClick"
SelectionChanged="booksGridView_SelectionChanged"
IsSwipeEnabled="false"
ScrollViewer.VerticalScrollBarVisibility="Auto">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid Orientation="Horizontal" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
</Grid>
</DataTemplate>
The GridView, booksGridView, has multiple items (books).
How to modify/access the "ItemTemplateSelector" and SelectionMode etc. of the GridView?
Is there a way to access each of the items in the booksGridView?
Thx
There are many ways to do that.
The easiest one is to wrap your DataTemplate contents into a UserControl.
Another one is to use something like ContainerFromIndex().
Then you can also use VisualTreeHelper class to walk the visual tree.
Then again you can subclass your ItemsControl and override GetContainerForItemOverride() or
PrepareContainerForItemOverride() or
use the ItemContainerGenerator property
The imporant thing to note is that your ItemsSource provides items to the control while the overrides or the generator provide containers to display the items using the ItemTemplates.
*Edit As for your additional questions:
How to modify/access the "ItemTemplateSelector" and SelectionMode etc. of the GridView?
You have defined your selector resource and gave it a key of "textbookTemplateSelector", so you can just get it with this.Resources["textbookTemplateSelector"]. SelectionMode you can bind to the same source DataContext you bound your ItemsSource to and change or read it through a binding.
Is there a way to access each of the items in the booksGridView?
Yes. Since your DataContext is set as the ItemsSource of your ListView - you can access all the items through that DataContext. Each of these items seems to have an Items property that is bound to your GridView, so you can access each of these through the Items property you have defined yourself.
You can access it by using ItemsSource:
foreach(var book in this.booksGridView.ItemsSource)
{
}
I have an ItemsControl with a DataTemplate that is bound to an ObservableCollection of integers.
<ItemsControl Name="DimsContainer" ItemTemplate="{StaticResource DimensionsTemplate}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
And in the Windows Resources:
<Window.Resources>
<DataTemplate x:Key="DimensionsTemplate" >
<TextBlock Text="{Binding}"
Padding="5"
VerticalAlignment="Center"
FontSize="32"/>
</DataTemplate>
</Window.Resources>
My problem is that in code, I need to be able to determine the width of the TextBlocks (or whatever the element is if I change it later) in the ItemsControl. Does anyone have an idea how to do this?
When I do DimsContainer.Items[i] it gives me the bound item not the TextBlock.
You should be able to use instead:
DimsContainer.ItemContainerGenerator.ContainerFromIndex(i);
This won't give you the TextBlock itself, but it will give you the generated ContentPresenter that is wrapped around it by the ItemsControl to contain the ItemTemplate.