Nesting databound controls inside a WPF TreeView - c#

Trying to build a WPF TreeView control which can contain another data bound control inside it. Here's the XAML:
<TreeView temsSource="{Binding DocumentCategories}">
<TreeView.ItemTemplate>
<HierarchicalDataTemplate ItemsSource="{Binding DocumentCategory1}">
<TextBlock FontWeight="Bold" Text="{Binding Description}"></TextBlock>
<HierarchicalDataTemplate.ItemTemplate>
<DataTemplate>
<ListView ItemsSource="{Binding Documents}">
<TextBlock FontWeight="Bold" Text="{Binding Name}"></TextBlock>
</ListView>
</DataTemplate>
</HierarchicalDataTemplate.ItemTemplate>
</HierarchicalDataTemplate>
</TreeView.ItemTemplate>
</TreeView>
The DocumentCategories data is recursive - each item in the list has a DocumentCategory1 collection of DocumentCategories which has its own DocumentCategory1 collection and so forth.
Without the ListView inside it, this works just fine. However, when you add the ListView the TreeView renders ok but when you try and open one of the nodes, the application crashes with the error:
Operation is not valid while ItemsSource is in use. Access and modify
elements with ItemsControl.ItemsSource instead
I'm not entirely sure which ItemsSource this is referring to - that of the TreeView or the ListView. I presume the latter, and that the problem is being caused by the fact that the binding isn't actually happening until after the node is opened.
I've tried changing both DocumentCateegories and Documents from List to an ObservableCollection, which seems to be a common fix for this error - but it still behaves the same.
Is it possible to have another databound control inside a TreeView, and if so, how?

There is the DataTemplate of the ListView missing.
Currently the following Element is interpreted as an actual ListView Element:
<TextBlock FontWeight="Bold" Text="{Binding Name}"></TextBlock>
And as you already bound the ListView's ItemSource the error occurs, when the view is trying to add the "TextBlock" as an item of the ListView.
Just change it to the following:
<ListView ItemsSource="{Binding Documents}">
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock FontWeight="Bold" Text="{Binding Name}"></TextBlock>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

Related

Auto-scroll Listbox based on TextBox text

In WPF and MVVM pattern, I have a TextBox and a ListBox. The ListBox is bound to a collection of items using a DataTemplate. The default count for this collection is about 50 or so.
What I wanted to achieve is a filter-like action. If it's possible, I wouldn't like to change the list view or anything like that, but simply to scroll to the item corresponding to the TextBox match, preferably without selecting it.
I've seen some examples and solutions using CollectionView and Filter (couldn't get it to work btw), and some using auto-scroll to the end of the list or to a new added item, but none specific to my case.
My Listbox is structured as follows:
<ListBox IsTextSearchEnabled="True" HorizontalAlignment="Stretch" Margin="6,49,0,0" Name="lbObjectA" VerticalAlignment="Stretch" ItemsSource="{Binding}">
<ListBox.ItemTemplate>
<DataTemplate DataType="{x:Type src:Dto}">
<StackPanel Height="20" Orientation="Horizontal">
<TextBlock Text="{Binding Path=Name}" Margin="0,3,0,0" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

Select only one item in two ListViews

I have two ListView, each bound to a specific collection in my ViewModel and I want to be able to select only one item globally.
Each ListView has its SelectedItem property bound to the same property in the ViewModel.
My probleme is as follow: when I select an item in a ListView, and then select another item in the other ListView, the first item stays selected.
I could achieve this with some code-behind, but I want to know if a pure XAML solution exists.
XAML:
<ListView SelectionMode="Single" ItemsSource="{Binding Path=MyList1}" SelectedItem="{Binding Path=MySelectedItem}">
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Name}" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<ListView SelectionMode="Single" ItemsSource="{Binding Path=MyList2}" SelectedItem="{Binding Path=MySelectedItem}">
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Title}" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I finally got it working, by just replacing SelectedItem by SelectedValue.
In this use case, both properties have the same behaviour, but the latter one handles correctly the unselection if the bound selected item is not in the list.
You need to use Mode=TwoWay in your SelectedItem. It should work.

Display data from two levels down

