ListBoxItem内容对齐

Question

我正在尝试对ListBoxItem的内容进行对齐。 在下面的示例中，我想要在每一行的ListBox中将TextBlock左对齐和Button右对齐。 但是，按钮总是直接跟随TextBlock的文本结尾，没有在ListBox中右对齐。

<StackPanel>
    <ListBox ItemsSource="{Binding MyDataList}">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="{Binding SomeTextProperty}" 
                        VerticalAlignment="Center" Margin="5" />
                    <Button Content="Display" 
                        HorizontalAlignment="Right" Margin="5"
                        Command="{Binding SomeCommand}"
                        CommandParameter="{Binding}"/>
                </StackPanel>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
</StackPanel>

我想我的XAML需要做出一些改变，不知道哪里出了问题？

谢谢您的帮助！

- Slauma

---

只有几分钟时间，否则我会发布代码，但您可以将项目放入DockPanel而不是StackPanel中（分别使用Dock Left和Right），然后将ListBox上的HorizontalContentAlignment设置为Stretch。 - Dan Bryant

@Dan Bryant：感谢您的指导。DockPanel解决方案也很好用。我只注意到我必须定义一个固定的按钮宽度，否则每个按钮都会从TextBlock文本的末尾延伸到ListBox的右边框。 - Slauma

未来参考，DockPanel 有一个属性 LastChildFill，默认为 True，这会导致您观察到的行为。如果将此属性设置为 false，则最后一个子元素将按指示停靠。 - Dan Bryant

Answer 1

您需要不同的面板类型，但您还需要让内容跨越 ListBox。 您可以将其指定为 ListBoxItem 的 ControlTemplate，也可以使用 DataTemplate 并将 ListBox HorizontalContentAlignment 设置为 stretch（在问题下的 Dan Bryant 的评论中指出此点）。

<ListBox>
    <ListBox.Resources>
        <Style TargetType="ListBoxItem">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate>
                        <Grid>
                            <TextBlock Text="{Binding SomeTextProperty}" VerticalAlignment="Center" Margin="5"/>
                            <Button Content="Display" HorizontalAlignment="Right" Margin="5"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </ListBox.Resources>
</ListBox>

或者

        <ListBox HorizontalContentAlignment="Stretch">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Grid HorizontalAlignment="Stretch">
                        <TextBlock Text="{Binding SomeTextProperty}" VerticalAlignment="Center" Margin="5"/>
                        <Button Content="Display" HorizontalAlignment="Right" Margin="5"/>
                    </Grid>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

- Mark Synowiec

---

我选择了你的第二个解决方案，它是最简单的。Grid上的HorizontalAlignment="Stretch"甚至都不必要。谢谢! - Slauma

Answer 2

只需将您的网格宽度替换为任何值：

<ListBox ItemsSource="{Binding MyDataList}">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Grid Width="150">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="auto"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="auto"/>
                </Grid.ColumnDefinitions>
                <TextBlock Grid.Column="0" 
                           Text="{Binding BusinessProperty}"                          
                           VerticalAlignment="Center" 
                           Margin="5" />
                <Button Grid.Column="1" 
                        Content="Display"                          
                        HorizontalAlignment="Right" Margin="5"                         Command="{Binding SomeCommand}"                         CommandParameter="{Binding}"/>
           </Grid>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

文本块和按钮将占据它们所需的位置，中间网格列将填充其余空间，在网格提供的空间（这里为150px）中向左和向右“推动”第一列和最后一列。

- Bruno

---

好的解决方案，但有一个令人不安的问题：我不想指定网格的固定宽度；它应该随着 ListBox 的宽度而伸展。Mark Synowiec 的答案中的第二个解决方案正好做到了这一点。无论如何，感谢您的帮助！ - Slauma

Answer 3

尝试使用其他面板而不是StackPanel。Grid或Dock应该可以很好地完成工作。

- Tom Ceuppens