We Keep Coding

WPF ListView - 2 dimensions with 1 same structure

We are working on a ListView (C# WPF) and we didn't found how bind a list of items in columns, with each item containing itself a list of items with the same columns.
Let's illustre this in an example :
!
We got an observable collection on objects with parameters (name, etc.) and each object contain another observable collection of objects with the sames parameters (exept they haven't a list). So we want to list it in a ListView but we can't figure how !
We do not know enough ListView to implement this structure, some advices ?
Thanks in advance

I think the best way is :
XAML :
<Window.Resources>
<DataTemplate x:Key="gridViewSecondCellTemplate1">
<StackPanel Width="100">
<TextBlock Text="{Binding Content}" FontSize="15" />
</StackPanel>
</DataTemplate>
<DataTemplate x:Key="gridViewCellTemplate1">
<StackPanel Width="100">
<TextBlock Text="{Binding Title}" FontSize="15" />
<ListView ItemsSource="{Binding MySecondSource}>
<ListView.View>
<GridView>
<GridViewColumn Header="{Binding Subtitle}" CellTemplate="{StaticResource gridViewSecondCellTemplate1}"/>
</GridView>
</ListView.View>
</ListView>
</StackPanel>
</DataTemplate>
</Window.Resources>
<ListView ItemsSource="{Binding MySource}">
<ListView.View>
<GridView>
<GridViewColumn Header="Col 1" Width="100" CellTemplate="{StaticResource gridViewCellTemplate1}"/>
</GridView>
</ListView.View>
</ListView>
I didn't try this code. Try it, and say me if it is OK.

Listview DataTemplate Binding returning an error

I'm trying to switch over to WPF from Winform and so far it's a pain.
Anyway, I am trying to get this binding thing to work using DataTemplate.
I have a class:
public class TranslatorListItem
{
public string Item { get; set; }
public string OriginalMessage { get; set; }
public string TranslatedMessage { get; set; }
public string Sector { get; set; }
}
Items are added like this:
TranslatorListItem TLI = new TranslatorListItem();
TranslatorLVI.Items.Add(TLI);
My XAML DataTemplate:
<DataTemplate x:Key="MyDataTemplate">
<Border BorderBrush="#FFA4D5E5" BorderThickness="1,1,0,0" Margin="6">
<StackPanel Margin="6,2,6,2">
<TextBox Text="{Binding}" TextWrapping="Wrap" BorderThickness="0" BorderBrush="#00000000" />
</StackPanel>
</Border>
</DataTemplate>
This is how I'm trying to bind the data but it's returning this error: "Two-way binding requires Path or XPath."
<ListView Margin="23,224,27,54" Name="TranslatorLVI" ItemsSource="{Binding}" HorizontalContentAlignment="Stretch"
ItemContainerStyle="{StaticResource MyItemContainerStyle}">
<ListView.View>
<GridView AllowsColumnReorder="False">
<GridViewColumn Header="Item" DisplayMemberBinding="{Binding Path=Item}" CellTemplate="{StaticResource MyDataTemplate}" />
<GridViewColumn Header="Original Message" Width="300" CellTemplate="{StaticResource MyDataTemplate}" />
<GridViewColumn Header="Translated Message" DisplayMemberBinding="{Binding Path=TranslatedMessage}" CellTemplate="{StaticResource MyDataTemplate}" />
<GridViewColumn Header="Sector" DisplayMemberBinding="{Binding Path=Sector}" />
</GridView>
</ListView.View>
</ListView>
I need TranslatedMessage binding to be editable. So that field wont be Read-Only.
I heard I may need to set Two-way binding, but I am not sure how to do so.
Any help is appreciated.
Thanks!

I'm trying to switch over to WPF from Winform and so far it's a pain.
No, it's not. WPF is the best UI Framework in the history of mankind. winforms (or anything else) can't even be compared with it.
Your problem is you're trying to use a winforms approach in WPF and you fail.
WPF does not support developers with a winforms mentality.
All the horrible code behind hacks you're used to from winforms are completely unneeded in WPF.
Please read Rachel's Excellent Answer (and linked blog posts) about the mindshift needed when upgrading from winforms to WPF.
As mentioned in #JasRaj's answer, you're missing a DisplayMemberBinding in this case. I tested your code and added that, like this:
<GridViewColumn Header="Original Message"
DisplayMemberBinding="{Binding OriginalMessage}"
Width="300"/>
And it worked perfectly.
After a second read to your question I realized you wanted to make one of these columns editable.
First of all I will say that while what you want can be achieved with a ListView, using a DataGrid is easier.
You need to remove the DisplayMemberBindings from the ListView in order to use a CellTemplate, and therefore you need to modify the template slightly:
<DataTemplate x:Key="MyDataTemplate">
<Border BorderBrush="#FFA4D5E5" BorderThickness="1,1,0,0" Margin="6">
<TextBox Text="{Binding TranslatedMessage}"
TextWrapping="Wrap"
BorderThickness="0"
BorderBrush="#00000000" />
</Border>
</DataTemplate>
I have placed a ListView and a DataGrid side by side so you can compare them:
Here is the XAML:
<UniformGrid Columns="2">
<ListView ItemsSource="{Binding}" HorizontalContentAlignment="Stretch">
<ListView.View>
<GridView AllowsColumnReorder="False">
<GridViewColumn Header="Item" DisplayMemberBinding="{Binding Path=Item}"/>
<GridViewColumn Header="Original Message" DisplayMemberBinding="{Binding OriginalMessage}" Width="300"/>
<GridViewColumn Header="Translated Message" CellTemplate="{StaticResource MyDataTemplate}" />
<GridViewColumn Header="Sector"/>
</GridView>
</ListView.View>
</ListView>
<DataGrid ItemsSource="{Binding}"
AutoGenerateColumns="False">
<DataGrid.Columns>
<DataGridTextColumn Header="Item" Binding="{Binding Path=Item}" IsReadOnly="True"/>
<DataGridTextColumn Header="Original Message" Binding="{Binding OriginalMessage}" IsReadOnly="True" Width="300"/>
<DataGridTextColumn Header="Translated Message" Binding="{Binding TranslatedMessage}" />
<DataGridTextColumn Header="Sector" Binding="{Binding Sector}"/>
</DataGrid.Columns>
</DataGrid>
</UniformGrid>
Notice how the ListView requires DataTemplates in order to support edition, and is read-only by default, while the DataGrid is editable by default, does not need any special templats and requires that you add the IsReadOnly="True" to columns that are intended to be read-only.
Also, I noticed you're adding items manually to the ListView using procedural code. This is not desired in WPF. You must use an ObservableCollection<> and manipulate that collection, and let the WPF Binding engine update the UI for you.
It is recommended and desired that you Separate logic/data from UI in WPF.
If you need further clarification please let me know.
WPF Rocks.

Bind the second columns of Gridview with OriginalMessage property.
like :-
DisplayMemberBinding="{Binding Path=OriginalMessage}"
it should work.

In my opinion you dont fully use the datatemplate. you just use it to display one property;
In fact you can use a DataTemplate to display all data in thie class （TranslatorListItem）;
such as this
<DataTemplate x:Key="MyDataTemplate">
<Border BorderBrush="#FFA4D5E5" BorderThickness="1,1,0,0" Margin="6">
<TextBox Text="{Binding Item}"
TextWrapping="Wrap"
BorderThickness="0"
BorderBrush="#00000000" />
<TextBox Text="{Binding TranslatedMessage}"
TextWrapping="Wrap"
BorderThickness="0"
BorderBrush="#00000000" />
（ ..... follow up)
</Border>
</DataTemplate>
So your ListView can design like this:
<ListView ItemsSource="{Binding}" HorizontalContentAlignment="Stretch"
ItemTemplate="{StaticResource MyDataTemplate}">
</ListView>

Add multiple items in a listbox row

So far i have been working with listview without any problem. I have been able to pass multiple columns and fill them with images, text etc. I decided to do the same thing with a listbox but things there got complicated.
In a listview i do the following :
<DataTemplate x:Key="ImageTemplate" >
<Image x:Name="FavoriteImageList" Tag="{Binding tagger}" Width="12" Height="12" Source="{Binding ImageSource}" MouseLeftButtonDown="FavoriteImageList_MouseLeftButtonDown"/>
</DataTemplate>
<ListView x:Name="Citys">
<ListView.View>
<GridView ColumnHeaderContainerStyle="{StaticResource myHeaderStyle}">
<GridViewColumn Width="90" Header="Image" CellTemplate="{StaticResource ImageTemplate}"/>
<GridViewColumn Width="178" Header="Name" DisplayMemberBinding="{Binding Name}" />
<GridViewColumn Width="178" Header="City" DisplayMemberBinding="{Binding City}"/>
<GridViewColumn Width="140" Header="Author" DisplayMemberBinding="{Binding Author}"/>
</GridView>
</ListView.View>
</ListView>
And i fill columns like this :
foreach(var fav in Favorites)
{
Citys = new List<ACity>()
{
new ACity() {tagger = Name ,ImageSource = ImageSource ,Name= Name, Author= Author, City = City}
};
ListBox.Items.Add(Citys);
}
If I do this in a listbox, it will fill with (Collection).
Is there a way to do this in a listbox, passing images buttons strings in a listbox row?

See the example from the MSDN ItemsControl.ItemTemplate
<ListBox Width="400" Margin="10"
ItemsSource="{Binding Source={StaticResource myTodoList}}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding Path=TaskName}" />
<TextBlock Text="{Binding Path=Description}"/>
<TextBlock Text="{Binding Path=Priority}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
It should be pretty straight forward to match with your example.

getting the Mouseover Event on listview in wpf

I had created the listview in below manner
using grid view init;
i need that when mouseover on the gridview item i need to get that username details in the popup window , i am able to generate the popupwindow
except that Hover username in the listview
this is my sample code so please try to provide this information
<ListView AlternationCount="2" removed="#FFB6CCD8" Canvas.Left="15" Canvas.Top="77" FontSize="13" Height="43" IsSynchronizedWithCurrentItem="True" ItemContainerStyle="{DynamicResource ListViewItemContainerStyle}" ItemsSource="{Binding}" Name="checkedListView1" SelectionMode="Single" TabIndex="2" Width="269" ItemTemplate="{StaticResource ItemDataTemplate}"
SelectionChanged="checkedListView_SelectionChanged" MouseEnter="checkedListView1_MouseEnter" MouseMove="checkedListView1_MouseMove">
<ListView.View>
<GridView>
<GridViewColumn DisplayMemberBinding="{Binding Path=empid}" Header="CardID" Width="1" />
<GridViewColumn DisplayMemberBinding="{Binding Path=username}" Width="200" />
<GridViewColumn >
<GridViewColumn.CellTemplate>
<DataTemplate>
<Image Source="/WPF.Themes.Demo;component/Images/Status-user-online.ico" Width="20" Height="20"></Image>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
</GridView>
</ListView.View>
</ListView>
here i am using the listview in the Gridview manner , so please try to provide the Information to get the Username which was presented in the Gridviewcolumn when mouse cursor Hover in the listview
Thank you.

Adding an Image to ListView in WPF like this ...?

I'm gonna create a ListView in WPF like the below image
(source: picfront.org)
http://www.picfront.org/d/7xuv
I mean I wanna add an image beside of Gravatar label within Name column.
Would it be OK if you guided me ?
Edit:
The image is output of a method. The method makes the image from a base-64 string.

As long as you're already familiar with how to data bind a ListView then it's pretty simple really. In your cell template you would just need a StackPanel with an Image and a TextBlock side by side.
<ListView>
<ListView.View>
<GridView>
<GridViewColumn>
<GridViewColumn.CellTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Width="16" Height="16" Source="{Binding IconUri}"/>
<TextBlock Text="{Binding Name}"/>
</StackPanel>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn ... />
<GridViewColumn ... />
</GridView>
</ListView.View>
</ListView>