接下来,在我们的xamlFunction.js文件中,需要做一个小小的调整:使用“createMenu.php”替代“hello.xaml”。正如前面提到的,我们的XAML源并不需要是一个.xaml文件。
现在创建一个名为createMenu.php的新文件:
<Grid xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="navMenu_Grid">
<Canvas HorizontalAlignment="Left" Margin="0,0,0,0" Width="300" Height="400" VerticalAlignment="Top">
<?
//Database fetch goes here
$menu=array('Home','Links','About','Contact');
$n = 0;
foreach ($menu as $m) {
echo('<Rectangle x:Name="Rect' . $n . '" Fill="#FF5A2191" Height="40" Canvas.Left="20" RadiusY="15" RadiusX="15" Opacity=".5" Stroke="Black" Canvas.Top="' . ($n * 40) . '" Width="150" MouseEnter="mouseEntered" MouseLeave="mouseLeft">');
echo('<Rectangle.Effect><DropShadowEffect/></Rectangle.Effect>');
echo('</Rectangle>');
echo('<TextBlock Foreground="#FFF7F1F1" Canvas.Top="' . (($n * 40) +10) . '" Canvas.Left="45" Text="' . $m . '" />');
$n ++;
}
?>
</Canvas>
</Grid>
<Canvas HorizontalAlignment="Left" Margin="0,0,0,0" Width="300" Height="400" VerticalAlignment="Top">
<?
//Database fetch goes here
$menu=array('Home','Links','About','Contact');
$n = 0;
foreach ($menu as $m) {
echo('<Rectangle x:Name="Rect' . $n . '" Fill="#FF5A2191" Height="40" Canvas.Left="20" RadiusY="15" RadiusX="15" Opacity=".5" Stroke="Black" Canvas.Top="' . ($n * 40) . '" Width="150" MouseEnter="mouseEntered" MouseLeave="mouseLeft">');
echo('<Rectangle.Effect><DropShadowEffect/></Rectangle.Effect>');
echo('</Rectangle>');
echo('<TextBlock Foreground="#FFF7F1F1" Canvas.Top="' . (($n * 40) +10) . '" Canvas.Left="45" Text="' . $m . '" />');
$n ++;
}
?>
</Canvas>
</Grid>
如上所示,除了某些明显的区别之外,实质上以上代码与hello.xaml大体相同。在这里我们不是通过动态列表来实现迭代,而是使用了一个数组。增加了一个小计数器来处理定位功能、
有人可能注意到还增加了“MouseEnter”和“MouseLeave”事件。一会儿后我们将看到它们的效果。
运行PHPMenu.php我们将看到的界面如下:
图4
首先,界面从上世界90年代中期风格的导航菜单变成90年代末期风格的按钮,而且一切都是通过XAML和Silverlight动态创建的。而且更重要的是,所有都是高度可控的,通过JavaScript可以迅速的设定或修改其属性。