How to create a wpf template with nested datatemplate (datatemplate in datatemplate) - c#

I'm totaly new to wpf. I try to create a nested datatemplate like this layout (datatemplate inside another datatemplate). I managed to create a datatemplate and to connect to "Object A" in an ObservableCollection, which worked really well. Now I need to have a nested ObservableCollection in each Object A to display Object B and Object C in columns. But I don't really know how to do that and can't find examples.
Maybe anyone could give me a hint?
Thanks and regards,
Marlene

Assuming you're using a ListView or ListBox to display a collection of Object A (lets call it ObjectACollection), and that Object A has properties named (in this example) ObjectBCollection and ObjectCCollection you could do something like this:
<UserControl xmlns:namespaceA="clr-namespace:MyProj.Models.ObjectANamespace"
xmlns:namespaceB="clr-namespace:MyProj.Models.ObjectBNamespace"
xmlns:namespaceC="clr-namespace:MyProj.Models.ObjectCNamespace" >
<ListBox ItemsSource="{Binding ObjectACollection}">
<ListBox.ItemTemplate>
<DataTemplate DataType="namespaceA:ObjectA">
<StackPanel Orientation="Horizontal">
<ListBox ItemsSource="{Binding ObjectBCollection}">
<ListBox.ItemTemplate>
<DataTemplate DataType="namespaceB:ObjectB">
<TextBlock Text="{Binding ObjectBProperty}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<ListBox ItemsSource="{Binding ObjectCCollection}">
<ListBox.ItemTemplate>
<DataTemplate DataType="namespaceC:ObjectC">
<TextBlock Text="{Binding ObjectCProperty}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</UserControl>

Related

How to create a template with parameters in WPF?

I have 3 List views. They are very similar. The only difference is that their ItemsSource binds to different variables. Is there a way to create a template list view with unknown ItemsSource, and I can pass a parameter to fill that ItemsSource?
My code is something like this:
<ListView Name="View1" ItemsSource={"Binding Student1"}>
<TextBlock Text={"Binding Name"}/>
</ListView>
<ListView Name="View2" ItemsSource={"Binding Student2"}>
<TextBlock Text={"Binding Name"}/>
</ListView>
<ListView Name="View3" ItemsSource={"Binding Student3"}>
<TextBlock Text={"Binding Name"}/>
</ListView>
Edit:
I might have expressed my question in a wrong way. I would like to have a separate user control view called "StudentView":
<ListView ItemsSource=Parameter1>
<TextBlock Text={"Binding Name"}/>
</ListView>
So that in my main window, I can do something like this:
<local:StudentView Parameter1={"Binding Student1"}/>
You are on the right track with thinking about templating
What you are looking for is something called a ControlTemplate.
Your ControlTemplate would then target the ListView control and use the key word TemplateBinding to pass through the ItemsSource binding from your ListView
You would look to add this as a window resource as shown below.
<Window.Resources>
<ControlTemplate x:Key="ListViewTemplate" TargetType="ListView">
<ListView ItemsSource="{TemplateBinding ItemsSource}">
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Name}"/>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ControlTemplate>
</Window.Resources>
This would enable you to use this template on your ListView controls as shown below
<ListView Template="{StaticResource ListViewTemplate}" ItemsSource="{Binding PersonList}"/>
<ListView Template="{StaticResource ListViewTemplate}" ItemsSource="{Binding PersonList1}"/>
<ListView Template="{StaticResource ListViewTemplate}" ItemsSource="{Binding PersonList2}"/>
Hope this gives you what you were looking for

ContentPresenter with ContentTemplateSelector inside an ItemTempate of an ItemsControl

So, I have an ItemsControl with an ItemTemplate to visualize the items in it's ItemsSource.
This Template is a DataTemplate with some controls in it.
<ItemsControl ItemsSource="{Binding Items}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBlock/>
<TextBlock/>
<!-- Content depending on item type -->
<ContentPresenter Content="{Binding}" ContentTemplateSelector="{StaticResource TemplateSelector}"/>
<TextBlock/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
The items in the ItemsSource can be of different types. Most of the properties of the different types are the same but some properties are different. So I want to put the common content directly inside the DataTemplate but for the content that differs I want to have some kind of placeholder that displays only type-specific content.
So I tried a ContentPresenter with a ContentTemplateSelector. But this does not work. When I set the Content, the TemplateSelector is never called and the name of the underlying viewmodel is displayed. When I do not set the Content, the TemplateSelector is called, but the item in the SelectTemplate function is null.
I do not want to make the whole DataTemplate for each DataType because most of the content is the same and I would have much duplicate code.
You do not need a DataTemplateSelector.
Just set the DataType of different DataTemplates in the ItemsControl's Resources. The DataTemplates would automatically be selected according to the type of the item.
<ItemsControl ItemsSource="{Binding Items}">
<ItemsControl.Resources>
<DataTemplate DataType="{x:Type local:Item1}">
<TextBlock Text="{Binding Item1Property}"/>
</DataTemplate>
<DataTemplate DataType="{x:Type local:Item2}">
<TextBlock Text="{Binding Item2Property}"/>
</DataTemplate>
</ItemsControl.Resources>
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock ... />
<ContentPresenter Content="{Binding}"/>
<TextBlock ... />
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>

wp7 c# get control data context

I have a listbox whose item template is a user control:
<ListBox
x:Name="ChatBox"
Width="450"
ItemsSource="{Binding ChatMessage}">
<ListBox.ItemTemplate>
<DataTemplate>
<local:ChatItem DataContext="{Binding ChatMessage}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
in my code behind:
messages = new ObservableCollection<ChatMessage>(dbMessages);
ChatBox.ItemsSource = messages;
How can I get the bound element, that is, the chat message object from inside the control ?
Thanks for help
your ChatItem usercontrol is automatically got the its Datacontext to ChatMessage Object. it is not required to set it again. and for binding properties of your usercontrol to ChatMessage object properties then your ChatItem properties must be Dependency Properties if you already have them then just bind them to ChatMessage Properties like this.
<ListBox
x:Name="ChatBox"
Width="450"
ItemsSource="{Binding ChatMessage}">
<ListBox.ItemTemplate>
<DataTemplate>
<local:ChatItem DataContext="{Binding ChatMessage}" ChatItemDependencyProperty = "{Binding Path=ChatMessageProperty}" />
</DataTemplate>
</ListBox.ItemTemplate>
hope it helps you..

Binding variable number of images in single WPF itemtemplate

I have a listbox and each item contains a title and a variable number of images, from 2 to 10+. Easy enough to do with a fixed number of images, but how can I set the itemtemplate to the varied number of images?
You can add ItemsControl into ItemTemplate
Something like this:
<ListBox ItemsSource="{Binding Something}">
<ListBox.ItemTemplate>
<DataTemplate>
<ItemsControl ItemsSource="{Binding Images}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Image Source="{Binding}"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I did write this without knowing details of your object model, so this is more to give you idea...

Binding a collection to Listbox

I basically started today with WPF, and I'm astounded by how difficult it is to do binding. I have an array of TextBoxes, in an ObservableCollection, and just want to bind that in my Listbox, so that they arrange themselves vertically.
I have fiddled around with this for 3 already, can you help?
I'm working in a WPF UserControl, not a window as so many tutorials seem to rely on.
In your C# code, you can do something like this:
myListBox.ItemsSource = myTextBoxesCollection;
Or in your XAML code:
<ListBox ItemsSource="{Binding MyTextBoxesCollection}">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBox Text="{Binding Text}" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
For the XAML, MyTextBoxesCollection needs to be a public property on your data context. One way to set the DataContext could be, in your constructor:
DataContext = this;
Having an ObservableCollection<TextBox> is alomost always the wrong approach. You likely want an ObservableCollection<string> instead.
Then, in your ListBox (or ItemsCollection) you have the following code:
<ListBox ItemsSource="{Binding MyStrings}">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBox Text="{Binding .}" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Make MyTextBoxCollection (your ObservableCollection of textboxes) a public property of your DataContext.
<ListBox ItemsSource=”{Binding MyTextBoxCollection}”>
<ListBox.ItemTemplate>
<DataTemplate><TextBox Text=”{Binding Text}” /></DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

Categories

Resources