Comment aligner à droite le contenu d'un DataTemplate ?

Question

J'ai une liste avec un DataTemplate qui affiche le texte et un bouton "x" à côté. Je veux que le bouton "X" soit affiché à l'extrême droite, afin qu'ils apparaissent tous au même endroit. Le XML que j'utilise est :

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

J'ai essayé d'ajouter la grille à la place du StackPanel, mais je n'ai pas réussi.

Comment puis-je le concevoir ou aligner le "x" dans la liste pour qu'il soit à l'extrême droite de chaque article.

Answer 1

Voici ce que j'en pense : utilisez une grille de la manière suivante :

<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

Si vos éléments sont censés être des boutons, vous devez spécifier HorizontalContentAlignment="Stretch". Voici le modèle que j'utilise pour les boutons avec une croix sur le côté droit :

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