How to create a listview with multiple datatemplates

Question

0.00/5 (No votes)

See more:

XML

hello,
I'm buzzy to create a custom listview witch has custom defined views based on the data it gets. I like
views with links such described in the example below and for example with a textbox and a textblock,
but it doesn't matter how it goes about it's idea.
I have a enum like this to know witch datatemplate must be used:
<pre>
    public enum tabType
    {
        tabbedTextBlock = 1,
        tabbedLinkedBlock = 2
    }

This class is a class to store data in

public class person
{
    private string firstName;
    private string lastName;
    private int age;
    private tabType type;

    public person()
    {
        // Insert code required on object creation below this point.
    }
    public person(string firstName, string lastName, int age, tabType type)
    {
        this.FirstName = firstName;
        this.LastName = lastName;
        this.Age = age;
        this.tabType = type;
    }
    public string FirstName
    {
        get;
        set;
    }
    public string LastName
    {
        get;
        set;
    }
    public int Age
    {
        get;
        set;
    }
            public tabType tabType
            {
                    get;
                    set;
    }

a list of objects too be bind to the list

public class sampledata : ObservableCollection<person>
{
    public sampledata() :base()
    {
        Add(new person("foo", "fofoo", 23, tabType.tabbedLinkedBlock));
        Add(new person("apple", "fruit", 21, tabType.tabbedTextBlock));
        Add(new person("pineapple", "fruit", 17, tabType.tabbedLinkedBlock));
        Add(new person("banan", "fruit", 47, tabType.tabbedLinkedBlock));
        Add(new person("kiwi", "fruit", 34, tabType.tabbedTextBlock));
    }
}

the tabtype is used to let the custom listview class know witch type of datatemplate most be used.
I have searched for a view day's but couldn't found a nice working solution, only an idea but
it's written in VB.net with windows forms. It can be found here.

thx,
DJohn

Posted 20-Oct-10 8:40am

Member 3241688

Add a Solution

Comments

Abhinav S 20-Oct-10 14:49pm

Sorry, but what exactly do you mean by datatemplates?

Member 3241688 20-Oct-10 15:42pm

In xaml you can create the body of a listview like this:

<pre lang="xml"><ListView ItemsSource="{Binding}" Height="500" Width="500" HorizontalAlignment="Left" VerticalAlignment="Top" >
<ListView.View>
<GridView>
<GridViewColumn Width="140" Header="Firstname: "
DisplayMemberBinding="{Binding FirstName}" />
<GridViewColumn Width="140" Header="Lastname: "
DisplayMemberBinding="{Binding LastName}" />
<GridViewColumn Width="140" Header="Age: "
DisplayMemberBinding="{Binding Age}" />
</GridView>
</ListView.View>
</ListView></pre>

what I want is a different body based on the property value of tabType, when this type is set to tabbedTextBlock the body of the tab must like this:
<pre lang="xml">
<GridView>
<GridViewColumn Width="140" Header="Firstname: "
DisplayMemberBinding="{Binding FirstName}" />
<GridViewColumn Width="140" Header="Lastname: "
DisplayMemberBinding="{Binding LastName}" />
<GridViewColumn Width="140" Header="Age: "
DisplayMemberBinding="{Binding Age}" />
</GridView>
</pre>

when tabType property is set to tabbedLinkedBlockthe body of the tab must like a list of buttons such as <a href="Ik hoop dat het zal een beetje te verduidelijken">here</a>.

I now the exmaple liks a littlebit unusual but I hope it will clarify the idea a bit.

Thx

2 solutions

Solution 3

you can use multiview inside the <ItemTemplate>. MultiView ActiveViewIndex will changed accourding to the type.
Example:

.aspx code

<asp:ListView ID="lvList" runat="server" OnItemDataBound="lvList_ItemDataBound">
<LayoutTemplate>
<ul runat="server" id="ulContainer">
<li runat="server" id="itemPlaceholder"></li>
</ul>
</LayoutTemplate>
<ItemTemplate>

<asp:MultiView ID="mv" runat="server" ActiveViewIndex="0">
<asp:View ID="v1" runat="server">
<asp:TextBox ID="txt1" runat="server"></asp:TextBox>
</asp:View>
<asp:View ID="v2" runat="server">
<asp:Literal ID="ltl1" runat="server"></asp:Literal>
</asp:View>
</asp:MultiView>
<br/>
</ItemTemplate>
<EmptyDataTemplate>
</EmptyDataTemplate>
</asp:ListView>

C# code

class AA {
public AA(int v)
{
p = v;
}
public int p;
}

protected void lvList_ItemDataBound(object sender, ListViewItemEventArgs e)
{
if (e.Item.ItemType == ListViewItemType.DataItem)
{
AA param = (e.Item as ListViewDataItem).DataItem as AA;

if (param.p == 1)
{
Literal ltl1 = e.Item.FindControl("ltl1") as Literal;
ltl1.Text = "sample";
MultiView mv = e.Item.FindControl("mv") as MultiView;
mv.ActiveViewIndex = 1;
}
else
{
TextBox txt1 = e.Item.FindControl("txt1") as TextBox;
txt1.Text = "sample";
MultiView mv1 = e.Item.FindControl("mv") as MultiView;
mv1.ActiveViewIndex = 0;
}
}
}

List<AA> a = new List<AA>();
a.Add(new AA(1));
a.Add(new AA(2));
lvList.DataSource = a;
lvList.DataBind();

Posted 20-Oct-10 19:36pm

shakil0304003

Comments

Member 3241688 21-Oct-10 11:43am

Sorry but your response is in asp.net, my question is about WPF XAML and that makes this response quite useless for me.

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

N_tro_P · Accepted Answer · 2010-10-20T10:02:00

Solution 2

I see no reason why you are using an emum to tell which datatemplate to use. Just bind your view and your viewmodel and you are done.

i.e.

<DataTemplate DataType="{x:Type vmNameSpace:tabbedLinkedBlock}"
<viewNameSpace:ViewObjectForTheTabbedLinkedBlock/>
</DataTemplate>

<DataTemplate DataType="{x:Type vmNameSpace:tabbedTextBlock}"
<viewNameSpace:ViewObjectForTheTabbedTextBlock/>
</DataTemplate>

I am not sure how you want them displayed so I made a view for your different items then you are saying you have. Now if they are actually different items the view will get used as it is bound to these different items.

Posted 20-Oct-10 10:02am

N_tro_P

Comments

Member 3241688 20-Oct-10 17:20pm

Looks good, but could you explain it a little bit? How did I use the DataType property maybe with a example or a link to a example? I've never used it before, I've got only a little bit experience with the normal wpf controls but this is my first real app where I will use it.

[no name] 20-Oct-10 17:26pm

http://msdn.microsoft.com/en-us/library/ms742521.aspx

There is alot to data templates. But what you are needing you don't need to dig that far. Just make yourself a UserControl (that is your View). Then make a class that inherits from INotifyPropertyChanged (your view Model). For any properties you want data from (e.g. Age, Name etc.) you post the PropertyChanged event. This will tell the view to update. Take a look at Josh Smiths MVVM article if you are confused by the binding. He does a pretty good job of explaining the basics.

http://msdn.microsoft.com/en-us/magazine/dd419663.aspx

Don't forget to accept the answer if you are happy with it.

Member 3241688 21-Oct-10 11:52am

Thx for the link to Josh Smiths MVVM article, that may help me a lot.