I have the following classes, which contain ObservableCollections of the next level down:
Draw
ObservableCollection<Round>();
Round
ObservableCollection<Formation>();
Formation
So a Draw is made up of Rounds, Rounds are made up of Formations.
I have a page which has a button to create a random draw, I currently have it calling another class which returns a draw:
this.defaultViewModel[DrawName] = RandomDraw.generate();
I am having no problem binding a ListView to Rounds and displaying round information, but how do I display the individual formations? This is what I am currently doing, I was not expecting to be able to just display things by binding to Formations but how do I access it?
<ListView
ItemsSource="{Binding Rounds}"
IsItemClickEnabled="True"
ItemClick="ItemView_ItemClick"
ContinuumNavigationTransitionInfo.ExitElementContainer="True">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,0,0,9.5">
<TextBlock
Text="{Binding RoundNumber}"
TextWrapping="Wrap"
Pivot.SlideInAnimationGroup="1"
CommonNavigationTransitionInfo.IsStaggerElement="True"
Style="{ThemeResource ListViewItemTextBlockStyle}"
Margin="0,0,19,0"/>
<TextBlock
Text="{Binding Formations}"
TextWrapping="WrapWholeWords"
Pivot.SlideInAnimationGroup="2"
CommonNavigationTransitionInfo.IsStaggerElement="True"
Style="{ThemeResource ListViewItemContentTextBlockStyle}"
Margin="0,0,19,0"/>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
You should take a look at Hierarchical Data Templates, which are used by the WPF TreeView control rather than ListViews. They are a natural fit to show hierarchical data. Of course, like any WPF control, you can completely customize their appearance using styling and templates. Here are some good references:
MSDN How to: Use a TreeView to Display Hierarchical Data
Hierarchical Databinding in WPF
However, if you would like to keep using ListViews, then one way to do this is to nest another container control inside the parent ListVIew. ObservableCollections are processed automatically by specific WPF elements, such as Panels. In your example, you can replace the second TextBlock with another ListView, with an ItemTemplate similar to the first. It can also be any Collection-like Panel element, such as StackPanel.
<ListView
ItemsSource="{Binding Rounds}"
IsItemClickEnabled="True"
ItemClick="ItemView_ItemClick"
ContinuumNavigationTransitionInfo.ExitElementContainer="True">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,0,0,9.5">
<TextBlock
Text="{Binding RoundNumber}"
TextWrapping="Wrap"
Pivot.SlideInAnimationGroup="1"
CommonNavigationTransitionInfo.IsStaggerElement="True"
Style="{ThemeResource ListViewItemTextBlockStyle}"
Margin="0,0,19,0"/>
<!-- CHANGED CODE HERE -->
<ListView
ItemsSource="{Binding Formations}"
...>
<ListView.ItemTemplate>...</ListView.ItemTemplate>
</ListView>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

Strange artifact when updating Pivot title in Windows Phone 8

I have a XAML page with just a Pivot with binded ItemSource and the following template (changing just the header for simpilcity)
<phone:Pivot
Margin="0,108,0,0"
ItemsSource="{Binding Services}">
<phone:Pivot.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding Title}" />
</DataTemplate>
</phone:Pivot.HeaderTemplate>
<phone:Pivot.ItemTemplate>
<DataTemplate>
</DataTemplate>
</phone:Pivot.ItemTemplate>
</phone:Pivot>
The ItemSource (Services) is an ObservableCollection of a simple data type with just a Title property implementing INotifyPropertyChanged. When I change the Title of any item, the Pivot header is rendered very strangely:
Here is a complete simplified solution to reproduce the problem: https://dl.dropboxusercontent.com/u/73642/pivotproblem.zip
Is this a Pivot bug?
Indeed a bug... I had the same problem and I end up in forcing to reload whole DataContext of the Pivot.
Since I was using MVVM I just created new instance of the items collection and raised property changed for that.
It seems that TextBlock's Width is not updated after Title changes. You can check it by defining your TextBlock like this:
<TextBlock Text="{Binding Title}" Width="400" />
Hence it's not updated, two Titles overlap each other.

How do I bind a WPF ListView to a property of each element in a list?

I have the following binding on my ListView, which works fine:
<ListView ItemsSource="{Binding Filters}" Margin="5" Name="FiltersList" Height="100"/>
Filters is actually a type of List<LogFilter>. LogFilters have a property on them called Title. I would like to show the Title of each element in the Filters list in my ListView instead. Is this possible? Something like ItemsSource="{Binding Filters.Title}"?
Just set the ItemTemplate to display the title:
<ListView ItemsSource="{Binding Filters}">
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Title}"></TextBlock>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
It seems to me that you don't need to use ListView at all. For your needs ListBox with DisplayMemberPath would be enough:
<ListBox ItemsSource="{Binding Filters}" DisplayMemberPath="Title"/>

Categories