Click here to Skip to main content
15,867,851 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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..
XML
<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> <!-- Just Closing Tags -->

And in the ViewModel (DataContext correctly set via ViewModelLocator and set in XAML):
C#
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:
C#
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..
Posted
Comments
ryanba29 24-Feb-16 16:28pm    
the View (from image above)? Image is missing

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900