EntLib.com 专业电子商务平台

基于Microsoft .Net Framework / ASP.Net / C# / AJAX 平台构建的标准电子商务系统
随笔 - 99, 评论 - 74, 引用 - 0

XAML 实例演示之二

XAML 实例演示之二
 
本文配合免费下载的Kaxaml 工具,演示XAML 的一些基本用法。关于Kaxaml 工具的介绍和下载,请参考文章:推荐一款免费下载 XAML 编辑调试工具-Kaxaml
 
XAML 系列文章为学习笔记,这是我今年春节期间安排的学习任务。

上一篇文章:
XAML 实例演示之一
 
使用DockPanel 和 Border 进行页面布局
计划将整个windows Form使用DockPanel和Border控件分为三个区域-Top/Left/Right。下面,首先定义Grid 和 DockPanel 包容器元素。
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
Title="Welcome" Height="480" Width="690">
<Grid>
 <DockPanel LastChildFill="False">
 
接下来是TOP 区域的Border控件定义:
<Border
    DockPanel.Dock="Top"
    BorderBrush="Black"
    BorderThickness="1"
    Height="70">
    <Label
    FontFamily="Verdana"
    FontSize="32"
    HorizontalAlignment="Center">EntLib.com – 开源ASP.NET/C# 技术论坛</Label>
 </Border>
 
左边区域Border 控件的定义:
<Border
 DockPanel.Dock="Left"
 BorderBrush="Black"
 BorderThickness="1"
 Width="400">
    <StackPanel>
    <Label
    FontFamily="Verdana"
    FontWeight="Bold" FontSize="18"
    HorizontalAlignment="Center">Left</Label>
    </StackPanel>
 </Border>
 
右边区域 Border 控件的定义:
<Border
 DockPanel.Dock="Right"
 BorderBrush="Black"
 BorderThickness="1"
 Width="290">
     <Image Name="imgLogo" Margin="0, 10, 0, 0" HorizontalAlignment="Center" VerticalAlignment="Top"
      Source=" http://forum.entlib.com/images/entlib.gif" Width="220" />
 </Border>
 
最后,关闭相关的控件。
</DockPanel>
</Grid>
</Window>
 
下面是通过Kaxaml 工具的运行效果图:
 
 
 
下面,进一步采用StackPanel、Label、Separator 控件实现左侧区域的效果。StackPanel 实现控件从上至下摆放,Separator控件用来进一步隔离不同的控件。
 
左侧Border 及其内部控件代码 – 请下载附件中的范例代码。
通过Kaxaml工具,范例XAML 的最终演示效果如下:
 
 

从上述范例,我们可以看到XAML具有非常强大的界面定义功能,允许我们创建复杂的界面布局和引入本地及Web资源。另外,XAML也可以设计动画,这里就不具体介绍了。

 点击下载 范例XAML文件 (73 KB)

 打印 | 评论 (3) | posted on 2009年1月24日 23:24 | 目录 [ WPF ]

评 论

# re: XAML 实例演示之二

你好;看了你的学习笔记对我的开发很有用,但是我下载了范例2后,程序无法正常运行!主要是image 里面的Source属性的路径错误!能否详细解释下这个属性的特点和作用?
谢谢!
忠诚的朋友Tim
2009/6/4 19:33 | Tim

# re: XAML 实例演示之二

Source 属性 --- 指定image 文件的路径。
2009/6/4 20:03 | entlib

# re: XAML 实例演示之二

Source属性支持相对路径吗?还是支持绝对路径?讲点理论在结合一些简单的范例,这样的效果可能回比较好!
谢谢
您忠诚的朋友Tim
2009/6/5 8:21 | Tim

发表评论

标题  
姓名  
Email
主页
评论内容   
Please add 5 and 3 and type the answer here: