Align an element on the left and an element on the right of a listBox in a datatemplate

Question

I have an array of strings. I need to make a listBox that displays these strings on the left with their length on the right. All this, with alternating colors on four items and it must be written in italic if the size is odd. I manage to do everything, except align the string sizes to the right.

This is the part of the XAML that manages the listbox

 <Window.Resources>
     <local:ItalicConverter x:Key="ItalicConverter"/>
     <Style TargetType="{x:Type ListBoxItem}">
         <Style.Triggers>
             <Trigger Property="ItemsControl.AlternationIndex" Value="0">
                 <Setter Property="Background" Value="LightBlue"/>
             </Trigger>
             <Trigger Property="ItemsControl.AlternationIndex" Value="1">
                 <Setter Property="Background" Value="CornflowerBlue"/>
             </Trigger>
             <Trigger Property="ItemsControl.AlternationIndex" Value="2">
                 <Setter Property="Background" Value="DarkBlue"/>
             </Trigger>
             <Trigger Property="ItemsControl.AlternationIndex" Value="3">
                 <Setter Property="Background" Value="CornflowerBlue"/>
             </Trigger>
         </Style.Triggers>
     </Style>
 </Window.Resources>
 <ListBox x:Name="listBox" AlternationCount="4" HorizontalAlignment="Stretch">
     <ListBox.ItemTemplate>
         <DataTemplate>
             <Grid HorizontalAlignment="Stretch">
                 <TextBlock Text="{Binding}" Foreground="White" Margin="5" HorizontalAlignment="Left">
                     <TextBlock.FontStyle>
                         <Binding Path="Length" Converter="{StaticResource ItalicConverter}"/>
                     </TextBlock.FontStyle>
                 </TextBlock>
                 <TextBlock Text="{Binding Length}" Foreground="White" Margin="5" HorizontalAlignment="Right"/>
             </Grid>
         </DataTemplate>
     </ListBox.ItemTemplate>
 </ListBox>

I get this :

I also tried this :

<Window x:Class="Ex1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Ex1"
        mc:Ignorable="d"
        Title="Voeux de cours InteGraph" Height="450" Width="800">
    <Window.Resources>
        <local:ItalicConverter x:Key="ItalicConverter"/>
        <Style TargetType="{x:Type ListBoxItem}">
            <Style.Triggers>
                <Trigger Property="ItemsControl.AlternationIndex" Value="0">
                    <Setter Property="Background" Value="LightBlue"/>
                </Trigger>
                <Trigger Property="ItemsControl.AlternationIndex" Value="1">
                    <Setter Property="Background" Value="CornflowerBlue"/>
                </Trigger>
                <Trigger Property="ItemsControl.AlternationIndex" Value="2">
                    <Setter Property="Background" Value="DarkBlue"/>
                </Trigger>
                <Trigger Property="ItemsControl.AlternationIndex" Value="3">
                    <Setter Property="Background" Value="CornflowerBlue"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <ListBox x:Name="listBox" AlternationCount="4" HorizontalAlignment="Stretch">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <Grid HorizontalAlignment="Stretch">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>
                    <TextBlock Text="{Binding}" Foreground="White" Margin="5" HorizontalAlignment="Left" Grid.Column="0">
                        <TextBlock.FontStyle>
                            <Binding Path="Length" Converter="{StaticResource ItalicConverter}"/>
                        </TextBlock.FontStyle>
                    </TextBlock>
                    <TextBlock Text="{Binding Length}" Foreground="White" Margin="5" HorizontalAlignment="Right" Grid.Column="2"/>
                </Grid>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
</Window>

But the result is not good...

On stackOverflow, I found this link: Aligning ListBoxItem content

But none of their answers work for me.

Answer 1

You are just missing one component. Your ListBoxItems need to stretch. See this link for how to do that in general: How to get a ListBox ItemTemplate to stretch horizontally the full width of the ListBox?

<ListBox.ItemContainerStyle> 
    <Style TargetType="ListBoxItem"> 
        <Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter> 
    </Style> 
</ListBox.ItemContainerStyle> 

Your case, differs a bit. The main issue is that you already have a style targetting the same property, which would cause a conflict. However, it should work if you add the setter to your existing style tag like so:

<Style TargetType="{x:Type ListBoxItem}">
    <!-- SET STRETCH FOR THE ITEM -->
    <Setter Property="HorizontalContentAlignment"
            Value="Stretch" />
    <Style.Triggers>
        <Trigger Property="ItemsControl.AlternationIndex"
                 Value="0">
            <Setter Property="Background"
                    Value="LightBlue" />
        </Trigger>
        <Trigger Property="ItemsControl.AlternationIndex"
                 Value="1">
            <Setter Property="Background"
                    Value="CornflowerBlue" />
        </Trigger>
        <Trigger Property="ItemsControl.AlternationIndex"
                 Value="2">
            <Setter Property="Background"
                    Value="DarkBlue" />
        </Trigger>
        <Trigger Property="ItemsControl.AlternationIndex"
                 Value="3">
            <Setter Property="Background"
                    Value="CornflowerBlue" />
        </Trigger>
    </Style.Triggers>
</Style>

Result: