WPF DockPanel doesn't respect the "Filled" control's desired size

Question

I have the following Xaml (simplified for brevity, but will repro the problem in Xamlpad or Kaxaml):

<DockPanel Width="400">
    <TextBlock DockPanel.Dock="Left" TextWrapping="Wrap">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Vestibulum massa metus, ornare in fringilla nec, fringilla at orci.
        Nunc pharetra enim sit amet sapien aliquet eu euismod turpis vehicula.
        Aenean gravida tempus lectus ut ornare. 
            Nullam massa augue, suscipit vel consectetur fringilla, pretium vitae neque.
    </TextBlock>
    <Button MinWidth="100" VerticalAlignment="Center" HorizontalAlignment="Left">Hello world</Button>
</DockPanel>

My problem is that I want the Button to take its minimum 100px of space, and for the text to wrap suitably to leave that space. However, what happens is that the text wraps as close to 400px as possible, and then the Button is clipped.

If I Snoop the output I can see that the button is rendering at the desired 100px, but it's being clipped off the side of the DockPanel.

If I reverse the Dock (so the button is docked "Right" and the TextBlock fills) then I get the layout I want, but unfortunately that's not an option due to the surrounding layout.

Is there something I can do that will make the DockPanel a) not clip and b) layout in a way that respects the MinWidth? Or am I stuck finding an alternative layout mechanism?

Thanks in advance!

Answer 1

Hi!

You should dock the button to the right and let the textblock fill the rest. Here is the corresponding xaml:

<DockPanel Width="400">
    <Button DockPanel.Dock="Right" MinWidth="100" VerticalAlignment="Center" HorizontalAlignment="Left">Hello world</Button>
    <TextBlock TextWrapping="Wrap">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Vestibulum massa metus, ornare in fringilla nec, fringilla at orci.
        Nunc pharetra enim sit amet sapien aliquet eu euismod turpis vehicula.
        Aenean gravida tempus lectus ut ornare. 
        Nullam massa augue, suscipit vel consectetur fringilla, pretium vitae neque.
    </TextBlock>
</DockPanel>

Best Regards,
Oliver Hanappi

Answer 2

Ah, I am dumb, and had been staring at the same code for too long. My far-too-simple solution was to use a Grid:

<Grid Width="400">
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="Auto" />
  </Grid.ColumnDefinitions>
  <Button  Grid.Column="1" MinWidth="100" VerticalAlignment="Center" HorizontalAlignment="Left">Hello world</Button>
  <TextBlock TextWrapping="Wrap" Grid.Column="0">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Vestibulum massa metus, ornare in fringilla nec, fringilla at orci.
      Nunc pharetra enim sit amet sapien aliquet eu euismod turpis vehicula.
      Aenean gravida tempus lectus ut ornare. 
      Nullam massa augue, suscipit vel consectetur fringilla, pretium vitae neque.
  </TextBlock>
</Grid>

Apologies for my own silly question!