如何将多个数据模板设置为列表框

时间:2014-06-16 07:52:03

标签: wpf templates listbox listbox-control

我制作了2个数据模板并将其作为资源使用,我将它应用到列表框中,我只能在列表框中应用单个数据模板,这里是两个数据模板的代码

  <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>

和listbox的代码

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

我如何将这两个数据模板应用到列表框中,目前只有&#34; template1&#34;正在应用,怎么可以&#34; template2&#34;应用或者如果将来有很多数据模板,有什么方法??,thanx

2 个答案:

答案 0 :(得分:2)

您是否尝试过ItemsControl.ItemTemplateSelector Property ItemTemplateSelector

下面我有一个非常简单的学生列表与ListBox绑定的示例,对于标记少于50%的学生,我有Template2,而其他人则选择了Template1

查看

<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;
    }
}

我希望这会给你一个想法。

答案 1 :(得分:1)

您可以使用DataTemplateSelector和Datatrigger使用多个DataTemplates,但是您没有解释任何条件(选定项目,未选择项目,索引,更改前景和字体大小等)。

似乎您只需要模板用于显示目的/ UI目的,然后您需要为每个listboxitem更改模板,如下所示

<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>