摘要:今天的Xaml例子演示如何使用DockPanel, FlowPanel以及Border控件控制UI Layout(布局)。除此之外,还请注意以下几点:
FontSize和FontStyle的使用
Margin的使用
指定颜色(确切的说:Brush)的方法
改变窗口的大小,观察布局的变化
Xaml文件和效果图如下所示:
<DockPanel xmlns="http://schemas.microsoft.com/2003/xaml">
<Border Background="LightBlue" DockPanel.Dock="Top">
<Text FontSize="14" FontStyle="italic">This is Header</Text>
</Border>
<Border DockPanel.Dock="Bottom" Background="LightYellow">
<Text FontSize="14" FontStyle="italic">This is Footer</Text>
</Border>
<Border DockPanel.Dock="Left" Background="#D6C8CC">
<DockPanel>
<Text Margin="5" DockPanel.Dock="Top" FontSize="20">Best Sites</Text>
<HyperLink Margin="5" DockPanel.Dock="Top" NavigateUri="http://blog.joycode.com">
Visit blog.joycode.com
</HyperLink>
<HyperLink Margin="5" DockPanel.Dock="Top" NavigateUri="http://msdn.microsoft.com">
Visit msdn.microsoft.com
</HyperLink>
</DockPanel>
</Border>
<Border DockPanel.Dock="Fill">
<DockPanel>
<FlowPanel DockPanel.Dock="Top">
<Button Height="20px" Width="80px" Margin="5,5,10,10">Sign In</Button>
<Button Height="20px" Width="90px" Margin="5,5,10,10">Sign Out</Button>
</FlowPanel>
<Border DockPanel.Dock="Fill" Background="LightGreen">
<DockPanel>
<Text DockPanel.Dock="Top" Margin="0,10,0,15" FontSize="15">Please read the poem below and answer questions:</Text>
<TextPanel FontSize="14" Background="LightGreen" Foreground="Blue">
枉凝眉:一个是阆苑仙葩,一个是美玉无瑕。若说没奇缘,今生偏又遇着他;若说有奇缘,如何心事终虚化!一个枉自嗟呀,一个空劳牵挂;一个是水中月,一个是镜中花。想眼中,能有多少泪珠儿?怎经得秋流到冬尽,春流到夏!
</TextPanel>
</DockPanel>
</Border>
</DockPanel>
</Border>
</DockPanel>
...[
阅读全文]