#424 – Getting Data-Bound Items in a ListBox to Be a Consistent Size

I demonstrated earlier how to add some rich content to a ListBox using data binding.

The problem with this is that the items don’t line up vertically.  We use several StackPanel elements in the data template, which autosize to fit their content.  We’d like them to autosize, but to use that same size across all rows, for each column.

We can share sizes between entries using the Grid.IsSharedSizeScope and SharedSizeGroup properties.

        <ListBox ItemsSource="{Binding MovieList}" SnapsToDevicePixels="True"
                 Grid.IsSharedSizeScope="True">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal" Margin="0,0,0,5">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition SharedSizeGroup="Col1"/>
                            </Grid.ColumnDefinitions>
                            <Image Source="{Binding Image}" />
                        </Grid>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition SharedSizeGroup="Col2"/>
                            </Grid.ColumnDefinitions>
                            <StackPanel Orientation="Vertical">
                                <Label Content="{Binding Title}" FontWeight="Bold"/>
                                <Label Content="{Binding Year}"/>
                            </StackPanel>
                        </Grid>

                        <Border BorderBrush="Black" BorderThickness="0.5"/>

                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition SharedSizeGroup="Col3"/>
                            </Grid.ColumnDefinitions>
                            <StackPanel Orientation="Vertical">
                                <Label Content="Actors:"/>
                                <Label Content="{Binding ActorLead}" Margin="10,0"/>
                                <Label Content="{Binding ActressLead}" Margin="10,0"/>
                            </StackPanel>
                        </Grid>

                        <Border BorderBrush="Black" BorderThickness="0.5"/>

                        <StackPanel Orientation="Vertical">
                            <Label Content="Director:"/>
                            <Label Content="{Binding Director}" Margin="10,0"/>
                        </StackPanel>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

About Sean
Software developer in the Twin Cities area, passionate about .NET technologies. Equally passionate about my own personal projects related to family history and preservation of family stories and photos.

3 Responses to #424 – Getting Data-Bound Items in a ListBox to Be a Consistent Size

  1. Hello sean I’m Fevzi at Computer Enginering department from Turkey. Can you give your email adress for me ? I have some quasetions about Wpf to you ?

    • Sean says:

      Actually, maybe more efficient for you to post any WPF questions here on the blog. Then other people have a chance to respond to them.

  2. Daniel Blackthorn says:

    thank you so much! at last I am free to move on with my project…

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: