none
一起学WPF系列:第一个WPF应用程序 RRS feed

  • 常规讨论

  • 本文目的:

    学习WPF项目模板,创建一个最简单的Hello Word应用,体验WPF编程模型。

    项目模板:
    在搭建好开发环境之后,打开VS2008,选择创建项目(Create Project),出现如下图所示的选择项目模板的对话框:

    从上面的图中可以看出vs2008有关WPF的项目模板(Project Template)包括:

    模板名称

    说明

    WPF Application

    使用WPF控件(WPF Control)和事件处理设计用户接口(User Interface)

    WPF Browser Application

    创建一个能在浏览器中运行的WPF应用程序

    WPF Custom Control Library

    用于创建自定义控件,自定义控件继承Control类,此模板中不能可视化设计

    WPF User Control Library

    用于创建用户控件,用户控件继承UserControl类,能可视化设计控件

     

    其中自定义控件和用户控件的区别在以后的WPF架构中会加以说明,本文暂不追究。

    创建第一个WPF应用程序

    本文在一个解决方案中创建四个项目(Project),它们分别为:

    项目名称

    项目类型

    说明

    Jillzhang.Wpf.HelloWorld

    WPF Application

    实现最简单的Hello World的WPF应用程序

    Jillzhang.Wpf.HelloWorldInBroswer

    WPF Browser Application

    实现最简单的Hello World的WPF应用程序,且该程序能在浏览器中 运行

    Jillzhang.Wpf.CustomControl

    WPF Custom Control Library

    只创建自定义控件项目,不做更改

    Jillzhang.Wpf.UserControlPrj

    WPF User Control Library

    只创建用户控件项目,不做更改

     

    着重讨论Jillzhang.Wpf.HelloWorld和Jillzhang.Wpf.HelloWorldInBroswer的创建和开发过程。

    Jillzhang.Wpf.HelloWorld

    在项目模板选择对话框中选择WPF Application,修改项目名称(Name)为:Jillzhang.Wpf.HelloWorld,和存储位置(Location),点击 确定 (OK),便成功创建了一个WPF应用程序,模板中文件层次结构如下图所示:

    其中包括四个重要的文件,有关它们的说明分别为:

    文件名称

    说明

    App.xaml

    Application的设置,通过此文件可以设置应用程序的起始文件和资源

    App.xaml.cs

    这个是App.xaml的后台文件,继承System.Windows.Application,用于描述WPF应用程序

    Window1.xaml

    一个WPF窗体的XMAL设计文件。

    Window1.xaml.cs

    Window1.xaml的后台文件,继承自System.Windows.Window,是WPF窗口的实现类

     

    在App.xaml中,指定项目运行时启动的是窗体:Window1,代码如下:

    在Window1.xaml中设计窗体的外观,本例中该窗体将窗体分为两行两列,上边一行用于窗体的说明,类似于Banner,而下面一行是一个按钮控件,点击这个按钮,出现Hello World的模式对话框。

    首先,我们将窗体的标题更改为:一起学WPF系列(2):第一个WPF应用程序,方法是在xaml中设置Window的Title属性 。下一步来分割窗体来实现两行两列的布局,在WPF中我们可以很方便的布局,本文便利用Gird将整个窗体分为两行两列,代码为:

     

    窗体布局
    <Grid> 

    <Grid.RowDefinitions> 

    <RowDefinition Height="Auto"/> 

    <RowDefinition Height="Auto"/> 

    </Grid.RowDefinitions> 

    <Grid.ColumnDefinitions> 

    <ColumnDefinition Width="Auto"/> 

    <ColumnDefinition Width="Auto"/> 

    </Grid.ColumnDefinitions> 

    </Grid> 


    然后我们分别在第一行第一列中添加一个Logo,在第二行第二列中添加一个文本描述,在第二行中添加一个按钮,代码如下:

     

    窗体元素
    <Border BorderBrush="Aqua"> 

    <StackPanel Orientation="Horizontal"> 

    <Image Source=".\Resources\wpf.jpg" Stretch="None" Grid.Column="0" Grid.Row="0"/> 

    <TextBlock Text="一起学WPF系列(2):第一个WPF应用程序" FontSize="18" Grid.Column="1" Margin="25,50,10,10"/> 

    </StackPanel> 

    </Border> 

    <Button Content="点点我" Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="2" Height="50" Margin="5,5,5,5"/> 


    此时可视化窗体效果为:

    到此窗体布局已经完成,下面来添加按钮的点击事件,如图所示,在Button标签中加入Click:

    点击New Event Handler,切换到后台.cs文件,别可以看到事件代码: "Hello World!"),我们的第一个WPF应用程序便大功告成了。看看运行效果吧:

    private void Button_Click(object sender, RoutedEventArgs e) 

    {  

    }
     


    在Button_Click中添加MessageBox.Show(

    完整的代码为:App.xaml和App.xaml.cs保持创建的时候不变。

    Window1.xaml:

     

    Window1.xaml
    <Window x:Class="Jillzhang.Wpf.HelloWorld.Window1" 

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

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

    Title
    ="一起学WPF系列(2):第一个WPF应用程序" SizeToContent="WidthAndHeight" 

    WindowStartupLocation
    ="CenterScreen"> 

    <Grid> 

    <Grid.RowDefinitions> 

    <RowDefinition Height="Auto"/> 

    <RowDefinition Height="Auto"/> 

    </Grid.RowDefinitions> 

    <Grid.ColumnDefinitions> 

    <ColumnDefinition Width="Auto"/> 

    <ColumnDefinition Width="Auto"/> 

    </Grid.ColumnDefinitions> 

    <Border BorderBrush="Aqua"> 

    <StackPanel Orientation="Horizontal"> 

    <Image Source=".\Resources\wpf.jpg" Stretch="None" Grid.Column="0" Grid.Row="0"/> 

    <TextBlock Text="一起学WPF系列(2):第一个WPF应用程序" FontSize="18" Grid.Column="1" Margin="25,50,10,10"/> 

    </StackPanel> 

    </Border> 

    <Button Content="点点我" Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="2" Height="50" Margin="5,5,5,5" Click="Button_Click"/> 

    </Grid> 

    </Window> 


    Window1.xaml.cs

     

    Window1.xaml.cs
    using System; 

    using System.Collections.Generic; 

    using System.Linq; 

    using System.Text; 

    using System.Windows; 

    using System.Windows.Controls; 

    using System.Windows.Data; 

    using System.Windows.Documents; 

    using System.Windows.Input; 

    using System.Windows.Media; 

    using System.Windows.Media.Imaging; 

    using System.Windows.Navigation; 

    using System.Windows.Shapes; 

     

    namespace Jillzhang.Wpf.HelloWorld 



    /**//// <summary> 

    /// Interaction logic for Window1.xaml 

    /// </summary> 


    public partial class Window1 : Window 



    public Window1() 



    InitializeComponent(); 

    }
     

     

    private void Button_Click(object sender, RoutedEventArgs e) 



    MessageBox.Show(
    "Hello World!"); 

    }
     

    }
     

    }
     


    而WPF在浏览器中的应用程序Jillzhang.Wpf.HelloWorldInBroswer的创建方法和Windows中的基本类似,只是将Windows更改为Page,其他的在本范例中大同小异,实现后的效果图为:

    范例项目下载:

     /Files/jillzhang/Jillzhang.Wpf.HelloWorld.rar

    结束语

    WPF博大精深,虽尽全力,也不能在短时间内就掌握其宗,其旨,作为初学者,我们只能先略懂其皮毛,然后逐渐深入,方能修成正果,本文从WPF项目模板出发,并创建了一个十分简单的WPF应用程序,并且搭配WPF浏览器应用,也算是管中窥豹,可见一斑了。唯一的希望就是能给大家的学习带来一点点参考,便足以欣慰了。

    原文:http://www.cnblogs.com/jillzhang/archive/2008/04/05/1138015.html

    2009年6月1日 2:06