Làm cách nào để căn chỉnh nội dung trong DataTemplate?

Question

Tôi có một Danh sách có DataTemplate hiển thị văn bản và nút "x" bên cạnh. Tôi muốn btn "X" được hiển thị ở phía bên phải, vì vậy tất cả chúng đều xuất hiện ở cùng một nơi. XML tôi sử dụng là:

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

Tôi đã thử thêm tính năng InPalce của StackPanel nhưng không thành công.

Làm cách nào để thiết kế hoặc căn chỉnh "x" trong Danh sách ở mức tối đa trên mỗi mục.

Answer 1

Dưới đây là quan điểm của tôi về nó, sử dụng một lưới theo cách sau:

<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

Nếu mục của bạn có nghĩa vụ phải được nút sau đó bạn có thể chỉ định để HorizontalContentAlignment = "Stretch". Đây là mẫu tôi sử dụng cho các nút bằng cách gạch chéo ở phía bên phải:

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