零元学Expression Blend 4 – Chapter 20 以实作案例学习Childwindow

原文:零元学Expression Blend 4 – Chapter 20 以实作案例学习Childwindow

本章将教大家如何运用Blend 4内建的假视窗原件-「ChildWindow」

ChildWindow常常运用在使用者登入、特殊警告或是其他强调式的需求功能

?

本章将教大家如何运用Blend 4内建的假视窗-「ChildWindow」

ChildWindow常常运用在使用者登入、特殊警告或是其他强调式的需求功能

?

就是要让不会的新手都看的懂!

?

最近公司需要我做一个可以让客户点击後看完资料再关闭的网页功能

完成後，我就顺便把教学也写上

(为了利益回避，以及日後不必要的麻烦，本章范例已经简化了很多东西，只留下与相关的图片及功能)

?

<假视窗-ChildWindow>

而为什麽说它是假视窗呢?

以网页为例，点击出现ChildWindow後，你的工作列并不会出现视窗钮

可以看到，在工作列上还是只有一个IE视窗

?

而且它只能存在於Sliverlight的范围内：

以Iframe的方式嵌入网页内的Sliverlight为例，ChildWindow并不能移动超过Sliverlight的范围

?

?

?

01

首先，我们来建立一个新的项目

?

选择ChildWindow

?

如何建立新的项目，先前的教学已经有介绍噜!(复习请点)

?

02

可以看到在ChildWindow直接内建一个关闭和两个Button控制项

(因为本范例不需要Button，所以我把它删掉)

?

在ChildWindow的Properties->Common Properties->Title可以更改想要显示的名字

?

03

调整成适当大小後，我们要来制作内容

为了要放入图片及文字叙述，需要切版面，请运用在Gird章节学到的版面配置来切版面

?

切好以後放入Image与TextBlock，大小设定为Auto、Margin各为5

应该会像下图

?

?

04

第一阶段初步完成了，我们来看看Xaml

		   1: <sdk:ChildWindow    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

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

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

		   4:     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 

		   5:     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 

		   6:     mc:Ignorable="d"    x:Class="MokeyCwSample.ImageChildWindow"

		   7:     Title="Hotel"

		   8:     Width="300" Height="200" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">

?

我们复制最重要的x:Class="MokeyCwSample.ImageChildWindow"内的ImageChildWindow(就是你为ChildWindow命名的档名)，等等要使用

?

接着，回到MainPage.Xaml

一样先放入一个物件(范例放置的是一张图片)

在选取Image的状态下，点选Prpperties->Event会出现一长串的事件状态

?

在事件状态MouseLeftButtonDown的输入栏点两下->进入MainPage.cs

?

如果你是纯视觉设计人员到.cs请不要害怕，我们只要加入短短的两行就大功告成了!

请在下列位置

?

打上这两行

		   1: ImageChildWindow dlg=new ImageChildWindow();

		   2:     dlg.Show();

?

只要把ImageChildWindow改成你自己命名的ChildWndow档名就大功告成啦~

?

至於这边程式怎麽来的，就不多作介绍噜!

(小猴子是设计起手的，如果想看更深入的程式教学，请看Ouch@点部落，也有影片教学唷!)

?

按下F5，来看看你的成果~

?

小秘诀：

你可以在点选ChildWindow状态下使用Prpperties->Brush->OverlayBrush

调整ChildWindow开启时背景遮盖的颜色喔!

?

?

?

?

?

附上范例专案：

?

?

本篇的教学就到此。

?

?

?

?

(若有任何错误的地方，请各位前辈或同好能不吝指教，小女子都会虚心接受；若是你喜欢我的教学，请给我点鼓励，谢谢。)

?

?

?

一步一步迈向HIE之路

喜欢我文章请推我一下或给我个回应，你的鼓励会给我无限的动力喔!

若是您有其他问题或是特别需要，请在文章回应处留言，我会尽快回覆您