How to resize Listbox.ItemTemplate -columns [duplicate] - wpf

Question

This is my Employee class and its collection.
public class Employee
{
public string LastName { get; set; }
public string FirstName { get; set; }
public bool IsHardWorking { get; set; }
public string Description { get; set; }
}
List<Employee> Employees = new List<Employee>()
{
new Employee() { IsHardWorking = false, LastName = "Silly", FirstName = "Dude", Description= "this due is a mess" },
new Employee() { IsHardWorking = true, LastName = "Mean", FirstName = "Person", Description= "funny" },
new Employee() { IsHardWorking = false, LastName = "New", FirstName = "Friend", Description= "let her go in next round of layoffs" },
new Employee() { IsHardWorking = true, LastName = "My", FirstName = "Buddy", Description= "simply no comments" },
};
The data is shown using a data template shown below.
<Grid Loaded="DataLoaded">
<Grid.RowDefinitions>
<RowDefinition Height="6*" />
<RowDefinition />
</Grid.RowDefinitions>
<ListBox x:Name="lst1" Grid.Row="0" >
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="9*" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<StackPanel Orientation="Vertical" Grid.Column="0" HorizontalAlignment="Left">
<StackPanel Orientation="Horizontal">
<Label FontFamily="Tahoma" FontSize="12" VerticalAlignment="Bottom" Content="Last Name" />
<Label FontFamily="Tahoma" FontSize="18" VerticalAlignment="Bottom" Content="{Binding LastName}" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<Label FontFamily="Tahoma" FontSize="12" VerticalAlignment="Bottom" Content="First Name" />
<Label FontFamily="Tahoma" FontSize="18" VerticalAlignment="Bottom" Content="{Binding FirstName}" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<Label FontFamily="Tahoma" FontSize="12" VerticalAlignment="Bottom" Content="Details" />
<Label FontFamily="Tahoma" FontSize="18" VerticalAlignment="Bottom" Content="{Binding Description}" />
</StackPanel>
</StackPanel>
<Image Source="{Binding IsHardWorking, Converter={StaticResource valueToImageConverter}}" Height="50" Grid.Column="1" HorizontalAlignment="Right" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Margin="5" Grid.Row="1" >
<Button x:Name="btnClose" Content="Close" Margin="5" Width="50" />
</StackPanel>
</Grid>
Here is how it looks.
My problem is that I want the image column should be right justified with a fixed width. First column is assigned most of the width (9*) but I don't know how to make it look like a column. Any ideas
UPDATE
After implementing #FlatEric suggestion, below is what I am getting.
I still have lot of white space on the right side (marked with yellow rectangle). I tried to set Margin to 0 for image but that doesn't change anything.

Answer 1

To make all images aligned in one column you can set the SharedSizeGroup property in the ColumnDefinitions of the Grid in the DataTemplate:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="9*" SharedSizeGroup="A" />
<ColumnDefinition Width="*" SharedSizeGroup="B" />
</Grid.ColumnDefinitions>
Then set Grid.IsSharedSizeScope="True" in the ListBox
<ListBox x:Name="lst1" Grid.Row="0" Grid.IsSharedSizeScope="True" >
Edit:
To remove the space on the right:
Set ShareSizeGroup only for the second column
Add HorizontalContentAlignment="Stretch" to the ListBox

Answer 2

Just add HorizontalContentAlignment='Stretch' to your ListBox element. Unless you have something unusual in your valueToImageConverter that should work. It shouldn't be necessary to use SharedSizeGroup.