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

简介: 原文:零元学Expression Blend 4 – Chapter 20 以实作案例学习Childwindow 本章将教大家如何运用Blend 4内建的假视窗原件-「ChildWindow」...
原文: 零元学Expression Blend 4 – Chapter 20 以实作案例学习Childwindow

本章将教大家如何运用Blend 4内建的假视窗原件-「ChildWindow」
ChildWindow常常运用在使用者登入、特殊警告或是其他强调式的需求功能

?

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

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

?

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

?

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

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

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

?

<假视窗-ChildWindow>

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

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

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

clip_image010

?

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

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

?

?

?

01

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

image

?

选择ChildWindow

image

?

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

?

02

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

image

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

?

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

image

?

03

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

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

image

?

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

应该会像下图

image

?

image

?

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会出现一长串的事件状态

image

?

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

image

?

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

请在下列位置

image

?

打上这两行

		 ImageChildWindow dlg=new ImageChildWindow();
		     dlg.Show();

?

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

?

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

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

?

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

?

小秘诀:

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

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

image

?

?

?

?

?

附上范例专案:

?

?

本篇的教学就到此。

?

?

?

?

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

?

?

?

一步一步迈向HIE之路

 

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

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

 

 

目录
相关文章
零元学Expression Design 4 - Chapter 6 教你如何在5分钟内做出文字立体感效果
原文:零元学Expression Design 4 - Chapter 6 教你如何在5分钟内做出文字立体感效果 又来一篇五分钟做设计啦~ 本篇将教大家如何运用Design内建工具Blend Paths...
1006 0
零元学Expression Design 4 - Chapter 3 看小光被包围了!!如何活用「Text On Path」设计效果
原文:零元学Expression Design 4 - Chapter 3 看小光被包围了!!如何活用「Text On Path」设计效果 本章将教大家如何活用「Text On Path」,做出文绕图以及...
1017 0
|
Windows 内存技术
零元学Expression Design 4 - Chapter 1 入门界面简介
原文:零元学Expression Design 4 - Chapter 1 入门界面简介 Expression Design 是Expression系列里面的一员,更是Blend跟Web的好帮手 ...
905 0
|
容器 前端开发
零元学Expression Blend 4 &ndash; Chapter 21 以实作案例学习MouseDragElementBehavior
原文:零元学Expression Blend 4 &ndash; Chapter 21 以实作案例学习MouseDragElementBehavior 本章将教大家如何运用Blend 4内建的行为注...
1222 0
零元学Expression Blend 4 - Chapter 1 缘起
原文:零元学Expression Blend 4 - Chapter 1 缘起 本来都使用Adobe相关工具从事设计工作的我,因缘际会下,接触到了Expression Blend 4,让我完全的对微软的设计工具改观。
1108 0
零元学Expression Blend 4 &ndash; Chapter 43 如何指定Childwindow PopUp位置
原文:零元学Expression Blend 4 &ndash; Chapter 43 如何指定Childwindow PopUp位置 有网友询问我有关Childwindow是否能指定弹出位置? 其实只...
1258 0
零元学Expression Blend 4 Chapter 22 以实作案例学习Frame及HyperlinkButton
原文:零元学Expression Blend 4 Chapter 22 以实作案例学习Frame及HyperlinkButton 本章将教大家如何以实作善用Blend4的内建功能-「Frame」以及「Hy...
1314 0
|
内存技术
零元学Expression Blend 4 - Chapter 5 2.5D转换的使用技巧
原文:零元学Expression Blend 4 - Chapter 5 2.5D转换的使用技巧 本章将延续上篇零元学Expression Blend4 - Chapter 4元件重复运用的观念所制作的图来进行,教你如何将图做X、Y、Z空间的延伸。
1318 0
零元学Expression Blend 4 - Chapter 30 8个Expression Blend4的快捷
原文:零元学Expression Blend 4 - Chapter 30 8个Expression Blend4的快捷 我针对工作区跟视窗的快捷键整理了八个Expression Blend4的快捷,也是...
1179 0
|
前端开发 容器
零元学Expression Blend 4 - Chapter 34 啊~!!我不要毛毛的感觉!-使用布局修整「UseLayoutRounding」
原文:零元学Expression Blend 4 - Chapter 34 啊~!!我不要毛毛的感觉!-使用布局修整「UseLayoutRounding」 本章将介绍UseLayoutRounding,中...
1239 0