列表项模版

　　列表框元素包含ListBoxItem。使用ItemTemplate可以定义列表项的内容。 样式listBoxStyle定义了一个ItemTemplate,其值为DataTemplate。DataTemplate用于数据绑定到元素上。Binding标记扩展可以用于DataTemplate元素。

　　DataTemplate包含一个带三列的栅格。第一列包含字符串"车名:", 第二列绑定Name就是车的名字,第三列绑定图像。

　　

<Window x:Class="样式模版和资源.列表项模版"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="名车列表" Height="600" Width="300" WindowStartupLocation="CenterScreen">
    <Grid>
        <Grid.Resources>
        <Style x:Key="ListBoxStyle" TargetType="{x:Type ListBox}">
            <Setter Property="ItemTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="*" SharedSizeGroup="MiddleColumn"/>
                                <ColumnDefinition Width="Auto"/>
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="60"/>
                            </Grid.RowDefinitions>                            
                            <TextBlock FontSize="16" VerticalAlignment="Center" Margin="5" FontStyle="Italic" Grid.Column="0">车名:</TextBlock>
                            <TextBlock FontSize="16" VerticalAlignment="Center" Margin="5" Text="{Binding Name}" FontWeight="Bold" Grid.Column="1"/>
                            <Border Margin="4,0" Grid.Column="2" BorderThickness="2" CornerRadius="4">
                                <Border.BorderBrush>
                                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                        <GradientStop Offset="0" Color="#aaa"/>
                                        <GradientStop Offset="1" Color="#222"/>
                                    </LinearGradientBrush>
                                </Border.BorderBrush>
                                <Grid>
                                    <Rectangle>
                                        <Rectangle.Fill>
                                            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                                <GradientStop Offset="0" Color="#444"/>
                                                <GradientStop Offset="0" Color="#fff"/>
                                            </LinearGradientBrush>
                                        </Rectangle.Fill>
                                    </Rectangle>
                                    <Image Width="48" Margin="2,2,2,1" Source="{Binding ImagePath}"/>
                                </Grid>
                            </Border>
                        </Grid>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="Grid.IsSharedSizeScope" Value="True"/>
            </Style>
     </Grid.Resources>
        <Rectangle>
            <Rectangle.Fill>
                <ImageBrush ImageSource="Resources/马.jpg"/>
            </Rectangle.Fill>
        </Rectangle>
        <ListBox Name="countryList1" ItemsSource="{Binding}" Style="{StaticResource ListBoxStyle}" Margin="10,60,10,20"  Opacity="100" />
    </Grid>
</Window>

后台代码定义一个车的类, 有车名和路径名称的属性

 class Car
    {
    
        public Car(string name, string imagePath)
        {
            this.Name = name;
            this.ImagePath = imagePath;
        }

        public string Name { get; set; }
        public string ImagePath { get; set; }
        public override string ToString()
        {
            return Name;
        }
    }

定义一个静态类,插入车名和路径名,并返回数组

 public static class Cars
    {
        internal static Car[] GetCountries()
        {
            List<Car> countries = new List<Car>();
            countries.Add(new Car("奥迪", "Resources/奥迪.png"));
            countries.Add(new Car("宝马", "Resources/宝马.png"));
            countries.Add(new Car("保时捷", "Resources/保时捷.png"));
            countries.Add(new Car("奔驰", "Resources/奔驰.png"));
            countries.Add(new Car("本田", "Resources/本田.png"));
            countries.Add(new Car("宾利", "Resources/宾利.png"));
            countries.Add(new Car("大众", "Resources/大众.png"));
            countries.Add(new Car("法拉利", "Resources/法拉利.png"));
            countries.Add(new Car("福特", "Resources/福特.png"));
            countries.Add(new Car("悍马", "Resources/悍马.png"));
            countries.Add(new Car("凯迪拉克", "Resources/凯迪拉克.png"));
            countries.Add(new Car("兰博基尼", "Resources/兰博基尼.png"));
            countries.Add(new Car("雷克萨斯", "Resources/雷克萨斯.png"));
            countries.Add(new Car("路虎", "Resources/路虎.png"));
            countries.Add(new Car("玛莎拉蒂", "Resources/玛莎拉蒂.png"));
            countries.Add(new Car("日产", "Resources/日产.png"));
            countries.Add(new Car("沃尔沃", "Resources/沃尔沃.png"));
            countries.Add(new Car("一汽", "Resources/一汽.png"));
            countries.Add(new Car("英菲尼迪", "Resources/英菲尼迪.png"));
            return countries.ToArray();
        }
    }

在列表项模版后台绑定

  public 列表项模版()
  {
        InitializeComponent();
        this.DataContext = Cars.GetCountries();
   }

最后呈现效果如下: