1 <!--竖向--> 2 <Style x:Key="ListBoxStyle1" TargetType="{x:Type ListBox}"> 3 <Setter Property="ItemTemplate"> 4 <Setter.Value> 5 <DataTemplate> 6 <Grid> 7 <Grid.ColumnDefinitions> 8 <ColumnDefinition Width="Auto"/> 9 <ColumnDefinition Width="*" SharedSizeGroup="MiddleCoiumn"/> 10 <ColumnDefinition Width="Auto"/> 11 </Grid.ColumnDefinitions> 12 <Grid.RowDefinitions> 13 <RowDefinition Height="60"/> 14 </Grid.RowDefinitions> 15 <TextBlock FontSize="16" VerticalAlignment="Center" Margin="5" FontStyle="Italic" Grid.Column="0" Text="Country:"/> 16 <TextBlock FontSize="16" VerticalAlignment="Center" Margin="5" Grid.Column="1" Text="{Binding Name}" FontWeight="Bold"/> 17 <Border Margin="4,0" Grid.Column="2" BorderThickness="2" CornerRadius="4"> 18 <Border.BorderBrush> 19 <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> 20 <GradientStop Offset="0" Color="#aaa"/> 21 <GradientStop Offset="1" Color="#222"/> 22 </LinearGradientBrush> 23 </Border.BorderBrush> 24 <Grid> 25 <Rectangle> 26 <Rectangle.Fill> 27 <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> 28 <GradientStop Offset="0" Color="#444"/> 29 <GradientStop Offset="1" Color="#fff"/> 30 </LinearGradientBrush> 31 </Rectangle.Fill> 32 </Rectangle> 33 <Image Width="48" Margin="2,2,2,1" Source="{Binding ImagePath}"/> 34 </Grid> 35 </Border> 36 </Grid> 37 </DataTemplate> 38 </Setter.Value> 39 </Setter> 40 <Setter Property="Grid.IsSharedSizeScope" Value="True"/> 41 </Style> 42 <!--横向--> 43 <Style x:Key="ListBoxStyle2" TargetType="{x:Type ListBox}" BasedOn="{StaticResource ListBoxStyle1}"> 44 <Setter Property="Template"> 45 <Setter.Value> 46 <ControlTemplate TargetType="{x:Type ListBox}"> 47 <ScrollViewer HorizontalScrollBarVisibility="Auto"> 48 <StackPanel Name="StackPanel1" IsItemsHost="True" Orientation="Horizontal"/> 49 </ScrollViewer> 50 </ControlTemplate> 51 </Setter.Value> 52 </Setter> 53 <Setter Property="VerticalAlignment" Value="Center"></Setter> 54 </Style> 55 <!--平铺--> 56 <Style x:Key="ListBoxStyle3" TargetType="{x:Type ListBox}"> 57 <Setter Property="Template"> 58 <Setter.Value> 59 <ControlTemplate TargetType="{x:Type ListBox}"> 60 <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled"> 61 <WrapPanel IsItemsHost="True"/> 62 </ScrollViewer> 63 </ControlTemplate> 64 </Setter.Value> 65 </Setter> 66 <Setter Property="ItemTemplate"> 67 <Setter.Value> 68 <DataTemplate> 69 <Grid> 70 <Grid.ColumnDefinitions> 71 <ColumnDefinition Width="140"/> 72 </Grid.ColumnDefinitions> 73 <Grid.RowDefinitions> 74 <RowDefinition Height="60"/> 75 <RowDefinition Height="30"/> 76 </Grid.RowDefinitions> 77 <Image Grid.Row="0" Width="48" Margin="2,2,2,1" Source="{Binding ImagePath}"/> 78 <TextBlock Grid.Row="1" FontSize="14" HorizontalAlignment="Center" Margin="5" Text="{Binding Name}"/> 79 </Grid> 80 </DataTemplate> 81 </Setter.Value> 82 </Setter> 83 </Style>
应用
<Grid >
<ListBox ItemsSource="{Binding}" Margin="10" Style="{StaticResource ListBoxStyle3}"></ListBox>
</Grid>
数据支持:
1 public partial class 数据模板 : Window 2 { 3 public 数据模板() 4 { 5 InitializeComponent(); 6 this.DataContext = Countries.GetCountry(); 7 } 8 9 10 } 11 public class Country 12 { 13 public string Name { get; set; } 14 public string ImagePath { get; set; } 15 16 public override string ToString() 17 { 18 return Name; 19 } 20 } 21 22 23 public class Countries 24 { 25 public static IEnumerable<Country> GetCountry() 26 { 27 return new List<Country> { 28 new Country { Name = "Austria1",ImagePath = "1.jpg"}, 29 new Country { Name = "Austria2",ImagePath = "1.jpg"}, 30 new Country { Name = "Austria3",ImagePath = "1.jpg"}, 31 new Country { Name = "Austria4",ImagePath = "1.jpg"}, 32 33 }; 34 } 35 }