wpf之ListBox中ListBoxItem横向排列

ListBox中ListBoxItem默认是纵向排列，可以通过自定义样式，让其横向排列，

如下Demo：

 

XAML:

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

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横向排列。