3种图片加文字的ListBox样式

<Window x:Class="WpfApplication1.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="660">
<Grid>
<Grid.Resources>
<Style x:Key="styledItems" 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>

<Border Margin="4,0" Grid.Column="2" BorderThickness="2" CornerRadius="4">
<Border.BorderBrush>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="#aaa" Offset="0" />
<GradientStop Color="#222" Offset="1" />
</LinearGradientBrush>
</Border.BorderBrush>

<Grid>
<Rectangle>
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="#444" Offset="0" />
<GradientStop Color="#fff" Offset="1" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Image Width="48" Margin="2,2,2,1"  Source="{Binding ImagePath}" />
</Grid>
</Border>

<TextBlock FontSize="16" VerticalAlignment="Center" Margin="5" FontStyle="Italic">User:</TextBlock>
<TextBlock FontSize="16" VerticalAlignment="Center" Margin="5" Text="{Binding Name}" FontWeight="Bold" Grid.Column="1" />
</Grid>
</DataTemplate>
</Setter.Value>
</Setter>

<Setter Property="Grid.IsSharedSizeScope" Value="True" />
</Style>

<Style x:Key="styledList1" TargetType="{x:Type ListBox}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBox}">
<Border
Background="{TemplateBinding Panel.Background}"
BorderBrush="{TemplateBinding Border.BorderBrush}"
BorderThickness="{TemplateBinding Border.BorderThickness}">
<ScrollViewer HorizontalScrollBarVisibility="Auto">
<StackPanel x:Name="StackPanel1" IsItemsHost="True"
Orientation="Horizontal"/>
</ScrollViewer>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="60" />
<RowDefinition Height="30" />
</Grid.RowDefinitions>
<Border Margin="4,0" Grid.Column="0" BorderThickness="2" CornerRadius="4"
HorizontalAlignment="Center">
<Border.BorderBrush>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="#aaa" Offset="0" />
<GradientStop Color="#222" Offset="1" />
</LinearGradientBrush>
</Border.BorderBrush>

<Grid>
<Rectangle>
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="#444" Offset="0" />
<GradientStop Color="#fff" Offset="1" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Image Width="48" Margin="2,2,2,1"  Source="{Binding ImagePath}" />
</Grid>
</Border>

<TextBlock Grid.Row="1" FontSize="14" HorizontalAlignment="Center"
Margin="5" Text="{Binding Name}" FontWeight="Bold"/>
</Grid>
</DataTemplate>
</Setter.Value>
</Setter>

<Setter Property="Grid.IsSharedSizeScope" Value="True" />
</Style>

<Style x:Key="styledList2" TargetType="{x:Type ListBox}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBox}">
<Border
Background="{TemplateBinding Panel.Background}"
BorderBrush="{TemplateBinding Border.BorderBrush}"
BorderThickness="{TemplateBinding Border.BorderThickness}">
<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled">
<WrapPanel IsItemsHost="True" />
</ScrollViewer>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition  Width="140"  />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition  Height="60" />
<RowDefinition  Height="30" />
</Grid.RowDefinitions>

<Border Margin="4,0" Grid.Column="0" BorderThickness="2" CornerRadius="4"
HorizontalAlignment="Center">
<Border.BorderBrush>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="#aaa" Offset="0" />
<GradientStop Color="#222" Offset="1" />
</LinearGradientBrush>
</Border.BorderBrush>

<Grid>
<Rectangle>
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="#444" Offset="0" />
<GradientStop Color="#fff" Offset="1" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Image Width="48" Margin="2,2,2,1"  Source="{Binding ImagePath}" />
</Grid>
</Border>

<TextBlock Grid.Row="1" FontSize="14" HorizontalAlignment="Center"
Margin="5" Text="{Binding Name}" />
</Grid>
</DataTemplate>
</Setter.Value>
</Setter>

<Setter Property="Grid.IsSharedSizeScope" Value="True" />
</Style>

</Grid.Resources>
<ListBox ItemsSource="{Binding}" Style="{StaticResource styledItems}" Margin="27,22,40,13" Name="listBox1">
</ListBox>
</Grid>
</Window>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using ListBoxStyling;

namespace WpfApplication1
{
/// <summary>
/// Window1.xaml的代码
/// </summary>
public partial class Window1 : Window
{
public Window1()
{
InitializeComponent();

DataContext = UserInfo.Users;
}
}
}

using System;
using System.Collections.Generic;
using System.Text;
using System.Windows.Media;

namespace ListBoxStyling
{
public class UserInfo
{
private string nameVal;

public string Name
{
get { return nameVal; }
set { nameVal = value; }
}

private string imagePathVal;

public string ImagePath
{
get { return imagePathVal; }
set { imagePathVal = value; }
}

public override string ToString()
{
return Name;
}

public UserInfo(string name, string imagePath)
{
this.nameVal = name;
this.imagePathVal = imagePath;
}

public static UserInfo[] Users =
{
new UserInfo("Arthur Alfredsen", "Images/airplane.bmp"),
new UserInfo("Brenda Barret", "Images/astro.bmp"),
new UserInfo("Carl Christiansen", "Images/beach.bmp"),
new UserInfo("Delia Davis", "Images/butterfl.bmp"),
new UserInfo("Egbert Evesham", "Images/car.bmp"),
new UserInfo("Fenella Ferguson", "Images/cat.bmp"),
new UserInfo("Graham Garden", "Images/chess.bmp"),
new UserInfo("Hilary Humperdinck", "Images/dirtbike.bmp"),
new UserInfo("Ian Ingernook", "Images/dog.bmp"),
new UserInfo("Joan Jackson", "Images/drip.bmp"),
new UserInfo("Kevin Kostco", "Images/duck.bmp"),
new UserInfo("Leah Limbert", "Images/fish.bmp"),
new UserInfo("Marvin Masterson", "Images/frog.bmp"),
new UserInfo("Nellie Norbert", "Images/guitar.bmp"),
new UserInfo("Ollie Ogilvy", "Images/horses.bmp"),
new UserInfo("Priscilla Peters", "Images/kick.bmp"),
new UserInfo("Quentin Quasires", "Images/liftoff.bmp"),
new UserInfo("Roberta Roberts", "Images/palmtree.bmp"),
new UserInfo("Steve Stuart", "Images/pnkflowr.bmp"),
new UserInfo("Teri Tobeson", "Images/redflowr.bmp"),
new UserInfo("Ulysses Uhura", "Images/skater.bmp"),
new UserInfo("Val Vignette", "Images/snwflake.bmp"),
new UserInfo("William Watson", "Images/drip.bmp"),
new UserInfo("Xanthe Xardos", "Images/user.bmp"),
new UserInfo("Ybrahim Yavin", "Images/guest.bmp"),
new UserInfo("Zaphod Zacharzewski", "images/soccer.bmp")
};
}
}