通过例子学习WPF开发

Learn WPF basic

一些名词：
WinFX编程模型

WinFX，Microsoft Windows的一种托管编程模型，包括.NET 2.0框架、Windows Presentation Foundation（WPF，以前命名为”Avalon”）、Windows Communication Foundation（WCF，以前命名为”Indigo”）和Windows Workflow Foundation（WWF，以前命名为”WinOE”）。

 

XAML：XAML是eXtensible Application Markup Language的英文缩写，相应的中文名称为可扩展应用程序标记语言，它是微软公司为构建应用程序用户界面而创建的一种新的描述性语言。XAML提供了一种便于扩展和定位的语法来定义和程序逻辑分离的用户界面，而这种实现方式和ASP.NET中的"代码后置"模型非常类似。

 

Windows Presentation Foundation是.NET 3.0中的一个令人感兴趣的新开发工具， 为开发基于 UI 的应用程序提供了新技术，并可以更好地使用当前的硬件和技术。

 

我们通过简单的步骤来学习体验WPF所带来的一系列改变：

第一步： XAML Pad：

WPF使用XAML来将WPF变成当中的表示层和逻辑层分离，所有的功能都可以通过编程实现，但是表示层可以用XAML来进行展现，而将事件响应处理等逻辑操作通过编程语言来实现。XAML和WPF类库紧密相关的，每种可以在XAML中使用的元素其实都是一个类，例如＜Button＞元素就与类库中的System.Windows.Controls.Button相对应。同样XAML元素的各个属性就是对应的WPF类的各个属性。正是因为上述的继承关系以及XAML中的每个元素均代表一个WPF类，所以XAML也存在一些面向对象体系结构的特性。比方说一个元素派生自另外的一个XAML元素，那么该元素将继承其父元素的特性下面是一个简单的例子：

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:sys="clr-namespace:System;assembly=mscorlib" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >

  <Button Background="Green" FontSize="24pt">

    Please....

  </Button>

</Page>
在命令行敲入xamlpad，这是WindowsSDK自带的xaml浏览工具。把上述xml键入，效果如下：



 

第三步：创建第一个简单的WPF应用程序

打开VisualStudio 2008， 新建项目，选C#project/WPF Application。 填入项目名称： WPFAppTestProject， 如图所示：

 



在设计窗口添加一个按钮，双击按钮，然后在事件响应当中键入：
        private void button1_Click(object sender, RoutedEventArgs e)

        {

            button1.Content = "Hello"+DateTime.Now.ToString();

        }

效果如下：



