Question

I’m trying to make a grid for a listitem template. There should be three columns, the second and third columns should be 50px wide each, the first column should stretch too fill the rest of the empty space.

Here’s my code so far:

<DataTemplate x:key="NoteItemTemplate">
 <Grid Background="{Binding ColorBrush}"
   Height="50"
   Margin="5,5,5,5"
   HorizontalAlignment="Stretch">

   <Grid.ColumnDefinitions>
    <ColumnDefinition Width="1*" />
    <ColumnDefinition Width="50" />
    <ColumnDefinition Width="50" />
   </Grid.ColumnDefinitions>
 </Grid>
</DataTemplate>

      <!-- far away, in an another file.. -->

 <ListBox
    x:Name="NotesListBox"
    VerticalContentAlignment="Stretch"
    HorizontalContentAlignment="Stretch"
    VerticalAlignment="Top"
    ItemsSource="{Binding NotesList}"
    ItemTemplate="{StaticResource NoteItemTemplate}"
    Background="AliceBlue" />

Makes no difference if it’s 1* or *.

But I can’t seem to find the answer. How would you do it?

Answer 1

You mentioned that you want to use the above Grid definition as DataTemplate for an ListBoxItem. By default, the content of an ListBoxItem is not stretched, so that in your case you will only see 2 columns.

So I think you need to specify, that you want to stretch the content of the ListBoxItem. Do it like so:

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