Unfortunately, ASP.NET is not particularly my forte, so I can't just simply tell you how to do it using controls. However, I have worked with XSLT quite a bit in the past, and that sounds perfect for this scenario.
XSLT is a transformation technology. It's purpose is to transform your original tree into another tree, but the output is text, and thus, does not necessarily need to be well-formed XML. So, my code's goal is to transform your XML into an HTML snippet which can then be inserted into your web page, either via the Response stream, or some other method.
First, the .NET code:
System.Xml.XmlDocument xmlDoc = new System.Xml.XmlDocument();
xmlDoc.Load(@"c:\meals.xml");
System.Xml.Xsl.XslTransform xslt = new System.Xml.Xsl.XslTransform();
xslt.Load(@"c:\meals.xsl");
System.Xml.XmlReader reader = xslt.Transform(xmlDoc, null, new System.Xml.XmlUrlResolver());
reader.MoveToContent();
string results = reader.ReadInnerXml();
Next, is the contents of the "meals.xsl" file. I use templates here, which allows for the maximum flexibility in customizing how each individual node in your XML tree is rendered. Note that " " is not an XML entity, so you need to use the character code equivilent of the non-breaking space, " ".
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<xsl:apply-templates select="meals" />
</xsl:template>
<xsl:template match="meals">
<meals>
<xsl:apply-templates select="meal[@id='Breakfast']" />
<xsl:apply-templates select="meal[@id='Lunch']" />
<xsl:apply-templates select="meal[@id='Dinner']" />
<xsl:apply-templates select="meal[@id='Snacks']" />
</meals>
</xsl:template>
<xsl:template match="meal">
<xsl:value-of select="@id" /> (<xsl:value-of select="calories" /> Calories) <br/>
    <xsl:apply-templates select="foods" /> <br />
<br />
</xsl:template>
<xsl:template match="foods">
<xsl:apply-templates select="food" />
</xsl:template>
<xsl:template match="food">
<xsl:value-of select="." /><xsl:if test="position() != last()">, </xsl:if>
</xsl:template>
</xsl:stylesheet>
The output of the transformation is the following (not exactly intended for human consumption, but not too bad):
<meals>
Breakfast (215 Calories) <br />
Corn Flakes Cereal, Frozen Sweet Rasberries, Soy Milk<br /><br />Lunch (342 Calories) <br />
Hard Roll, Orange, Butternut Squash with Ginger<br /><br />Dinner (538 Calories) <br />
Cooked Couscous, Raw Broccoli, Curried Chicken with Almonds<br /><br />Snacks (233 Calories) <br />
Orange, Sunflower seeds<br /><br />
</meals>
From this, we grab the contents of the <meals> node, which is then inserted into your rendering web page.
The resulting rendered HTML looks like:
___________________________________________________________________________
Breakfast (215 Calories)
Corn Flakes Cereal, Frozen Sweet Rasberries, Soy Milk
Lunch (342 Calories)
Hard Roll, Orange, Butternut Squash with Ginger
Dinner (538 Calories)
Cooked Couscous, Raw Broccoli, Curried Chicken with Almonds
Snacks (233 Calories)
Orange, Sunflower seeds
___________________________________________________________________________