Выравнивание содержимого ListBoxItem

Question

Я пытаюсь выровнять содержимое ListBoxItem. В приведенном ниже примере я хочу выровнять TextBlock по левому краю и Button по правому краю в каждой строке ListBox. Но кнопка всегда следует непосредственно после конца текста 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

Вам понадобится другой тип панели, но вам также нужно, чтобы содержимое растянулось по списку. Вы можете указать его как ControlTemplate для ListBoxItem или использовать DataTemplate и установить растягивание ListBox HorizontalContentAlignment (+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>

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)

Answer 3

Попробуйте использовать другую панель вместо стековой панели. Сетка или док-станция должны хорошо выполнять эту работу.