对齐 ListBoxItem 内容答案

【问题标题】：Aligning ListBoxItem content对齐 ListBoxItem 内容
【发布时间】：2011-04-21 13:51:56
【问题描述】：

我正在尝试对齐ListBoxItem 的内容。在下面的示例中，我想让TextBlock 左对齐，Button 在 ListBox 的每一行中右对齐。但是 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 中需要更改一些内容。我做错了什么？

感谢您的帮助！

【问题讨论】：

只有几分钟，否则我会发布代码，但您可以将项目放在 DockPanel 而不是 StackPanel 中（分别使用 Dock Left 和 Right），然后将 ListBox 上的 HorizontalContentAlignment 设置为 Stretch。
@Dan Bryant：感谢您的指导。 DockPanel 解决方案也可以正常工作。我只注意到我必须定义按钮的固定宽度，否则每个按钮都会从 TextBlock 文本的末尾延伸到 ListBox 的右边框。
为了将来参考，DockPanel 有一个属性 LastChildFill，默认为 True，这会导致您观察到的行为。如果将此属性设置为 false，则最后一个子节点将按照指示停靠。

标签： .net wpf listbox

【解决方案1】：

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

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

【讨论】：

我选择了您最简单的第二种解决方案。 Grid 上的 HorizontalAlignment="Stretch" 甚至没有必要。谢谢！

【解决方案2】：

尝试使用其他面板而不是堆栈面板。网格或停靠应该可以很好地完成这项工作。

【讨论】：

【解决方案3】：

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

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

texblock 和按钮将占据他们需要的位置，中间的网格列将填充剩余的空间，分别将第一列和最后一列“推”到左边和右边网格（此处为 150 像素）

【讨论】：

很好的解决方案，但有一个令人不安的地方：我不想指定网格的固定宽度；它应该随着 ListBox 的宽度拉伸。 Mark Synowiec 回答中的第二个解决方案正是这样做的。但无论如何，谢谢你的帮助！