Question

我正在尝试调整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需要改变一些东西。我做错了什么？

感谢您的帮助！

Answer 1

您需要一个不同的面板类型，但您还需要让内容在ListBox中延伸。你可以将它指定为ListBoxItem的ControlTemplate，或者使用DataTemplate并设置ListBox HorizontalContentAlignment来拉伸（在问题的评论中+1给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>

Answer 2

尝试使用其他面板而不是堆叠面板。网格或底座应该可以很好地完成工作。

Answer 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和按钮将只占用他们需要的位置，中间的网格列将填充剩余的空间，分别在左侧和右侧“推”出第一列和最后一列，由网格（这里是150px）

对齐ListBoxItem内容

3 个答案: