Question

我有一个带有DataTemplate的List，它显示文本，旁边有一个“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 inpalce，但没有成功。

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

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>

Answer 2

如果您的项目应该是按钮，那么您必须指定HorizontalContentAlignment =＆＃34; Stretch＆＃34;。这是我用于右侧有十字的按钮的模板：

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

如何在DataTemplate中右对齐内容？

2 个答案: