wpf之ListBox中ListBoxItem横向排列
ListBox中ListBoxItem默认是纵向排列，可以通过⾃定义样式，让其横向排列，
如下Demo：
XAML:
<Window x:Class="ListBoxItemStyleDemo.MainWindow"
xmlns="schemas.microsoft/winfx/2006/xaml/presentation"
xmlns:x="schemas.microsoft/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.For
eground="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>
View Code
C#:
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));
}
}
}
htmlborder
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");
}
}
}
View Code
运⾏效果：
选择“0003#”：
总结：
设置ListBox的属性如下：
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
则ListBox的ListBoxItem横向排列。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。