how to set multiple data template to a listbox

Question

I have made 2 data templates and using it as a resource,i am applying it to a listbox,i am able to apply only a single data template on the listbox,here is the code for both data template

  <Window.Resources>
        <DataTemplate x:Key="template1">
            <Canvas Height="40" Width="850">
                <Label Height="30" Width="170" Canvas.Top="5" Canvas.Left="80" Background="LightGray"></Label>
                <TextBox Height="30" Width="120" Canvas.Top="5" Canvas.Left="300" Background="AliceBlue"></TextBox>
                <Label Canvas.Left="420" Canvas.Top="5">$</Label>
            </Canvas>
        </DataTemplate>
        <DataTemplate x:Key="template2">
            <Canvas Height="40" Width="850">
                <Label Height="30" Width="200" Canvas.Top="5" Canvas.Left="80" Background="LightGray"></Label>
                <TextBox Height="30" Width="200" Canvas.Top="5" Canvas.Left="300" Background="AliceBlue"></TextBox>
                <Label Canvas.Left="420" Canvas.Top="5">$</Label>
            </Canvas>
        </DataTemplate>
            </Window.Resources>

and the code for listbox

<TabItem>
        <Canvas Height="700" Width="850">
            <ListBox x:Name="listBox" Height="700" Width="850" ItemTemplate="{StaticResource template1}">
            </ListBox>
        </Canvas>
    </TabItem>

how can i apply both the data templates to the listbox,presently only "template1" is getting applied,how can "template2" be applied or if there are many data templates in future.,is there any way??,thanx

Answer 1

Have you tried ItemsControl.ItemTemplateSelector Property ItemTemplateSelector

Below I have a very simple example of a List of Student binded to ListBox and for the Student having Marks less than 50 percent I have Template2 and for others I selected Template1

View

<Window.Resources>
    <local:StudentDataTemplateSelector x:Key="studentDataTemplateSelector"/>
    <DataTemplate x:Key="template1">
        <StackPanel Orientation="Horizontal" Background="LightGray">
            <TextBlock Text="{Binding RollNo}" Margin="5"/>
            <TextBlock Text="{Binding Name}" Margin="5"/>
            <TextBlock Text="{Binding Percentage}" Margin="5"/>
        </StackPanel>
    </DataTemplate>
    <DataTemplate x:Key="template2">
        <StackPanel Orientation="Horizontal" Background="Red">
            <TextBlock Text="{Binding RollNo}" Margin="5"/>
            <TextBlock Text="{Binding Name}" Margin="5"/>
            <TextBlock Text="{Binding Percentage}" Margin="5"/>
        </StackPanel>
    </DataTemplate>
</Window.Resources>
<Grid>
    <ListBox x:Name="listBox" Height="700" Width="850" ItemsSource="{Binding Students}"
             ItemTemplateSelector="{StaticResource studentDataTemplateSelector}">
    </ListBox>
</Grid>

xaml.cs

 public MainWindow()
    {
        InitializeComponent();
        DataContext = new ViewModel();
    }    

ViewModel / Student

    public class ViewModel
{
    public ObservableCollection<Student> Students { get; set; }

    public ViewModel()
    {
        Students = new ObservableCollection<Student>{new Student{Name="ABC",RollNo=1,Percentage=86.5m},
            new Student{Name="DEF",RollNo=2,Percentage=76.5m},
            new Student{Name="GHI",RollNo=3,Percentage=66.5m},
            new Student{Name="JKL",RollNo=4,Percentage=56.5m},
            new Student{Name="MNO",RollNo=5,Percentage=46.5m},
            new Student{Name="PQR",RollNo=6,Percentage=36.5m},
        };
    }

}

public class Student
{
    public string Name { get; set; }
    public int RollNo { get; set; }
    public decimal Percentage { get; set; }
}

ItemTemplateSelector

    public class StudentDataTemplateSelector : DataTemplateSelector
{
    public override DataTemplate SelectTemplate(object item, DependencyObject container)
    {
        FrameworkElement element = container as FrameworkElement;

        var student = item as Student;
        if (student == null)
            return null;
        if (student.Percentage > 50)
            return
                element.FindResource("template1")
                as DataTemplate;
        else
            return
                element.FindResource("template2")
                as DataTemplate;
    }
}

I hope this will give you an idea.

Answer 2

You can use multiple DataTemplates using DataTemplateSelector and Datatrigger but you havent explain any condition(selected item,unselected item,index,change foreground and fontsize etc.)

It seems that you want template for displaying purpose/UI purpose only then you need to change template for each listboxitem like below

<Window.Resources>
    <ControlTemplate x:Key="template1">
        <Canvas Height="40" Width="850">
            <Label Height="30" Width="170" Canvas.Top="5" Canvas.Left="80" Background="LightGray"></Label>
            <TextBox Height="30" Width="120" Canvas.Top="5" Canvas.Left="300" Background="AliceBlue"></TextBox>
            <Label Canvas.Left="420" Canvas.Top="5">$</Label>
        </Canvas>
    </ControlTemplate>
    <ControlTemplate x:Key="template2">        
        <Canvas Height="40" Width="850">
            <Label Height="30" Width="200" Canvas.Top="5" Canvas.Left="80" Background="LightGray"></Label>
            <TextBox Height="30" Width="200" Canvas.Top="5" Canvas.Left="300" Background="AliceBlue"></TextBox>
            <Label Canvas.Left="420" Canvas.Top="5">$</Label>
        </Canvas>     
    </ControlTemplate>      
</Window.Resources>
<Grid>
    <TabControl>
        <TabItem>
            <Canvas Height="700" Width="850">
                <ListBox x:Name="listBox" Height="700" Width="850">
                    <ListBoxItem Template="{StaticResource template1}"></ListBoxItem>
                    <ListBoxItem Template="{StaticResource template2}"></ListBoxItem>
                </ListBox>
            </Canvas>
        </TabItem>
    </TabControl>
</Grid>