c# - Using Icons in WPF Database Driven Application Results -

i attempting make wpf application. application needs use "list view" show results of queries database. have been able create application (gui, database, linq, etc.), however, display of query results appear more "gridlike".

the specifications project below show each record appears in results needs have green circle icon next it. have removed actual results images below keep contents of database private.

i don't have enough reputation points post images, posted pictures sample/testing domain use. can see screenshots here of wpf app , code here:

http://digitalworkzone.com/wpf.html

what doing incorrectly? there need add or modify code able green circles , more of "list" style display query results?

understand wpf content model. http://msdn.microsoft.com/en-us/library/bb613548.aspx

anything has 'content' property behaves in 2 ways. if 'content' set derives uielement, class manage it's own presentation. else, however, .tostring() called, , it's text displayed instead.

what means in long run in wpf can display anything. if want show button in button, can. example:

<button>     <button.content>         <button content="this show text" />     </button.content> </button> 

the inner button have text, outer button show button because button derives uielement , therefore handle own presentation.

in picture examples above, have listboxes/datagrids want fill in graphical information. try out:

<listbox horizontalcontentalignment="stretch">     <listbox.items>         <button content="one"/>         <button content="two"/>         <button content="three"/>         <button content="four"/>     </listbox.items> </listbox> 

now have listbox shows buttons instead of text. can take step further , contain items in stackpanel, example:

<listbox horizontalcontentalignment="stretch">     <listbox.items>         <stackpanel orientation="horizontal">             <button content="a button"/>             <label content="some text" />         </stackpanel>         <stackpanel orientation="horizontal">             <button content="a button"/>             <label content="some text" />         </stackpanel>         <stackpanel orientation="horizontal">             <button content="a button"/>             <label content="some text" />         </stackpanel>     </listbox.items> </listbox> 

now have items contain layout container (stackpanels, contains other elements).

however, if set itemssource elsewhere, can use datatemplate display contents. datatemplate in effect targets particular class , lays out it's contents defined in xaml. consider:

code behind:

public partial class mywindow : usercontrol {     public mywindow() {         initializecomponent();          mylistbox.itemssource = new list<person> {             new person("sam", "smith"),             new person("jim", "henson"),             new person("betty", "white"),         };      } 

xaml:

    <listbox horizontalcontentalignment="stretch" x:name="mylistbox" >         <listbox.itemtemplate>             <datatemplate>                 <stackpanel orientation="horizontal" >                     <label content="{binding firstname}"/>                     <label content="{binding lastname}"/>                 </stackpanel>             </datatemplate>         </listbox.itemtemplate>     </listbox> 

now when listbox displays, cycle through each of items in itemssource property, , lay them out using datatemplate. it's possible have datatemplate target specific classes using datatype property if you're using polymorphism (as in different types of people such 'cusomters' or 'employees' derive 'person).

the problem approach setting value of items directly, bad form. it's better define class handles of data view separately. consider:

public class viewmodel {      // wpf automatically read these properties using reflection.     public list<person> people {         {             return new list<person> {                 new person("sam", "smith"),                 new person("jim", "henson"),                 new person("betty", "white")             };         }     } } 

that hold data view, let's add actual window. first need reference namespace ('xmlns' means xml namespace):

<window x:class="sharp.mywindow"     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"       xmlns:lol="clr-namespace:sharp"> 

the namespace sharp (the namespace stuff lives), , alias we'll give lol. attach our viewmodel class window setting datacontext property, in:

<window>     <window.datacontext>         <lol:viewmodel />     </window.datacontext> </window> 

this makes of public properties on viewmodel class available window. way, if want read persons information our listbox, say:

<listbox horizontalcontentalignment="stretch" itemssource="{binding people}" >    ... </listbox> 

notice itemssource={binding people}, means 'scan viewmodel public properties called 'people' , retrieve results. fundamentals behind mvvm approach. might have of business logic in 1 or many classes handle main application operation in model, have viewmodel interacts model , exposes results public properties. wpf automatically binds properties , presents them your. information flows, rather setting values force.

to understand how wpf supposed work, should take time understand basics of mvvm. wpf designed mvvm in mind, , how wpf supposed work, should take time head around it. take at: http://agilewarrior.wordpress.com/2011/01/11/simple-mvvm-walkthrough-part-i/ .