Setting column widths for listbox in a data template

问题

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.

回答1:

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.

回答2:

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

来源：https://stackoverflow.com/questions/27723363/setting-column-widths-for-listbox-in-a-data-template