如何在DataTemplate中将内容右对齐？

Question

我有一个包含 DataTemplate 的列表，其中显示文本和“x”按钮。我想把“X”按钮显示在最右侧，这样它们都出现在同一个位置。我使用的 XML 如下：

<ListBox Name="seiveListBox" ItemsSource="{Binding}" MinWidth="80" Height="120" ScrollViewer.VerticalScrollBarVisibility="Visible" >
                                <ListBox.ItemTemplate>
                                    <DataTemplate>
                                        <StackPanel Orientation="Horizontal">
                                            <TextBlock Text="{Binding}" />
                                            <Button Name="delSeiveFromListBtn" Content="X" ToolTip="Delete" Margin="8, 0, 0, 0" Click="delSeiveFromListBtn_Click"></Button>
                                        </StackPanel>
                                    </DataTemplate>
                                </ListBox.ItemTemplate>
                            </ListBox>

我尝试使用Grid替换StackPanel，但没有成功。

如何设计或对齐列表中每个项目上的"x"到极右边。

- Tvd

---

网格是正确的想法。 网格有2列。 第一列应该有Width =“*”，第二列应该有Width =“Auto”。 还要为ListBox设置HorizontalContentAlignment =“Stretch”。 - EvAlex

Answer 1

以下是我的建议，使用网格布局的方式如下：

<ListBox ItemsSource="{Binding Items}"
          Width="200" HorizontalContentAlignment="Stretch">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <TextBlock Grid.Column="0" Text="{Binding Data}"></TextBlock>
                <Button Grid.Column="1" Content="x"></Button>
            </Grid>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

- Magnus Johansson

---

当我将模板从StackPanel更改为Grid时，我可以正确地看到内容，但无法再看到滚动条。如果我改回StackPanel，则可以看到滚动条。如何处理这个问题？ - Tvd

我有点困惑，哪个ScrollViewer，它放在哪里？ - Magnus Johansson

我不得不增加列表的大小，这样就解决了问题。现在也可以看到滚动条了。非常感谢，Magnus Johhansson。 - Tvd

Answer 2

如果您的项目应该是按钮，则必须指定HorizontalContentAlignment="Stretch"。

这是我用于右侧带有交叉符号的按钮的模板：

    <DataTemplate x:Key="DeletableButtonCommandTemplate">
    <Button Command="{Binding}" Margin="0,1" HorizontalContentAlignment="Stretch">
        <Grid HorizontalAlignment="Stretch">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="18"/>
            </Grid.ColumnDefinitions>
            <TextBlock Text="{Binding Caption}" HorizontalAlignment="Center" Grid.Column="0"></TextBlock>
            <shared:CrossButton Width="12" Height="12" Grid.Column="1"
                                cal:Message.Attach="[Event Click]=[DeleteCommandSource($Datacontext)]"
                                Visibility="{Binding Path=AssociatedObject.Owner, Converter={sharedConv:NotNullToVisibleConverter} }"  />
        </Grid>
    </Button>
</DataTemplate>

- alphanoch