3種圖片加文字的ListBox樣式

xaml文件代碼如下：

<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>

 

---

 

第一種Style的效果：

 

---

第二種Style的效果：

---

 第三種Style的效果

 

---

對應cs文件爲：

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; } } }

---

 

UserInfo.cs文件代碼爲：

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") }; } }