[Disclaimer: Any or all behavior described in this article is against the PDC03 build of Longhorn, and may change or be removed altogether in future builds of Longhorn.]
[Note: This tip may be obvious and already known to people developing in XAML today. I am just sharing it to relieve some of the frustrations web developers might have when learning XAML in the future.]
XAML does NOT equal HTML
While this may seem obvious at first, you really need to get over that barrier when you start developing in it. XAML is not a markup language, per se. XAML is more language, and less markup. Think of it more as a general purpose programming model that is wired directly into the CLR (for the 'softies out there, please correct me if this statement sounds incorrect).
Once you accept that XAML is not HTML, you need to let go of the assumption that the order you see certain XAML tags in, is the order those elements will appear on the screen. Let's take the following code snippet:
<DockPanel Width="100%">
<Border DockPanel.Dock="Top" Height="25%" Background="Pink" BorderThickness="2" BorderBrush="Black">
<SimpleText VerticalAlignment="Center" HorizontalAlignment="Center">Top 1</SimpleText>
</Border>
<Border DockPanel.Dock="Top" Height="25%" Background="Pink" BorderThickness="2" BorderBrush="Black">
<SimpleText VerticalAlignment="Center" HorizontalAlignment="Center">Top 2</SimpleText>
</Border>
<Border DockPanel.Dock="Bottom" Height="25%" Background="Cyan" BorderThickness="2" BorderBrush="Black">
<SimpleText VerticalAlignment="Center" HorizontalAlignment="Center">Bottom 1</SimpleText>
</Border>
<Border DockPanel.Dock="Bottom" Height="25%" Background="Cyan" BorderThickness="2" BorderBrush="Black">
<SimpleText VerticalAlignment="Center" HorizontalAlignment="Center">Bottom 2</SimpleText>
</Border>
</DockPanel>
At first glance, one might assume that the code above would present the image below (reading “Top 1“, “Top 2“, “Bottom 1“, “Bottom 2“ from the top to the bottom of the screen):
However, this assumption would be wrong. It makes perfect sense when you think about the order that our elements are being processed in. The first element that the parser encounters with a DockPanel.Dock value of “Bottom“ will be the first element locked to the bottom. The next element with the same “Bottom“ value, will be locked on TOP of the prior one (there might be ways to get around this, so please feel free to challenge me if you believe I am wrong). The image actually generated from the code above will look like this (notice how the “Bottom 2“ text is actually on top of the “Bottom 1“ text):
DockPanel.Dock = “Fill“
When first learning XAML, things can get even more potentially confusing if you use DockPanel.Dock=“Fill“. As another example, take the code below. The order of the code seems pretty logical. First the “Top“ docking, then the “Fill“ docking which is in the middle, and then lastly the “Bottom“ docking.
<DockPanel Width="100%">
<Border DockPanel.Dock="Top" Height="25%" Background="Pink" BorderThickness="2" BorderBrush="Black">
<SimpleText VerticalAlignment="Center" HorizontalAlignment="Center">Top</SimpleText>
</Border>
<Border DockPanel.Dock="Fill" Background="White" BorderThickness="2" BorderBrush="Black">
<SimpleText VerticalAlignment="Center" HorizontalAlignment="Center">Fill</SimpleText>
</Border>
<Border DockPanel.Dock="Bottom" Height="25%" Background="Cyan" BorderThickness="2" BorderBrush="Black">
<SimpleText VerticalAlignment="Center" HorizontalAlignment="Center">Bottom</SimpleText>
</Border>
</DockPanel>
Unfortunately, this does not produce the intended. Because the “Fill“ is presented before the “Bottom“, the “Fill“ element will take up the entire bottom part of the screen, effectively “covering“ the “Bottom“ element. See the image produced below to see what is rendered from the code above.
Obviously, this is not what we expected to happen. To fix this, we simply move the “Fill“ element below the “Bottom“ element (like shown below) and everything renders as expected.
<DockPanel Width="100%">
<Border DockPanel.Dock="Top" Height="25%" Background="Pink" BorderThickness="2" BorderBrush="Black">
<SimpleText VerticalAlignment="Center" HorizontalAlignment="Center">Top</SimpleText>
</Border>
<Border DockPanel.Dock="Bottom" Height="25%" Background="Cyan" BorderThickness="2" BorderBrush="Black">
<SimpleText VerticalAlignment="Center" HorizontalAlignment="Center">Bottom</SimpleText>
</Border>
<Border DockPanel.Dock="Fill" Background="White" BorderThickness="2" BorderBrush="Black">
<SimpleText VerticalAlignment="Center" HorizontalAlignment="Center">Fill</SimpleText>
</Border>
</DockPanel>
If you are using a flow layout instead of an absolute-positioning layout, order of elements in your XAML is quite important. Remember that, and you shall always be blessed with Longhorn Zen!
Until next time, this has been Jason Olson and that's why the sky is blue. Ciao!