[Net_Ghost] WPF实例教程(4)
2008-10-15 13:37
337 查看
代码所在位置:WPFSamples/Intro/QuickStart3
Page1.xaml
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<DockPanel
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<TextBlock Background="LightBlue"
DockPanel.Dock="Top">Some Text</TextBlock>
<TextBlock DockPanel.Dock="Bottom"
Background="LightYellow">Some text at the bottom of the page.</TextBlock>
<TextBlock DockPanel.Dock="Left"
Background="Lavender">Some More Text</TextBlock>
<DockPanel Background="Bisque">
<StackPanel DockPanel.Dock="Top">
<Button HorizontalAlignment="Left"
Height="30px"
Width="100px"
Margin="10,10,10,10">Button1</Button>
<Button HorizontalAlignment="Left"
Height="30px"
Width="100px"
Margin="10,10,10,10">Button2</Button>
</StackPanel>
<TextBlock Background="LightGreen">Some Text Below the Buttons</TextBlock>
</DockPanel>
</DockPanel>
</Page>
这个例子的MyApp.xaml文件依然没有变化,但是Page1.xaml文件却增加了很多的内容。首先是布局(LayOut)的变化。[Page]元素里面的布局变为[DockPanel],而在[DockPanel]内部添加了三个[TextBlock]和一个嵌套的[DockPanel],在嵌套的[DockPanel]内部又嵌套了[StackPanel]。可见XAML的布局是可以任意的嵌套使用的。
在VS2005中安装Orcas插件之后可以通过Design看到,控件的布局,如下图所示
下面先介绍一下[DockPanel],[DockPanel]把整个布局分为4个部分,上(Top),下(Bottom),左(Left),右(Right),可以使用DockPanel.Dock="Left" 来设定控件或者子布局的位置。
例如:上例中的
<TextBlock Background="LightBlue" DockPanel.Dock="Top">Some Text</TextBlock>
指定Some Text文本位于[DockPanel]的上部;
<TextBlock DockPanel.Dock="Bottom" Background="LightYellow">Some text at the bottom of the page.</TextBlock>
指定Some text at the bottom of the page 文本位于[DockPanel]的下部;
<TextBlock DockPanel.Dock="Left" Background="Lavender">Some More Text</TextBlock>
指定Some More Text文本位于[DockPanel]的右部。
现在我们对[DockPanel]有了一些了解,那么我们的[DockPanel]的布局显示应该是下面的两个中的那种呢???
是第一张图所示的样子,原因在于我们的DockPanel.Dock="Top",定义在DockPanel.Dock="Left"的前面,如果想得到第二张图的现实,可以调整控件的声明顺序
<TextBlock DockPanel.Dock="Left"
Background="Lavender">Some More Text</TextBlock>
<TextBlock Background="LightBlue"
DockPanel.Dock="Top">Some Text</TextBlock>
<TextBlock DockPanel.Dock="Bottom"
Background="LightYellow">Some text at the bottom of the page.</TextBlock>
最后整个应用编译运行的结果如下图所示:
Page1.xaml
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<DockPanel
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<TextBlock Background="LightBlue"
DockPanel.Dock="Top">Some Text</TextBlock>
<TextBlock DockPanel.Dock="Bottom"
Background="LightYellow">Some text at the bottom of the page.</TextBlock>
<TextBlock DockPanel.Dock="Left"
Background="Lavender">Some More Text</TextBlock>
<DockPanel Background="Bisque">
<StackPanel DockPanel.Dock="Top">
<Button HorizontalAlignment="Left"
Height="30px"
Width="100px"
Margin="10,10,10,10">Button1</Button>
<Button HorizontalAlignment="Left"
Height="30px"
Width="100px"
Margin="10,10,10,10">Button2</Button>
</StackPanel>
<TextBlock Background="LightGreen">Some Text Below the Buttons</TextBlock>
</DockPanel>
</DockPanel>
</Page>
这个例子的MyApp.xaml文件依然没有变化,但是Page1.xaml文件却增加了很多的内容。首先是布局(LayOut)的变化。[Page]元素里面的布局变为[DockPanel],而在[DockPanel]内部添加了三个[TextBlock]和一个嵌套的[DockPanel],在嵌套的[DockPanel]内部又嵌套了[StackPanel]。可见XAML的布局是可以任意的嵌套使用的。
在VS2005中安装Orcas插件之后可以通过Design看到,控件的布局,如下图所示
下面先介绍一下[DockPanel],[DockPanel]把整个布局分为4个部分,上(Top),下(Bottom),左(Left),右(Right),可以使用DockPanel.Dock="Left" 来设定控件或者子布局的位置。
例如:上例中的
<TextBlock Background="LightBlue" DockPanel.Dock="Top">Some Text</TextBlock>
指定Some Text文本位于[DockPanel]的上部;
<TextBlock DockPanel.Dock="Bottom" Background="LightYellow">Some text at the bottom of the page.</TextBlock>
指定Some text at the bottom of the page 文本位于[DockPanel]的下部;
<TextBlock DockPanel.Dock="Left" Background="Lavender">Some More Text</TextBlock>
指定Some More Text文本位于[DockPanel]的右部。
现在我们对[DockPanel]有了一些了解,那么我们的[DockPanel]的布局显示应该是下面的两个中的那种呢???
是第一张图所示的样子,原因在于我们的DockPanel.Dock="Top",定义在DockPanel.Dock="Left"的前面,如果想得到第二张图的现实,可以调整控件的声明顺序
<TextBlock DockPanel.Dock="Left"
Background="Lavender">Some More Text</TextBlock>
<TextBlock Background="LightBlue"
DockPanel.Dock="Top">Some Text</TextBlock>
<TextBlock DockPanel.Dock="Bottom"
Background="LightYellow">Some text at the bottom of the page.</TextBlock>
最后整个应用编译运行的结果如下图所示:
相关文章推荐
- [Net_Ghost] WPF实例教程(6)
- [Net_Ghost] WPF实例教程(1)
- [Net_Ghost] WPF实例教程(2)
- [Net_Ghost] WPF实例教程(3)
- [Net_Ghost] WPF实例教程(5)
- 轻松Ajax.net实例教程10_ModalPopupExtender(按AjaxControlToolkit字母排序)
- Ajax开发实例教程.NET页面屏聊系统
- 在asp.net中实际应用工作流(WWF)的2个实例教程
- ASP.NET使用Memcached高缓存实例(初级教程)
- vb.net 教程 5-12 绘图实例之统计图 3 饼图
- WPF 自定义雷达图开发实例教程
- 【ASP.NET Web API教程】3.3 通过WPF应用程序调用Web API(C#)
- Asp.Net MVC WPF案例教程集合
- Discuz!NT与asp.net整合集成实例教程
- 在WinForm和WPF中使用GMap.Net地图插件简单教程
- ADO.NET 数据库实例教程
- asp.net开发实战教程 asp.net开发框架入门实例教程
- ASP.NET Web API教程 创建Admin控制器实例分享
- 轻松Ajax.net实例教程5_CascadingDropDown(按AjaxControlToolkit字母排序)
- 【ASP.NET Web API教程】3.3 通过WPF应用程序调用Web API(C#)