wpf之ListBox中ListBoxItem横向排列

时间:2021-01-21 20:15:03

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

运行效果:

wpf之ListBox中ListBoxItem横向排列

选择“0003#”:

wpf之ListBox中ListBoxItem横向排列

总结:

设置ListBox的属性如下:

  <ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>

则ListBox的ListBoxItem横向排列。