Display data from two levels down - c#

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>

Related

How do I keep a specific xaml element within the window (so it doesn't overflow through the bottom)

I'm trying to make a simple invoicing application as part of an assessment. I have made a interface with a listbox that contains all the items that have been requested. However when I add too many items, the listbox then flows through the bottom of the window and I have to resize the window to fit.
I've tried a dockpanel, and I've assigned the stackpanel to the grid itself. If I set a fixed height it seems to work as expected.
Here is the xaml of the listbox:
<StackPanel Grid.Column="1" Grid.Row="0" ClipToBounds="True">
<ListBox Name="Shirts" HorizontalContentAlignment="Stretch" ScrollViewer.VerticalScrollBarVisibility="Visible" Margin="5" ClipToBounds="True">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock>
<Run Text="{Binding ShirtSize}" />
<Run Text="{Binding ShirtStyle}" />
<Run Text="{Binding ShirtColour}" />
</TextBlock>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<Button Content="Print Invoice" Margin="5" ClipToBounds="True"/>
</StackPanel>
I expected the code to work like this (it's not meant to be of fix height but it works as an example).
How it actually works.
Use a DockPanel instead of a StackPanel and it should work better. StackPanel will grow with its content regardless of its container size. A DockPanel will respect the container size and fill the available space. Put the button first in order with Dock="Bottom" and then the ListBox with Dock="Fill" (the list will arrange itself above the button even though it is declared after it, which is a bit unintuitive)

How to have multiple datatemplates in UWP ListView (x:bind)

I'm stuck with my UWP app, I'm trying to follow MVVM principle with {x:bind} instead of the older WPF way {binding name}
But I'm stuck with my idea/development, I'm trying insert multiple DataTemplates within ListView (or GridView).
I want to do something like this as an example:
<ListView.ItemTemplate>
<DataTemplate x:DataType="localModels:Cars">
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Vertical">
<TextBlock Text="Name:" />
<TextBox Text="{x:Bind Name}" />
</StackPanel>
</StackPanel>
</DataTemplate>
<!-- Here is the second DataTemplate which isn't allowed in UWP -->
<DataTemplate x:DataType="localModels:Bikes">
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Vertical">
<TextBlock Text="Name:" />
<TextBox Text="{x:Bind Name}" />
</StackPanel>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
As you can see, I have 2 DataTemplate: Cars and Bikes inside ListView.ItemTemplate.
Not sure if this is relevant: Cars.cs is inheriting from Bike.cs parent.
I don't really get why UWP doesn't accept more than 1 DataTemplate within ListView.ItemTemplate. Because I really want my ListView to show as many kind of data as possible.
What's the way to solve this issue in UWP and {x:bind}?
You can use a DataTemplateSelector to determine which datatemplate should be selected based on your data type. Here you can find an example.

Nesting databound controls inside a WPF TreeView

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>

Windows 8 store app: How dynamically change Binding in ListViewItem

I have created a common control for listView and I want to change the content of each item in the listView. Something like DisplayMemberPath but I need to send two values ​​that are not the same for any one screen.
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<TextBlock Text="{Binding Property1}"/>
<TextBlock Text="{Binding Setter2}"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
and on the next screen I want something like this
<TextBlock Text="{Binding SuperNewProperty}"/>
<TextBlock Text="{Binding Setter2xyz}"/>
How do I create a control which has variable binding like:
<TextBlock Text="{Binding {Binding MySpecificValue}"/>
This is obviously a stupid thing, but it best describes what I want to do.
For completion:
Ok i have some module Employes.xaml
where call, my control with some dependency properties as itemSource and prop1, prop2(I want to use both, like display member path).
ItemSource is IEnumerable from DB and contains 2 columns: employeName, employNumber, this will be displayed on the listView
<control:listViewMyControl itemSource ="{Binding employes}" prop1="employeName" prop2="employNumber" />
but when i have modul Cities.xaml
I need binding prop1, prop2 to another column name, cityName, cityRank or whatever
<control:listViewMyControl itemSource ="{Binding cities}" prop1="cityName" prop2="cityRank " />
The problem comes when I want to display two different types of listviewitems for listview
// my user control listViewMyControl
<ListView x:Name="listView1">
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<TextBlock Text="{Binding employeName}"/>
<TextBlock Text="{Binding employeNumber}"/>
<TextBlock Text="{Binding cityName}"/>
<TextBlock Text="{Binding cityRank}"/>
// but i want only something like display member path for two labels, input modules may be more (employes, cities, cars, stations, .....) something like this
<TextBlock Text="{Binding {Binding MySpecificValue}"/>
<TextBlock Text="{Binding {Binding MySpecificValue2}"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Thanks in advance.

WPF Databinding stackpanel

Im a beginner in WPF programming, coming from .NET 2.0 C#.
Im trying to make a horizontal StackPanel which should be filled with data from a table in a database. The problem is that I want it to display an image with some text from the table below and then stack those two items horizontally.
Here's some pseudo-code to display what I want to do:
<StackPanel Orientation="horizontal" ItemsSource="{Binding Path=myTable}">
<StackPanel>
<Image Source="User.png"/>
<Label HorizontalAlignment="Center" Content="{Binding Path=UserName}"></Label>
</StackPanel>
</StackPanel>
I simply cannot figure oout how to do this.
Julien's answer is correct for your written description, however, looking at your XAML, it appears you are looking for something like the following:
<DataTemplate x:Key="UserDataTemplate">
<StackPanel>
<Image Source="User.png"/>
<Label HorizontalAlignment="Center" Content="{Binding Path=UserName}" />
</StackPanel>
</DataTemplate>
<ItemsControl x:Name="UserList" ItemTemplate="{StaticResource UserDataTemplate}" >
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
You definately need an ItemsControl (or some derivation of) to bind your source to. Then you can change the the orientation by setting it's items panel (which I believe is a VirtualizingStackPanel with Vertical orientation by default) so just set it to a VirtualizingStackPanel with Horizontal Orientation. Then you can set the ItemsTemplate for each of your items to the layout you desire (an image stacked on top of text bound from your database).
Basically, you want to use a control capable of displaying an enumeration of objects. The control capable of this is the class ItemsControl and all of its descendants (Selector, ListBox, ListView, etc).
Bind the ItemsSource property of this control to a list of objects you want, here a list of users you've fetched from the database. Set the ItemTemplate of the control to a DataTemplate that will be used to display each item in the list.
Sample code:
In a Resources section (for example Window.Resources):
<DataTemplate x:Key="UserDataTemplate">
<StackPanel Orientation="Horizontal">
<Image Source="User.png"/>
<Label HorizontalAlignment="Center" Content="{Binding Path=UserName}" />
</StackPanel>
</DataTemplate>
In your Window/Page/UserControl:
<ItemsControl x:Name="UserList" ItemTemplate="{StaticResource UserDataTemplate}" />
In your code behind:
UserList.ItemsSource = ... // here, an enumeration of your Users, fetched from your db

Categories