zoukankan      html  css  js  c++  java
  • WPF学习笔记(03) 华丽的HelloWorld

    上次的HelloWorld根本不能发挥WPF的威力,这次我们来做一个真正体验WPF魅力的程序。不过我们要请来一款重量级的设计工具——Microsoft Expression Blend 2。

    Blend用于设计人员进行专业和复杂的界面设计工作,可以与Visual Studio相辅相成,替代Visual Studio的界面编辑器,至于程序功能设计方面依然由Visual Studio担此重任。

    1、打开工程文件

    使用上次的工程文件,对上次的HelloWorld进行界面改良。打开Expression Blend 2,在项目一页中选择项目,再选择打开项目,打开上次的解决方案文件。或者在文件菜单中选择打开项目/解决方案。

    ch03_01

    不错,我们上次设计的窗口已经显示出来了。需要留意的是左面“对象和时间线”窗格,这里列出了控件元素树(体验了UI元素的包含关系),我们可以在里面选择我们要修改的控件。右面是属性区,不要怕太复杂,其实和VS里面的属性表是基本相同的,不过提供了很多方便修改效果的工具(比如类似PS的颜色盘)。还有看到设计区滚动条旁边的设计/XAML按钮吗?这里可以在界面和代码之间进行切换。

    ch03_02

    2、修改Hello World文字效果

    大家一定注意到Hello World的TextBlock不见了,原因是我们设计了默认隐藏,我们要先把它显示出来,再添加效果。首先,在“对象和时间线”窗格选择textBlock1,然后在右面的“属性”窗格中寻找Visibility属性,然后改为Visible。如下图所示:

    ch03_03 ch03_04

    大家一定注意到我们修改一项属性后,旁边会有一个小白色方块出现,这表示这项属性在XAML代码中出现了。如果我们需要把该属性改为默认的话,只需要按这个小方块,然后选择“重置”就OK了。

    好了,现在我们要为文字添加效果了,来个发光文字怎么样?首先,我们在属性窗格,点击外观的框下面的下拉箭头,然后在BitmapEffect一栏里,点击“新建”按钮旁的下拉箭头,选择外发光,在滑出的设置框中随便设置颜色和参数吧,看看效果如何,还不错嘛。

    ch03_05 ch03_06

    3、修改窗口背景

    白白的背景不怎么好看,现在来改一改背景,但不要单调的,幸好WPF的着色支持复杂的渐变效果,这下我们可以搞些颜色丰富生动的界面了。

    首先点击空白处,选择整个Windows对象,然后再属性窗格,选择Blackground属性,下面我们将选择渐变画笔(画笔是一种着色模式)。你可以像使用PS一样定制下方的渐变条,增删滑块和修改颜色。

    ch03_07 image

    4、修改按钮的模样

    其实这个按钮还是系统按钮的老样子,能不能想一些播放器和游戏之类的软件有自己模样的按钮呢?在WPF不单可以,而且实现并不复杂,不过需要一定的XAML代码构成的知识,并且对WPF的可视化元素有一定的了解,不过时间还多着呢,可以慢慢学习嘛,我们先来给这个Button修改一段代码,让大家体会一下效果吧。

    切换到XAML代码编辑器,大家参照下面的代码修改你的界面(下面列出了Grid元素下的代码):

        <Grid>
    	<Grid.Resources>
    	    <ControlTemplate x:Key="ButtonTemplate" TargetType="{x:Type Button}">
    	      	<Border x:Name="Border" Background="White" CornerRadius="4">
    	            <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" />
    	      	</Border>
    	        <ControlTemplate.Triggers>
    	            <Trigger Property="IsMouseOver" Value="True">
    	         	<Setter TargetName="Border" Property="Background" Value="Gold" />
    	            </Trigger>
    	            <Trigger Property="IsPressed" Value="True">
    	         	<Setter TargetName="Border" Property="Background" Value="Orange" />
    	            </Trigger>
    	      	</ControlTemplate.Triggers>
    	    </ControlTemplate>
    	</Grid.Resources>
            <TextBlock Margin="103,64,107,0" Name="textBlock1" Text="Hello, World!!" FontSize="24" TextDecorations="None" VerticalAlignment="Top" Visibility="Visible" >
            	<TextBlock.BitmapEffect>
            		<OuterGlowBitmapEffect GlowColor="#FF73F2FF" GlowSize="12" Opacity="0.795"/>
            	</TextBlock.BitmapEffect>
            </TextBlock>
            <Button Height="37" Margin="103,0,118,47" Name="button1" VerticalAlignment="Bottom" Click="button1_Click" Template="{StaticResource ButtonTemplate}" FontSize="18" FontWeight="Bold">Say Hello</Button>
        </Grid>

    切换回设计界面,怎么样,虽然这个按钮比较简单,不怎么好看,但至少改变了那个老模样了,花点心思还是可以做出漂亮的按钮的。

    ch03_08

    5、添加动画效果

    这个效果就震撼了,WPF有Storyboard功能,帮助大家构建复杂的动画效果,以前编程序,搞个动画效果像登天般困难,现在可以像做Flash动画那样做了。不会Flash?不用怕,一下子就可以上手了。

    我们需要做到的是,在点击按钮后,出现HelloWorld,为了让这个过程更加动态和柔和,我们建立像PowerPoint的文字渐现上升效果。首先点击目标button1,因为这个是动画触发器。在左上角的“触发器”框中点击“+事件”。选择在引发button1 Click时,然后点击右面的“+”号添加新的操作。这是Blend会询问你是否需要新建故事板(storyboard)。故事板是所有UI元素活动的时间线,可以看作“一场动画”。确定后元素树的时间线出现了,如下图所示。

    ch03_09 ch03_10

    我们现在开始建立动画。建立动画的基本要领就是确定关键帧,然后在关键帧上设置对象的外观属性,关键帧与关键帧之间的过程是属性值渐变的过程。对于设计者而言,设计后关键帧就行了,中间的过程变化将会由程序自动生成。如果你有Flash动画制作经验的话,这个简直小菜一碟。

    如下图所示,我们点击时间旁边的image 再开始的时候添加一个关键帧。然后把HelloWorld往下移动一点,然后把外观属性框中的Opacity(透明度)属性调到0%。

    ch03_11 ch03_12

    接着拖动时间线里面黄色拉杆上的三角形,在1秒的位置新建一个关键帧,然后点击这个关键帧的椭圆小标记。拖动HelloWorld上移一点(虽然看不见,但仍可以拖动,会出现蓝色边框作为标记),然后把外观属性框中的Opacity(透明度)属性调到100%。

    ch03_13 ch03_14

    动画建立完毕了,可以点击时间线上的播放按钮预览动画。最后点击+号旁边的image 关闭时间线。

    6、运行

    最后我们还需要把textBlock的Visibility属性,然后改为Hidden。这样就完成了。

    激动人心的时刻终于来临了,快点按F5,进行调试运行。怎么样,这个HelloWorld够华丽的嘛!

    7、一点说明

    有没有试过在使用Blend时,切换会Visual Studio,它会马上询问你是否更新代码或者界面。对,两个工具是可以互相更新的,确保同时修改一个项目时不会出现混乱。
    源文件可以在这里下载:Masson_WPF_02HelloWorld_v2_source.rar


    作者:Meteor
    出处:http://www.cnblogs.com/osmeteor/
    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

    如果您看了本篇博客,觉得对您有所收获,请点击右下角的 [推荐]

  • 相关阅读:
    虚继承virtual public
    My first blog
    mybatis(一)SqlSessionFactory初始化
    dubbo
    设计模式
    基本算法
    redis
    spring cloud eureka
    spring boot
    spring MVC
  • 原文地址:https://www.cnblogs.com/osmeteor/p/2716487.html
Copyright © 2011-2022 走看看