WPF自定义ListBox样式 

 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     }

 

posted @ 2016-08-26 17:03  扫地僧2015  阅读(2949)  评论(0)  编辑  收藏  举报