如何右对齐 DataTemplate 中的内容？答案

【问题标题】：How to right-align content in a DataTemplate?如何右对齐 DataTemplate 中的内容？
【发布时间】：2012-06-01 16:47:13
【问题描述】：

我有一个带有显示文本的 DataTemplate 列表和旁边的“x”按钮。我希望“X”btn 显示在最右边，所以它们都出现在同一个地方。我使用的 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>

我尝试在 StackPanel 的地方添加 Grid，但没有成功。

如何设计它或将列表中的“x”对齐到每个项目的最右端。

【问题讨论】：

网格是正确的想法。带有 2 列的网格。首先应该有 Width="*" 和第二个 - Width="Auto"。还为 ListBox 设置 HorizontalContentAlignment="Stretch"

标签： wpf list alignment datatemplate

【解决方案1】：

如果您的项目应该是按钮，那么您必须指定 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>

【讨论】：

【解决方案2】：

这是我的看法，按以下方式使用 Grid：

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

【讨论】：

在将 TEMpalte 从 sTackPanel 更改为 Grid 时，我可以正确看到内容，但再也看不到 scrollveiwer。如果我替换回 StackPanel，那么我可以看到滚动条。如何处理？
我一头雾水，哪个ScrollViewer，放在哪里？
我不得不增加列表的大小，这确实奏效了。现在也可以看到滚动查看器。非常感谢，Magnus Johhansson。