WPF DockPanel not Docking / Default fixed width and minimum width - wpf

Question

I'm trying to make a footer control that has a minimum height that it will shrink to before allowing the a window resize encroaches on its view-able area. But I want a fixed width that it will adhere to until a resize of the main window encroaches on its default bounds. Given the following code, what I'm not understanding is:
-On shrinking the window size after running the sample, why is the bottom anchor of the lower canvas not respected? Instead it's anchoring to the canvas above it.
-Why is the is minimum size of the bottom panel not shrunk too before the window encroaches on its area?
-Why do I have to add the bottom canvas before the top for this demo to even layout correctly?
-Lastly, is there a way to make a Window's minimum bounds just be the sum of all the horizontal and vertical minimum bounds of the controls it contains?
<Window x:Class="TestWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="TestWindow" Height="300" Width="1278" Background="{x:Null}">
<DockPanel Background="#FFE6AFAF" VerticalAlignment="Stretch" >
<Canvas DockPanel.Dock="Bottom" HorizontalAlignment="Stretch" MinHeight="100" Height="170" Margin="10,10,10,10" VerticalAlignment="Stretch" Width="Auto">
<Canvas.Background>
<SolidColorBrush Color="{DynamicResource {x:Static SystemColors.ControlLightColorKey}}"/>
</Canvas.Background>
</Canvas>
<Canvas DockPanel.Dock="Top,Bottom" HorizontalAlignment="Stretch" Height="Auto" Margin="10,10,10,10" VerticalAlignment="Stretch" Width="Auto">
<Canvas.Background>
<SolidColorBrush Color="{DynamicResource {x:Static SystemColors.ControlLightColorKey}}"/>
</Canvas.Background>
</Canvas>
</DockPanel>
</Window>

Answer 1

To start with question 3:
When using a DockPanel, the order in which you add elements matters. What happens here is that the "MinHeight=100" canvas is added first, and the DockPanel.Dock="Bottom" says: "Stretch this canvas across the bottom of the DockPanel and make it as tall as it needs to be, but no taller, because we need to keep as much space as possible available for the rest of the elements".
This process is then repeated for each consecutive element in the DockPanel until the very last element, which gets to use all the space that is left in the DockPanel (unless you set <DockPanel LastChildFill="False" ...). This example might help illustrate how the DockPanel works:
<DockPanel Width="200" Height="200" >
<Button Content="01" Background="#222" DockPanel.Dock="Bottom" />
<Button Content="02" Background="#333" DockPanel.Dock="Left" />
<Button Content="03" Background="#444" DockPanel.Dock="Top" />
<Button Content="04" Background="#555" DockPanel.Dock="Right" />
<Button Content="05" Background="#666" DockPanel.Dock="Bottom" />
<Button Content="06" Background="#777" DockPanel.Dock="Left" />
<Button Content="07" Background="#888" DockPanel.Dock="Top" />
<Button Content="08" Background="#999" DockPanel.Dock="Right" />
<Button Content="09" Background="#aaa" DockPanel.Dock="Bottom" />
<Button Content="10" Background="#bbb" DockPanel.Dock="Left" />
<Button Content="11" Background="#ccc" DockPanel.Dock="Top" />
<Button Content="12" Background="#ddd" />
</DockPanel>
So in your case, the first canvas is anchored to the bottom and stretches horizontally across the DockPanel. Its height will always be 100 pixels, because its MinHeight says that's the lowest height it will accept.
Then, the second canvas is added, and because it's the last element, it's allowed to use all the space that's left above the first canvas.
Question 3, part "-Lastly":
Try <Window ... SizeToContent="WidthAndHeight" />
Question 2:
You mean if you shrink the window to be less than 100 pixels tall? Elements will never accept to be smaller than their minimum size (in this case 100 pixels tall). The canvas renders itself at 100 pixels, and what doesn't fit inside the window simply gets clipped.
..and I'm not sure what you mean in Question 1..