Layout difficulties in ListBoxItem ContentPresenter Template

Question

Good day,

I am populating a ListBox withe Shipment objects and I am using an ItemContainerStyle to define how I want the items displayed. Everything is working smoothly with one exception.

The template uses a Grid that is inside of two borders. The grid has 7 columns, the last is specified to contain a border that will end up being a glowing gem to denote the active (not necessarily the selected package). The template is set to expand to the width of the listbox. And I cannot figure out how to get the gem to align to the right side of the container. Below is the XAML:

<Border Background="#FFFFB78F" Margin="-2,0,0,0">
<Border BorderBrush="#FF636363" BorderThickness="1" CornerRadius="8" Margin="0,2">
    <Border.Background>
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FFFFCCB0" Offset="0"/>
            <GradientStop Color="#FFFFCCB0" Offset="1"/>
            <GradientStop Color="#FFFCE8DD" Offset="0.5"/>
        </LinearGradientBrush>
    </Border.Background>
    <Grid Margin="6,0,0,0" ScrollViewer.VerticalScrollBarVisibility="Disabled" ShowGridLines="True">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="60" x:Name="Image"/>
            <ColumnDefinition Width="150" x:Name="Names"/>
            <ColumnDefinition Width="120" x:Name="Address"/>
            <ColumnDefinition Width="120" x:Name="Dates"/>
            <ColumnDefinition  Width="200" x:Name="OtherInfo"/>
            <ColumnDefinition  Width="Auto" />
            <ColumnDefinition Width="30"/>
        </Grid.ColumnDefinitions>
        <Image x:Name="CarrierImage" Grid.Column="0" Margin="7,0" Height="45" Width="50"/>
        <StackPanel Grid.Column="1" Margin="4,4,4,0">
        </StackPanel>
        <StackPanel Grid.Column="2" Margin="4,4,4,0">
            <StackPanel Orientation="Horizontal">
            </StackPanel>
        </StackPanel>
        <StackPanel Grid.Column="3" Margin="4,4,4,0">
        </StackPanel>
        <StackPanel Grid.Column="4" Margin="4,4,4,0">
        </StackPanel>
           <!-- Gem -->
        <Border HorizontalAlignment="Right" Margin="0,8,5,7" Width="15" Height="Auto" BorderBrush="Black" BorderThickness="1" CornerRadius="5" Grid.Column="6" d:LayoutOverrides="GridBox">
            <Border.Background>
                <RadialGradientBrush>
                    <GradientStop Color="#FF760000" Offset="1"/>
                    <GradientStop Color="Red"/>
                    <GradientStop Color="#FEFF0000" Offset="0.15"/>
                </RadialGradientBrush>
            </Border.Background>
        </Border>
        <Grid Margin="0,0,-298.067,0" VerticalAlignment="Top" Height="13.277" Grid.Column="6" >
        </Grid>
    </Grid>
</Border>

The Gem Border is toward the bottom. Initially I created the containing grid with a column set to Auto in the hopes that it would fill the remaining space, pushing the last column over to the right edge, but grid columns don't really work that way. I also tried putting a hidden textblock filled with space characters in there to try and get it to expand (hoping that it would continue to constrain itself to the list boxes width, also to no avail.

I am at a loss. Any help would be greatly appreciated.

Cory

Answer 1

To expand to remaining space you need a column set to Width="*". Auto indicates that the column should size to fit its contents, where * indicates that it should fill its parent.

Without seeing the rest of your XAML I expect that you're also getting the default Left alignment for your ListBoxItems so just the * width will give you the same behavior. You can fix that by setting HorizontalContentAlignment="Stretch" on the parent ListBox (unless you have other things going on with your ListBox layout not shown here).

Answer 2

Well you can put the grid into another grid, and add Gem to the outer grid, with HorizontalAlignment="Right". E.g.:

<Border Background="#FFFFB78F" Margin="-2,0,0,0">
    <Border BorderBrush="#FF636363" BorderThickness="1" CornerRadius="8" Margin="0,2">
    <Border.Background>
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FFFFCCB0" Offset="0"/>
            <GradientStop Color="#FFFFCCB0" Offset="1"/>
            <GradientStop Color="#FFFCE8DD" Offset="0.5"/>
        </LinearGradientBrush>
    </Border.Background>
   <Grid>
    <Grid Margin="6,0,0,0" ScrollViewer.VerticalScrollBarVisibility="Disabled" ShowGridLines="True">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="60" x:Name="Image"/>
            <ColumnDefinition Width="150" x:Name="Names"/>
            <ColumnDefinition Width="120" x:Name="Address"/>
            <ColumnDefinition Width="120" x:Name="Dates"/>
            <ColumnDefinition  Width="200" x:Name="OtherInfo"/>
            <ColumnDefinition  Width="Auto" />
            <ColumnDefinition Width="30"/>
        </Grid.ColumnDefinitions>
        <Image x:Name="CarrierImage" Grid.Column="0" Margin="7,0" Height="45" Width="50"/>
        <StackPanel Grid.Column="1" Margin="4,4,4,0">
        </StackPanel>
        <StackPanel Grid.Column="2" Margin="4,4,4,0">
            <StackPanel Orientation="Horizontal">
            </StackPanel>
        </StackPanel>
        <StackPanel Grid.Column="3" Margin="4,4,4,0">
        </StackPanel>
        <StackPanel Grid.Column="4" Margin="4,4,4,0">
        </StackPanel>
        </Grid>
                   <!-- Gem -->
        <Border HorizontalAlignment="Right" Margin="0,8,5,7" Width="15" Height="Auto" BorderBrush="Black" BorderThickness="1" CornerRadius="5" Grid.Column="6" >
            <Border.Background>
                <RadialGradientBrush>
                    <GradientStop Color="#FF760000" Offset="1"/>
                    <GradientStop Color="Red"/>
                    <GradientStop Color="#FEFF0000" Offset="0.15"/>
                </RadialGradientBrush>
            </Border.Background>
        </Border>
    </Grid>
</Border>
</Border>

But I'm pretty sure there are many other ways to improve this XAML. Maybe if you give us a picture, we could give better solution? One picture worth hundred words, you know :)...

Cheers, Anvaka.

Answer 3

Actually Anvaka, I have gotten it working thanks to John Bowen, but now I am having different problems. Post is at the following: DataTriggers in Expression Blend

Cory