<!--竖向-->
<Style x:Key="ListBoxStyle1" TargetType="{x:Type ListBox}">
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*" SharedSizeGroup="MiddleCoiumn"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="60"/>
</Grid.RowDefinitions>
<TextBlock FontSize="16" VerticalAlignment="Center" Margin="5" FontStyle="Italic" Grid.Column="0" Text="Country:"/>
<TextBlock FontSize="16" VerticalAlignment="Center" Margin="5" Grid.Column="1" Text="{Binding Name}" FontWeight="Bold"/>
<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="1" 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>
<!--横向-->
<Style x:Key="ListBoxStyle2" TargetType="{x:Type ListBox}" BasedOn="{StaticResource ListBoxStyle1}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBox}">
<ScrollViewer HorizontalScrollBarVisibility="Auto">
<StackPanel Name="StackPanel1" IsItemsHost="True" Orientation="Horizontal"/>
</ScrollViewer>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="VerticalAlignment" Value="Center"></Setter>
</Style>
<!--平铺-->
<Style x:Key="ListBoxStyle3" TargetType="{x:Type ListBox}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBox}">
<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled">
<WrapPanel IsItemsHost="True"/>
</ScrollViewer>
</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>
<Image Grid.Row="0" Width="48" Margin="2,2,2,1" Source="{Binding ImagePath}"/>
<TextBlock Grid.Row="1" FontSize="14" HorizontalAlignment="Center" Margin="5" Text="{Binding Name}"/>
</Grid>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
应用
<Grid >
<ListBox ItemsSource="{Binding}" Margin="10" Style="{StaticResource ListBoxStyle3}"></ListBox>
</Grid>
数据支持：
public partial class 数据模板 : Window
{
public 数据模板()
{
InitializeComponent();
this.DataContext = Countries.GetCountry();
}
}
public class Country
{
public string Name { get; set; }
public string ImagePath { get; set; }
public override string ToString()
{
return Name;
}
}
public class Countries
{
public static IEnumerable<Country> GetCountry()
{
return new List<Country> {
new Country { Name = "Austria1",ImagePath = "1.jpg"},
new Country { Name = "Austria2",ImagePath = "1.jpg"},
new Country { Name = "Austria3",ImagePath = "1.jpg"},
new Country { Name = "Austria4",ImagePath = "1.jpg"},
};
}
}