locked
Creating a ListView in WPF ? RRS feed

  • Question

  • Hi guys and happy new year(2010).

    I'm a novice in WPF's ListView.
    I'm gonna create the following ListView in WPF via XAML :

    ListView

    Could you please guide me, how I can do it ?
    Thanks.
    Beauty is a great God blessing
    Monday, January 4, 2010 5:51 PM

Answers

  • Great, I'm glad that helped!

    So to do what you need, I think these are the changes that are necessary:

    First, you'll not bind the DisplayMemberBinding to Name.  Instead, you'll need to create a DataTemplate for the column that you want to change.

    For example, the XAML would now look like this:

    	<ListView ItemsSource="{Binding ListViewDataSource}">
    		<ListView.View>
    			<GridView>
    				<GridViewColumn Header="Name">
    					<GridViewColumn.CellTemplate>
    						<DataTemplate>
    							<Image Source="{Binding Name}" />
    						</DataTemplate>
    					</GridViewColumn.CellTemplate>
    				</GridViewColumn>
    				<GridViewColumn Header="Tags" DisplayMemberBinding="{Binding Tags}"></GridViewColumn>
    				<GridViewColumn Header="Location" DisplayMemberBinding="{Binding Location}"></GridViewColumn>
    			</GridView>
    		</ListView.View>
    	</ListView>

    and then in your code-behind, when the list gets generated, replace the Name text with the path to your picture file(s), e.g. "c:\\my_picture.png".
    Friday, January 8, 2010 7:57 AM

All replies

  • Would a Grid accomplish what you need?

    Hope this helps.
    www.insteptech.com ; msmvps.com/blogs/deborahk
    We are volunteers and ask only that if we are able to help you, that you mark our reply as your answer. THANKS!
    Monday, January 4, 2010 6:14 PM
  • Hi there, I've got something I put together that I think is more of what you're looking for.  You can download it here .

    Here's a synopsis of the solution I've proposed for you -- use a ListView.  Then specify the header text via GridViewColumn.  Now that you've got that, make sure you have the DataContext set for your Window and have it bind to a List<YourDataStructure> object.  My sample populates the List in the constructor, and since I have the data binding for the ListView pointing at the right List, I use DisplayMemberBinding to have each column display the right information.

    You might want to use an ObservableCollection instead of a List if the contents will change dynamically.  That way, as the code-behind modifies the contents, the GUI will update automagically.

    I hope this helps you out.  Please mark your question as answered if this did the trick.
    • Proposed as answer by DaveyBoy1138 Monday, January 4, 2010 8:00 PM
    Monday, January 4, 2010 8:00 PM
  • Thanks a lot D. Matsumoto .
    Your file was great.
    Now I'm looking for a solution to put Image in a GridViewColumn like above image (in first post).
    Actually I'm gonna do it via C# and dynamically.
    Could you please guide me ?

    Thanks
    Beauty is a great God blessing
    Friday, January 8, 2010 3:10 AM
  • Great, I'm glad that helped!

    So to do what you need, I think these are the changes that are necessary:

    First, you'll not bind the DisplayMemberBinding to Name.  Instead, you'll need to create a DataTemplate for the column that you want to change.

    For example, the XAML would now look like this:

    	<ListView ItemsSource="{Binding ListViewDataSource}">
    		<ListView.View>
    			<GridView>
    				<GridViewColumn Header="Name">
    					<GridViewColumn.CellTemplate>
    						<DataTemplate>
    							<Image Source="{Binding Name}" />
    						</DataTemplate>
    					</GridViewColumn.CellTemplate>
    				</GridViewColumn>
    				<GridViewColumn Header="Tags" DisplayMemberBinding="{Binding Tags}"></GridViewColumn>
    				<GridViewColumn Header="Location" DisplayMemberBinding="{Binding Location}"></GridViewColumn>
    			</GridView>
    		</ListView.View>
    	</ListView>

    and then in your code-behind, when the list gets generated, replace the Name text with the path to your picture file(s), e.g. "c:\\my_picture.png".
    Friday, January 8, 2010 7:57 AM
  • It worked very well ;)
    But I have a trouble !
    Sometimes I don't have a Image's Source and I create an Image during a process.

    Image img = new Image();
    img.Height = img.Width = 16;
    img = Base64StringToImage(xNode.Attributes["ICON"].Value);

    What about these situations ?
    Do you have any ideas ?

    Beauty is a great God blessing
    Saturday, January 9, 2010 4:23 AM