Hello,
I wanted to create a friendlist for my WPF MVVM (Light Toolkit) Application, which will
get filled from database generated User Objects (in ObservableCollection, List?) and should be displayed as following:
Click
I'm using MahApps Metro and would use Tiles in a WrapPanel for each alphabetic Letter. But now I can't figure out how I correctly build the DataTemplate for the ListView. For Grouping I heard about the CollectionView(-Source).. but don't focused on it yet.
So if my Code is totally wrong, how could I correctly create the View (from image above) in XAML with DataBindings as you can see in the example code?
Thanks!
What I have tried:
I have following tried from this
Example, but it didnt work..
<ListView ItemsSource="{Binding Path=FriendsCompleteList}">
<ListView.View>
<GridView>
<GridViewColumn>
<GridViewColumn.CellTemplate>
<DataTemplate>
<ItemsControl ItemsSource="{Binding Path=Friends}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel>
<controls:Tile Title="{Binding Path=Username}"
TiltFactor="2"
Height="100" Width="100">
<Image Height="40" Width="40"/>
</controls:Tile>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
And in the ViewModel (DataContext correctly set via ViewModelLocator and set in XAML):
public class FriendlistViewModel : ViewModelBase
{
private List<FriendlistPart> _friendsCompleteList;
public FriendlistViewModel(List<FriendlistPart> friendsCompleteList)
{
FriendsCompleteList= friendsCompleteList;
}
public List<FriendlistPart> FriendsCompleteList
{
get { return _friendsCompleteList; }
set { Set(ref _friendsCompleteList, value); }
}
}
public class FriendlistPart
{
public string Letter { get; set; }
public IList<User> Friends { get; set; }
}
And in the MainViewModel just to test it:
public MainViewModel()
{
var userList= new List<User>{
new User { Username = "test" },
new User { Username = "test1" },
new User { Username = "test2" }
};
var friendlistCompleteList= new List<FriendlistPart>
{
new FriendlistPart { Friends = userList, Letter = "A" },
new FriendlistPart { Friends = userList, Letter = "B" },
new FriendlistPart { Friends = userList, Letter = "C" }
};
CurrentPageViewModel = new FriendlistViewModel(friendlistCompleteList);
}
But the ListView is empty and can't refer to Friends and Username..