c# - XAML/WPF 中的列表框项目布局

Question

我最近几天正在努力实现以下布局:

我有一个带有每个项目模板的列表框:

• 标签始终锚定在左侧
• 标签始终锚定在右侧
• 中间的标签(TextBlock)，大小灵活
• 下面的第三个标签，到目前为止这是最容易设置的:)

我的示例中的主要问题是我无法调整中间文本(可能很长)，但在调整 ListBox 大小时无法推送后缀(红色)标签。

我希望这种布局是可能的，并且我遗漏了一些微不足道的东西。

有趣的是，第一个示例(如下)在“外部”列表框中运行良好。调整大小时是否需要以某种方式强制重新对齐列表框？

感谢您的帮助。

我附上了以下 2 个我尝试过的例子(除了许多其他例子):

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

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

(编辑)再试一次 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>

Answer 1

您可以通过禁用 ListBox 的水平滚动来实现此目的:

<ListBox Name="MyListBox" ScrollViewer.HorizontalScrollBarVisibility="Disabled"
         ItemTemplate="{DynamicResource Template2}"/>