[英]ListBox Item layout in XAML/WPF
I am struggling last days to achieve following layout: 我在最后几天努力实现以下布局:
I have a ListBox with template for each Item: 我有一个列表框,每个项目都有模板:
Main problem in my example is that I can't made middle text (that can be long) to adjust, but not push suffix (red) label while I am resizing ListBox. 我的示例中的主要问题是,我无法调整中间文本(可能很长),但是在调整ListBox的大小时不能按下后缀(红色)标签。
I hope that this layout is possible, and that I am missing something trivial. 我希望这种布局是可能的,并且我缺少一些琐碎的东西。
What's interesting is that 1st example (bellow) work well "outside" listbox. 有趣的是,第一个示例(波纹管)在“外部”列表框内运行良好。 Do I need somehow force realign of listbox while resizing?
我是否需要在调整大小时强制重新调整列表框?
Thanks for any help. 谢谢你的帮助。
I have attached bellow 2 examples I tried (beside many other): 我已附上我尝试过的以下2个示例(除其他示例外):
XAML: XAML:
<Window x:Class="WPF_Experiments.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WPF_Experiments"
mc:Ignorable="d"
Title="MainWindow" Height="400" Width="400">
<Window.Resources>
<DataTemplate x:Key="Template1">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Foreground="Blue" Background="Aqua" Content="{Binding Prefix}" />
<Label Grid.Column="1" Content="{Binding Description}" />
<Label Grid.Column="2" Foreground="Magenta" Background="Beige" Content="{Binding Suffix}" />
</Grid>
</DataTemplate>
<DataTemplate x:Key="Template2">
<DockPanel LastChildFill="True">
<Label Grid.Column="0" Foreground="Blue" Background="Aqua" Content="{Binding Prefix}" />
<Label Grid.Column="2" DockPanel.Dock="Right" Foreground="Magenta" Background="Beige" Content="{Binding Suffix}" />
<TextBlock Grid.Column="1" Text="{Binding Description}" TextTrimming="CharacterEllipsis" />
</DockPanel>
</DataTemplate>
</Window.Resources>
<StackPanel>
<ListBox Name="MyListBox"
ItemTemplate="{DynamicResource Template2}"/>
</StackPanel>
</Window>
C#: C#:
namespace WPF_Experiments
{
class Item
{
public string Prefix { get; set; }
public string Description { get; set; }
public string Suffix { get; set; }
}
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
List<Item> items = new List<Item>();
items.Add(new Item() { Prefix = "001", Description = "Item 0", Suffix = "cm" });
items.Add(new Item() { Prefix = "002", Description = "This is very long item that maybe will not fit", Suffix = "in" });
items.Add(new Item() { Prefix = "003", Description = "Item 2", Suffix = "m" });
MyListBox.ItemsSource = items;
}
}
}
(Edit) One more try with StackPanel: (编辑)尝试使用StackPanel:
<DataTemplate x:Key="Template3">
<StackPanel Orientation="Horizontal">
<Label Foreground="Blue" Background="Aqua" Content="{Binding Prefix}" />
<TextBlock Text="{Binding Description}" TextTrimming="CharacterEllipsis" />
<Label Foreground="Magenta" Background="Beige" Content="{Binding Suffix}" HorizontalAlignment="Right" />
</StackPanel>
</DataTemplate>
You can achieve this by disabling horizontal scrolling for ListBox
: 您可以通过禁用
ListBox
水平滚动来实现:
<ListBox Name="MyListBox" ScrollViewer.HorizontalScrollBarVisibility="Disabled"
ItemTemplate="{DynamicResource Template2}"/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.