I have a ListBox
with an ItemTemplate
consisting of a TextBlock
and a ComboBox
. The problem is that the width of the text inside the TextBlock
is not the same for each item and the ComboBox
controls are not aligned.
How can I set the TextBlock
in the template so all items are the same width, that is the one of the widest?
Here is my xaml:
<ListBox MinHeight="100" ItemsSource="{Binding Trainees}">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Margin="1">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock VerticalAlignment="Center" Grid.Column="0">
<TextBlock.Text>
<MultiBinding StringFormat="{}{0}, {1}">
<Binding Path="LastName" />
<Binding Path="FirstName" />
</MultiBinding>
</TextBlock.Text>
</TextBlock>
<ComboBox HorizontalAlignment="Left" Grid.Column="1"
ItemsSource="{Binding Source={StaticResource Functions}}" SelectedValue="{Binding Path=Function}"
MinWidth="100" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
You can use the IsSharedSizeScope attached property. In your template definition, attach a "shared size group" to each column, like this:
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="col1" />
<ColumnDefinition SharedSizeGroup="col2" />
</Grid.ColumnDefinitions>
... then define your ListBox as a shared size scope so it knows to size each "size group" the same way:
<ListBox Grid.IsSharedSizeScope="True">...</ListBox>