第四步：构建一个复杂的界面：
完善xaml为如下的代码：
<Window x:Class="WPFAppTestProject.Window1"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    Title="Window1" Height="335" Width="563" Background="Green" OpacityMask="Cyan" Foreground="Chocolate" BorderBrush="Crimson" Cursor="ScrollW">

    <DockPanel>

        <TextBlock Foreground ="Black" Margin ="5" DockPanel.Dock ="Top" FontSize ="36">Sudoku</TextBlock>

        <StackPanel DockPanel.Dock ="Left">

            <Expander IsExpanded ="True" Header="Main Menu">

                <Border Margin ="5" Padding ="10" Background ="#77FFFFFF" BorderBrush ="DimGray" BorderThickness ="1">

                    <StackPanel>

                        <Button>New Game</Button>

                        <Button>Load Game</Button>

                        <Button>Save Game</Button>

                        <Button Click ="QuitClicked">Quit</Button>

                        <TextBlock Height="21" Name="textBlock1" Width="120" />

                    </StackPanel>

                </Border>

            </Expander>

            <Expander IsExpanded ="True" Header ="New Game Settings">

                <Border Margin ="5" Padding ="10" Background ="#77FFFFFF" BorderBrush ="DimGray" BorderThickness ="1" Height="31">

                    <StackPanel>

                        <TextBlock Foreground="Black">Board Size:</TextBlock>

                        <ComboBox IsEditable ="False">

                            <ComboBoxItem IsSelected ="True">9x9</ComboBoxItem>

                            <ComboBoxItem>16x16</ComboBoxItem>

                            <ComboBoxItem>25x25</ComboBoxItem>

                            <ComboBoxItem>36x36</ComboBoxItem>

                        </ComboBox>

                    </StackPanel>

                </Border>

            </Expander>

        </StackPanel>

        <StackPanel DockPanel.Dock ="Right">

            <Expander IsExpanded ="True" Header ="Time Left">

                <Border Margin ="5" Padding ="10" Background ="#77FFFFFF" BorderBrush ="DimGray" BorderThickness ="1">

                    <StackPanel>

                        <TextBlock FontWeight ="Bold" FontSize ="36">5:15</TextBlock>

                        <TextBlock FontSize ="24">45</TextBlock>

                    </StackPanel>

                </Border>

            </Expander>

        </StackPanel>

        <Border  DockPanel.Dock="Bottom">

            <ListBox  Height ="100" >

                <ListBoxItem>

                    Placed 5 at (3,9)

                </ListBoxItem>

                <ListBoxItem>

                    Placed 1 at (2,1)

                </ListBoxItem>

                <ListBoxItem>

                    Placed 8 at (7,4)

                </ListBoxItem>

                <ListBoxItem>

                    Placed 5 at (3,9)

                </ListBoxItem>

                <ListBoxItem>

                    Placed 1 at (2,1)

                </ListBoxItem>

                <ListBoxItem>

                    Placed 8 at (7,4)

                </ListBoxItem>

                <ListBoxItem>

                    Placed 5 at (3,9)

                </ListBoxItem>

                <ListBoxItem>

                    Placed 1 at (2,1)

                </ListBoxItem>

                <ListBoxItem>

                    Placed 8 at (7,4)

                </ListBoxItem>

            </ListBox>

        </Border> {written by lirincy@163.com 林刚}

        <Canvas Margin ="5" Height="134">

            <Canvas.Background>

                <DrawingBrush>

                    <DrawingBrush.Drawing>

                        <GeometryDrawing >

                            <GeometryDrawing.Pen>

                                <Pen Brush ="Black" Thickness ="0.005"/>

                            </GeometryDrawing.Pen>

                            <GeometryDrawing.Geometry>

                                <GeometryGroup>

                                    <RectangleGeometry Rect ="0,0,1,1"/>

                                    <LineGeometry  StartPoint ="0.111,0" EndPoint ="0.111,1"/>

                                    <LineGeometry StartPoint ="0.222,0" EndPoint ="0.222,1"/>

                                    <LineGeometry StartPoint ="0.333,0" EndPoint ="0.333,1"/>

                                    <LineGeometry StartPoint ="0.444,0" EndPoint ="0.444,1"/>

                                    <LineGeometry StartPoint ="0.555,0" EndPoint ="0.555,1"/>

                                    <LineGeometry StartPoint ="0.666,0" EndPoint ="0.666,1"/>

                                    <LineGeometry StartPoint ="0.777,0" EndPoint ="0.777,1"/>

                                    <LineGeometry StartPoint ="0.888,0" EndPoint ="0.888,1"/>

                                    <LineGeometry StartPoint ="0,0.111" EndPoint ="1,0.111"/>

                                    <LineGeometry StartPoint ="0,0.222" EndPoint ="1,0.222"/>

                                    <LineGeometry StartPoint ="0,0.333" EndPoint ="1,0.333"/>

                                    <LineGeometry StartPoint ="0,0.444" EndPoint ="1,0.444"/>

                                    <LineGeometry StartPoint ="0,0.555" EndPoint ="1,0.555"/>

                                    <LineGeometry StartPoint ="0,0.666" EndPoint ="1,0.666"/>

                                    <LineGeometry StartPoint ="0,0.777" EndPoint ="1,0.777"/>

                                    <LineGeometry StartPoint ="0,0.888" EndPoint ="1,0.888"/>

                                </GeometryGroup>

                            </GeometryDrawing.Geometry>

                        </GeometryDrawing>

                    </DrawingBrush.Drawing>

                </DrawingBrush>

            </Canvas.Background>

        </Canvas>

    </DockPanel>

</Window>

界面如下

 



第五步：重现3DS文件
尝试使用3DS到xaml文件的转换，然后在xamlpad预览。
现在已经有很多3DS到XAML文件的转换工具。可以使用3DSViewer来进行3DS文件的浏览和转换。
下载后安装，然后在这里有一些3DS的样本文件，用3dsviewer加载并且显示，比如：



然后选择Export XAML to Clipboard,打开xamlpad， pastexaml到下面的panel 里面，可以看到最终的效果：