ListBox中ListBoxItem默认是纵向排列,可以通过自定义样式,让其横向排列,
如下Demo:
XAML:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<Window x:Class="ListBoxItemStyleDemo.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" DataContext="{Binding RelativeSource={RelativeSource Self}}" Loaded="Window_Loaded"> <Window.Background> <ImageBrush ImageSource="/ListBoxItemStyleDemo;component/Resources/background.jpg" /> </Window.Background> <Window.Resources> <Style TargetType="{x:Type ListBoxItem}" x:Key="ListBoxItemStyle1"> <Setter Property="OverridesDefaultStyle" Value="True" /> <Setter Property="SnapsToDevicePixels" Value="True" /> <Setter Property="BorderBrush" Value="{x:Null}" /> <Setter Property="Foreground" Value="White" /> <Setter Property="Width" Value="150" /> <Setter Property="FontSize" Value="20" /> <Setter Property="HorizontalContentAlignment" Value="Center" /> <Setter Property="VerticalContentAlignment" Value="Center" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type ListBoxItem}"> <Border x:Name="border" CornerRadius="8" Margin="2"> <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" /> </Border> <ControlTemplate.Triggers> <Trigger Property="IsSelected" Value="True"> <Setter TargetName="border" Property="Background"> <Setter.Value> <LinearGradientBrush EndPoint="0,1" StartPoint="0,0"> <GradientStop Color="#FF6B6B6B" Offset="0.5"/> <GradientStop Color="#FF535353" Offset="0.5"/> <GradientStop Color="#FF535353" Offset="0.022"/> <GradientStop Color="#FF555555" Offset="0.991"/> </LinearGradientBrush> </Setter.Value> </Setter> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style> </Window.Resources> <Grid> <DockPanel> <Border DockPanel.Dock="Top" BorderBrush="White" BorderThickness="0,3" Height="50" Margin="0,8" Padding="10,0"> <Border.Background> <LinearGradientBrush EndPoint="0,1" StartPoint="0,0"> <GradientStop Color="#FF6EADD4" Offset="0.013"/> <GradientStop Color="#FF6FB6E4" Offset="0.5"/> <GradientStop Color="#FF64A6D0" Offset="0.53"/> <GradientStop Color="#FF5E97BA" Offset="1"/> </LinearGradientBrush> </Border.Background> <Grid> <Grid.RowDefinitions> <RowDefinition Height="30*" /> <RowDefinition Height="14*" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition /> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions> <ListBox x:Name="lstEnt" Margin="0,-8" BorderBrush="{x:Null}" Background="{x:Null}" ItemContainerStyle="{StaticResource ResourceKey=ListBoxItemStyle1}" ItemsSource="{Binding Path=Terminal.Entities}" SelectedItem="{Binding Path=SelectedEntity}" DisplayMemberPath="Name" DataContext="{Binding}" Grid.RowSpan="2"> <ListBox.ItemsPanel> <ItemsPanelTemplate> <StackPanel Orientation="Horizontal" /> </ItemsPanelTemplate> </ListBox.ItemsPanel> </ListBox> <StackPanel Grid.Column="1" Orientation="Horizontal" VerticalAlignment="Center" TextElement.Foreground="White" TextElement.FontSize="24" Margin="0,5,0,7" Grid.RowSpan="2"> <TextBlock x:Name="txtTitle" Text="秋刀鱼汽车厂"/> <TextBlock Text="{Binding Path=TerminalName}" /> </StackPanel> </Grid> </Border> <Grid DockPanel.Dock="Top" Margin="10,2" TextElement.FontSize="16"> <StackPanel Orientation="Horizontal" HorizontalAlignment="Left"> <TextBlock Text="{Binding Path=ProductionDay, StringFormat=yyyy-MM-dd}"/> <TextBlock x:Name="shiftTxt" Text="{Binding Path=ShiftName}" Margin="10,0,0,0" /> </StackPanel> </Grid> <Grid DockPanel.Dock="Top"> <ListBox x:Name="ProcessTankListBox" BorderBrush="{x:Null}" Background="#FF518CB1" ItemContainerStyle="{StaticResource ResourceKey=ListBoxItemStyle1}" ItemsSource="{Binding Path=Cars}" SelectedItem="{Binding Path=SelectedCar}" DisplayMemberPath="CarNo" DataContext="{Binding}" Grid.RowSpan="2" > <ListBox.ItemsPanel> <ItemsPanelTemplate> <StackPanel Orientation="Horizontal" /> </ItemsPanelTemplate> </ListBox.ItemsPanel> </ListBox> </Grid> <Border x:Name="border" DockPanel.Dock="Top" Padding="10,5" Margin="5" BorderThickness="1,30,1,3" CornerRadius="10" BorderBrush="#FF518CB1" DataContext="{Binding Path=SelectedTank}"> <Border.Background> <SolidColorBrush Color="#99FFFFFF" Opacity="100" /> </Border.Background> <Grid DataContext="{Binding Path=DataContext.SelectedCar, RelativeSource={RelativeSource FindAncestor, AncestorType=Window, AncestorLevel=1}}" TextElement.FontSize="16" TextElement.Foreground="#FF063958"> <Grid.ColumnDefinitions> <ColumnDefinition Width="90" /> <ColumnDefinition /> <ColumnDefinition Width="8" /> <ColumnDefinition Width="80" /> <ColumnDefinition /> <ColumnDefinition Width="8" /> <ColumnDefinition Width="90" /> <ColumnDefinition /> <ColumnDefinition Width="8" /> <ColumnDefinition Width="80" /> <ColumnDefinition /> <!--<ColumnDefinition />--> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition /> <RowDefinition Height="4" /> <RowDefinition /> <RowDefinition Height="2" /> <RowDefinition /> <RowDefinition Height="20" /> <RowDefinition /> <RowDefinition /> <RowDefinition /> <RowDefinition /> </Grid.RowDefinitions> <TextBlock Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="11" FontSize="18" Text="汽车基础信息" Margin="0,-32,0,0" VerticalAlignment="Top" HorizontalAlignment="Center" Foreground="White" > </TextBlock> <TextBlock Grid.Row="2" Grid.Column="0" Text="工单号:" /> <TextBlock Grid.Row="2" Grid.Column="3" Text="品牌:" /> <TextBlock Grid.Row="2" Grid.Column="6" Text="流水号:" /> <TextBlock Grid.Row="2" Grid.Column="9" Text="客户代码:" /> <TextBlock Grid.Row="2" Grid.Column="1" Text="{Binding Path=WorkOrder}" /> <TextBlock Grid.Row="2" Grid.Column="4" Text="{Binding Path=CarName}" /> <TextBlock Grid.Row="2" Grid.Column="7" Text="{Binding Path=CarNo}" /> <TextBlock Grid.Row="2" Grid.Column="10" Text="{Binding Path=Customer}" /> </Grid> </Border> </DockPanel> </Grid> </Window>
C#:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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 System.Collections.ObjectModel; using System.ComponentModel; namespace ListBoxItemStyleDemo { /// <summary> /// MainWindow.xaml 的交互逻辑(横着放ListBoxItem) /// </summary> public partial class MainWindow : Window,INotifyPropertyChanged { private string terminalName; /// <summary> /// 机台(站点) /// </summary> public string TerminalName { get { return terminalName; } set { terminalName = value; OnPropertyChanged("TerminalName"); } } private DateTime productionDay; /// <summary> /// 工作日 /// </summary> public DateTime ProductionDay { get { return productionDay; } set { productionDay = value; OnPropertyChanged("ProductionDay"); } } private string shiftName; /// <summary> /// 班次 /// </summary> public string ShiftName { get { return shiftName; } set { shiftName = value; } } private ObservableCollection<Car> cars; /// <summary> /// 汽车集合 /// </summary> public ObservableCollection<Car> Cars { get { if (cars==null) { cars = new ObservableCollection<Car>(); } return cars; } } private Car selectedCar; /// <summary> /// 选中的汽车 /// </summary> public Car SelectedCar { get { return selectedCar; } set { selectedCar = value; OnPropertyChanged("SelectedCar"); } } public MainWindow() { InitializeComponent(); } private void Window_Loaded(object sender, RoutedEventArgs e) { this.TerminalName = "24#站点"; this.ProductionDay = DateTime.Now; this.ShiftName = "早班"; this.Cars.Add(new Car { CarNo = "0001#", CarName = "秋刀鱼牌汽车", WorkOrder = "20160402A", Customer = "TYDF86" }); this.Cars.Add(new Car { CarNo = "0002#", CarName = "武昌鱼牌汽车", WorkOrder = "20160402A", Customer = "SEDF75" }); this.Cars.Add(new Car { CarNo = "0003#", CarName = "金枪鱼牌汽车", WorkOrder = "20160403A", Customer = "CKDF34" }); this.Cars.Add(new Car { CarNo = "0004#", CarName = "沙丁鱼牌汽车", WorkOrder = "20160404A", Customer = "RSDF21" }); this.Cars.Add(new Car { CarNo = "0005#", CarName = "三文鱼牌汽车", WorkOrder = "20160405A", Customer = "YRDF56" }); } public event PropertyChangedEventHandler PropertyChanged; public void OnPropertyChanged(string propertyName) { if (this.PropertyChanged!=null) { this.PropertyChanged.Invoke(this, new PropertyChangedEventArgs(propertyName)); } } } public class Car:INotifyPropertyChanged { public event PropertyChangedEventHandler PropertyChanged; public void OnPropertyChanged(string propertyName) { if (this.PropertyChanged != null) { this.PropertyChanged.Invoke(this, new PropertyChangedEventArgs(propertyName)); } } private string workOrder; /// <summary> /// 工单号 /// </summary> public string WorkOrder { get { return workOrder; } set { workOrder = value; OnPropertyChanged("WorkOrder"); } } private string carNo; /// <summary> /// CarNo /// </summary> public string CarNo { get { return carNo; } set { carNo = value; OnPropertyChanged("CarNo"); } } private string carName; /// <summary> /// 品牌 /// </summary> public string CarName { get { return carName; } set { carName = value; OnPropertyChanged("CarName"); } } private string customer; /// <summary> /// 客户代码 /// </summary> public string Customer { get { return customer; } set { customer = value; OnPropertyChanged("Customer"); } } } }
运行效果:
选择“0003#”:
总结:
设置ListBox的属性如下:
<ListBox.ItemsPanel> <ItemsPanelTemplate> <StackPanel Orientation="Horizontal" /> </ItemsPanelTemplate> </ListBox.ItemsPanel>
则ListBox的ListBoxItem横向排列。