Geeks With Blogs

News

Series

Add to Technorati Favorites


An Archived Managed World This blog has moved to http://www.managed-world.com/blog

[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!

 

Posted on Wednesday, March 24, 2004 5:34 PM Windows Client | Back to top


Comments on this post: Longhorn Tip #1 - DockPanel.Dock (XAML != HTML)

# re: Longhorn Tip #1 - DockPanel.Dock (XAML != HTML)
Requesting Gravatar...
oye - that's pretty brutal... but i guess there is no other way...
Left by chadb on Mar 25, 2004 3:03 PM

# re: Longhorn Tip #1 - DockPanel.Dock (XAML != HTML)
Requesting Gravatar...
I'm disturbed that every XAML example I've seen so far shows presentation semantics inline with the element markup. In the HTML world, we've spent years convincing people to move their inline presentation out of HTML and into external CSS files, and move their inline code out of HTML and into external JS files. Now, every XAML example I see has the data, presentation, and logic mixed into the same structure. Arrrg. No thank you.
Left by Brian R. James on Mar 26, 2004 7:22 AM

# re: Longhorn Tip #1 - DockPanel.Dock (XAML != HTML)
Requesting Gravatar...
Dear Brian, I agree with your views on HTML 100%. The only reason I have done my XAML tutorials like I have is because it is 1) a lot easier to show what is really happening and 2) the code is a bit shorter and easier to understand.

I am really bothered when I see code files in the XAML file rather than a code behind file. And I haven't really looked into external styles yet. It seems like we SHOULD be able to do it (maybe not in the PDC bits, but at least in XAML when it is finished). I will investigate more and if I find out something, I will make a post about it so at least the information will start working its way around the community. The last thing we developers with the PDC bits want to do is to turn other developers off of any Longhorn technology because of poor programming practices.

I hope this makes sense and thanks for your opinion.
Left by Jason Olson on Mar 26, 2004 11:06 AM

# re: Longhorn Tip #1 - DockPanel.Dock (XAML != HTML)
Requesting Gravatar...
In answer to Brian, I believe XAML requires a different way of looking at things compared to HTML.

To create a presentation "style" with HTML, you would create a new Class in CSS. For example:

.MyButton {font-size: 8pt; color:blue}

Whereas in XAML, you create a new class by deriving from an existing class:

class MyButton : Button {}

then modify the style of MyButton within the MyButton constructor.

You would then use MyButton inside the XAML Markup - thus separating presentation semantics from element markup.
Left by RichB on Mar 27, 2004 7:50 AM

# re: Longhorn Tip #1 - DockPanel.Dock (XAML != HTML)
Requesting Gravatar...
RichB, I don't like the idea of inheriting from a class just to change the presentation of that class. That is why we all have access to the presentation-style properties of that class, to change the presentation style. When you start inheriting from controls just to change the "style" of that control, I think your code becomes confusing and, ultimately, against OOP practices. When I see a Class B that is inherited from Class A, my first assumption is that Class B was inherited from Class A in order to augment the functionality of Class A, not simply to change its style.

It seems wrong to me that Microsoft would go down such a road when they have been doing really good lately about promoting best practices. Just my opinion, though. And I have been known to be wrong before.....
Left by Jason Olson on Mar 27, 2004 3:06 PM

# re: Longhorn Tip #1 - DockPanel.Dock (XAML != HTML)
Requesting Gravatar...
XAML seems to be almost an identical copy of Java's AWT, as regards the panel-orientated layout. I would imagine that most developers would opt for absolute positioning rather than this scheme of things Correct me if I'm wrong
Left by Joe Marini on Apr 19, 2004 2:12 PM

# re: Longhorn Tip #1 - DockPanel.Dock (XAML != HTML)
Requesting Gravatar...
Jason, inheriting to change presentation can be a good thing if you want to override drawing behaviour, i.e. overriding the virtual method OnPaint. You cannot do this with "presentation properties" alone. Extending behaviour in this fashion can be good OOP practice...it all depends on what you are wanting to achieve. There are no absolutes such as your comment suggests...
Left by Dan on Aug 15, 2005 6:30 AM

# re: Longhorn Tip #1 - DockPanel.Dock (XAML != HTML)
Requesting Gravatar...
BTW, my comment "There are no absolutes such as your comment suggests", I'm not meaning to have a go or anything...what I'm meaning is that one persons idea of "bad practice" can be another's viable solution to a specific problem...anyway, you guys posted over a year ago, so I'm guessing you won't care anyway!
Left by Dan on Aug 15, 2005 6:37 AM

# re: Longhorn Tip #1 - DockPanel.Dock (XAML != HTML)
Requesting Gravatar...
XAML is a general purpose programming model quite different from HTML language, and programmers need to know the difference well while designing. Cinema Projection Port Thanks for sharing the knowledge. Your illustration here is such a relief for newcomers.
Left by Kevin on Oct 29, 2015 4:54 PM

Your comment:
 (will show your gravatar)


Copyright © Jason Olson | Powered by: GeeksWithBlogs.net