[WPF] Binding Content to a ListView!

BinaryX Aug 8, 2013

  1. BinaryX

    BinaryX Lifetime Gold XPG Developer Lifetime Gold
    205/282

    Joined:
    May 21, 2011
    Messages:
    977
    Likes Received:
    257
    Trophy Points:
    0
    Gender:
    Male
    Location:
    Europe
    Console:
    Xbox
    Hello XPG,

    In this tutorial i'll explain to you how you can easily bind dynamic content to a listview.
    What you will know after reading this tutorial with caution:

    • Howto bind content from a class to a listview
    • Howto set the datacontext on a listviewitem
    • Howto properly modify the xaml (headers and listview)

    ----

    Start by creating a new Window in your project, after you done that double-click the file to get into designer view.
    Copy the code below and paste it into the xaml source, a ListView should now appear in the designer.

    <ListView x:Name="listView1" HorizontalAlignment="Left" Height="237" Margin="124,0,0,0" VerticalAlignment="Top" Width="207">
    <ListView.View>
    <GridView>
    <GridViewColumn/>
    </GridView>
    </ListView.View>
    </ListView>

    First we need to set the ItemsSource attribute of the ListView element along with DataContext so that we can easily access the item thats selected and pull the context from it.

    Add the following as an attribute:

    ItemsSource="{Binding It}"

    Code:
    DataContext="{Binding SelectedItem, RelativeSource={RelativeSource Self}}"
    
    For the actual data being set, we need to define a new class with the INotifyPropertyChanged interface.
    Create a new class in your project and paste the following in it:

    using System.ComponentModel;

    public class Character : INotifyPropertyChanged
    {
    public event PropertyChangedEventHandler PropertyChanged;

    string _Name;

    public string Name
    {
    get { return _Name; }
    set
    {
    _Name = value;

    OnPropertyChanged("Name");
    }
    }



    protected void OnPropertyChanged(string name)
    {
    PropertyChangedEventHandler handler = PropertyChanged;
    if (handler != null)
    {
    handler(this, new PropertyChangedEventArgs(name));
    }
    }


    }

    Let me explain this bit to you; first we have the class name which is Character, then the class is defined with an interface attached to it. With the use of this interface, the ListView will know if anything changes in the class and will update itself with it.

    There is a private _Name variable and a public get/setter with the OnPropertyChanged method in it, obviously without that it won't work as expected with the ListView.

    Add a column to your listview and set the binding to the public variable name inside your class so in this case 'Name' - replace <GridViewColumn/> with:

    <GridViewColumn Header="Character Name" DisplayMemberBinding="{Binding Path=Name}" Width="150" />

    Thats all you have to do to get the binding done.

    ---

    Ceate a new instance of the Character class and set the Name property:

    Character c = new Character();
    c.Name = "Character1";

    Create a new ListViewItem and set it's datacontext property:

    ListViewItem itm = new ListViewItem();
    itm.DataContext = c;

    Add the ListViewItem with our class bind to it in the ListView:

    listView1.Items.Add((Character)itm.DataContext);

    --

    Now that's it, you could go further with this and add every character to a List<> and then loop through and add them to the ListView...

    If you then edit any class in the List<> and it's in the ListView it will automatically update.
    You can also get the current selected character's class with:

    Character c = (Character)listView1.DataContext; // == SelectedItem

    I just found out about this a few days ago but it's extremely useful, it's what we used in our latest Enchanted Arms editor for Avalon AIO, it's so convenient to load them that way (112 characters...)!

    Hopy you enjoyed my tutorial, it may be a bit clumsy but I don't make these for a living haha.
     
    • Like Like x 3
  2. gold972

    gold972 团队XPG影响 Effect XPG Developer TeamXPG
    205/282

    Joined:
    Dec 6, 2010
    Messages:
    6,833
    Likes Received:
    14,870
    Trophy Points:
    205
    Gender:
    Male
    Location:
    France Kernal XDK
    Console:
    Xbox
    thank for the simple tutorial ;)
     
    • Like Like x 1
  3. BinaryX

    BinaryX Lifetime Gold XPG Developer Lifetime Gold
    0/47

    Joined:
    May 21, 2011
    Messages:
    977
    Likes Received:
    257
    Trophy Points:
    0
    Gender:
    Male
    Location:
    Europe
    Console:
    Xbox
    Anytime mate :)
     
    • Like Like x 1
  4. Bu

    Bullet Guest

    Nice and easy , good job NullBy7e
     

Share This Page

Close