How to dock bottom of control A to location of a variable-size control B

Question

In a grid, I have a listbox, and under the listbox, I have an image. When the Main Window is getting horizontally smaller, my image keeps its proportion but size decrease as it's docked on the grid at the bottom and size are auto.

Is this possible for my listbox bottom to be equal to the image location?

Something like:

On image_resize 
{
    listbox.Height = image.Location;
}

I'm not sure what you mean by "equal to the image location." Do you mean that you want the listbox width to scale with the image's width? — Dan Busha, Apr 29 '12 at 04:11
I'm talking about the height. In fact, I want my listbox to take all the available space under it. Maybe similar to http://stackoverflow.com/questions/36108/how-to-get-controls-in-wpf-to-fill-available-space . But the guy receive a two pages long answer. I guess there should be an on/off switch. What I typed (listbox.height = image.Location) is what I would exactly do if it was a WinForm application. And it would work directly. When I databind listbox.height to image.Location, it only resizes when I change the WindowState (switching to fullscreen and vice-versa) — Léon Pelletier, Apr 29 '12 at 04:17

score 3 · Accepted Answer · answered Apr 29 '12 at 04:58

If you're looking for the Listbox to expand to fill the remaining space you've got at least two solutions.

With the DockPanel:

<DockPanel LastChildFill="True">
    <Image Source="..." Dock.DockPanel="Bottom"/>
    <ListBox ItemsSource="{...}" DockPanel.Dock="Top"/>
</DockPanel>

While the Image is the first element listed it is docked to the bottom so it be laid out beneath the ListBox. Because the ListBox is the last element in the DockPanel it will stretch to fill the remaining space. See this link for more information about the DockPanel.

With the Grid:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>

    <ListBox Grid.Row="0"/>

    <Image Grid.Row="1"/>
</Grid>

With the Grid you can request that a row either Auto size itself to fit its contents, it can resize itself to fill the remaining space or it can be given a specific height. The * notation indicates fill the remaining space. See this link for more information about Grid layout and this link for a quick tutorial.

Choosed the dockpanel solution. Thanks! – Léon Pelletier Apr 29 '12 at 05:13 — Léon Pelletier, Apr 29 '12 at 05:13

How to dock bottom of control A to location of a variable-size control B

1 Answers1