Windows phone8 基础篇（3）常用控件开发

2013-04-02

Windows phone8 基础篇（三）常用控件开发广告：为了方便我们大家一起学习和讨论，我开设了一个群300143953。

Windows phone8 基础篇（三）常用控件开发

广告：为了方便我们大家一起学习和讨论，我开设了一个群300143953。专门关于windows phone开发学习的群。因为群刚建，所以没人。欢迎大家。另外如果出现啥错误性的问题，希望大家能够指出。毕竟我也是刚刚接触。

Windows phone8 系统中为我们开发提供了丰富的可视化控件，有些控件跟silverlight中的控件大同小异。比如说button等。有些是独有的，比如说菜单栏。那么基于此，我们首先要了解一下在windows Phone UI中，他的继承体系是啥样的。

那么在windows Phone控件中，有哪些基类，这些基类都有啥样的关系呢？这些就让我慢慢去研究一下。

在微软提供的开发文档中介绍，在phone开发中，大部分UI控件都直接或者间接继承了三个基类，分别是：

|-----System.Windows.UIElement;

|---------System.Windows.FrameworkElement;

|--------System.Windows.Controls,Control;

上述图解呢，是他的一个基本的继承系统，那么他的原始继承体系应该如图：

|--System.Windows.Controls.Control

挨个介绍一下这三个基类吧：

1.System.Windows.UIElement:

UIElement 中常用的属性和方法：这里列举的都为常用的（详细参照http://msdn.microsoft.com/zh-cn/library/system.windows.uielement.aspx）

构造函数

名称

说明

UIElement

初始化 UIElement 类的新实例。

属性

名称

说明

CacheMode

获取或设置 UIElement中缓存的表示形式。这个是指应该在高速缓存时呈现的内容。

Clip

获取或者设置用于定义UIElement的内容便可的Geometry.

DesiredSize

获取在布局测量处理过程中计算的此元素处理的大小。

Dispatcher

获取与此 DispatcherObject 关联的 Dispatcher。（继承自 DispatcherObject。）

Effect

获取或设置位图效果应用于 UIElement。这是依赖项属性。(像素着色器)

Focusable

获取或设置一个值元素是否可以接收焦点。这是依赖项属性。

IsEnabled

获取或设置指示此元素是否显示的值。默认为true，显示UI

IsEnabledCore

获取成为 IsEnabled 的返回值在派生类中的值。

IsFocused

简单理解一下就是是否获取焦点。

IsHitTestVisible

个人理解应该是获取或者设置是否为可选区域

Opacity

获取或者设置对象的透明度

OpacityMask

设置或者获取用于改变此区域的不透明的画笔

Projection

获取或者设置呈现在UIElement时要应用的三维特效

RenderSize

获取 (或设置，但是，查看 " 备注 ") 最终呈现此元素的范围。

RenderTransform

获取或设置变换影响此元素的呈现位置的信息。这是依赖项属性。

RenderTransformOrigin

获取或设置中心点任何可能呈现声明由 RenderTransform，相对于元素的区域。相当于ELEment的边界

UseLayoutRounding

获取或者设置一个值，该值确定对象及其可视化子树的呈现是否应使用将呈现与整像素对其的舍入行为

Visibility

获取或设置此元素的用户界面 (UI) 可见性。这是依赖项属性。

事件

名称

说明

OnGotFocus

元素获取到焦点时发生

OnKeyDown

当元素具有焦点的情况下，按下键盘上的某个键发生

OnKeyUp

当元素具有焦点的情况下，释放键盘上的某个键发生

OnLostFocus

元素失去焦点

OnLostMouseCapture

当元素失去鼠标捕获时发生

OnManipulationCompleted

对于元素的操作和延时完毕时发生

OnManipulationDelta

当输入设备在操作期间更改位置时发生

OnManipulationStarted

当输入设备对元素进行操作时发生

OnMouseDown

鼠标按下的时候发生

OnMouseEnter

当鼠标或者触笔进入元素的边界的时候发生

OnMouseLeave

当鼠标或者触笔离开元素的边界时候发生

OnMouseLeftButtonDown

当鼠标左键或者触笔箭接触到table并且鼠标指针悬停在UI上时发生

OnMouseLeftButtonUp

当鼠标左键或者触笔箭从原来接触到table的离开在UI上时发生

备注

UIElement 提供元素的布局属性的起点，并显示派生类可以重写，这可能会影响呈现元素及其子元素的行为的格式的虚方法。

许多输入和集中的行为的元素 UIElement 类还通常定义。这包括键盘、鼠标和触笔输入和相关状态属性的事件。其中的许多事件是路由事件，因此，许多输入相关的事件具有路由版本以及事件的隧道版本冒泡。这些配对的事件通常为事件最大的相关控件作者。

UIElement 还包括与 WPF 事件模型相关的 API ，包括可能引发指定的路由事件从组件实例是源的方法。根据体系结构， UIElement 可被视为大体上等效于编程或组件在动态 HTML (DHTML) 编程的 Win32 的窗口句柄。 UIElement 是基本元素。 WPF 核心级别。

UIElement 具有专门由 UIElement 类定义的以下功能:

可以呈现为子元素 (UIElement 从 Visual，高级图形类) 派生

包含用于大小以及定位 UIElement 可能的子元素的逻辑 (在解释由布局系统)

可以响应用户输入 (包括命令控件输入获取发送到将它们处理事件路由的位置或路由)

可以引发朝着路由逻辑元素树的路由事件

支持动画系统的某些方面

2.System.Windows.FrameworkElement:

FrameworkElement 是在 UIElement生成的框架级别的 WPF 实现类，并添加具有 WPF 框架级别的特定交互。他为silverlight布局中设计的对象提供公共的API框架。它还定义在silverlight中与数据绑定，对象树和对象生命周期功能区域相关的API。它扩展了UIELement并添加了布局和数据绑定的两大重要功能。FrameworkElement 添加和定义以下功能:

附加的结构特定布局特征

为更丰富的元数据来报告特性

特定输入基类的类特定实现及其附加属性或附加事件

样式支持

进一步动画支持

在frameworkElement引入的主要策略是布局，他在UIElement引入的基本布局协议上生成，并且增加了布局插槽的概念，使布局可以方便的拥有一组面向对象的一致的布局语义。这个简单理解一下呢就是相当于可以创建一个base基类。

在frameworkElement引入的两个关键的内容是数据绑定和样式，直接或者间接继承它的控件将可以使用空间的数据绑定的功能和自定义样式的功能。

使用它的数据绑定可以通过一种简单的方式表达，将给定元素中的一个多着多个属性绑定到一个数据片段，数据绑定中最值得关注的应该就是数据模板。可以声明指定某个数据片段的可视化方式。可以将问题换个方向，让数据确定要创建的现实内容，如listview，我的理解是这样的。

样式实际上是轻量级的数据绑定，使用样式，可以将共享定义的一组属性绑定到元素的一个或者多个实例。可以通过style属性来设置。也可以通过类型隐式关联。那么在UIElement属性和事件中，它又新增了那些常用的属性和事件呢？下边让我们一一看一下：

构造函数

名称

说明

FrameworkElement

初始化 FrameworkElement 类的新实例。

属性

名称

说明

ActualHeight

获取呈现的高度此元素。

ActualWidth

获取此元素的呈现宽度。

Cursor

获取或设置显示的光标鼠标指针何时在此元素。

DataContext

，它将参与数据绑定时，获取或设置元素的数据上下文。

Height

获取或设置元素的建议的高度。

HorizontalAlignment

，当在一个父元素内组成，例如面板或项控件时，获取或设置的水平对齐特性应用于此元素。

Language

获取或设置本地化/全球化应用于元素的语言信息。

Margin

获取或设置元素的外缘。

MaxHeight

获取或设置元素的最大高度约束。

MaxWidth

获取或设置元素的最大宽度约束。

MinHeight

获取或设置元素的最小高度约束。

MinWidth

获取或设置元素的最小宽度的约束。

Name

获取或设置元素的标识的名称。该名称提供引用，以便代码隐藏中，例如事件处理程序代码，可以引用标记元素，则构造在处理过程由 XAML 处理器后。

Parent

获取此元素的逻辑父级元素。

Resources

获取或设置本地定义的资源字典。

Style

，在呈现时，获取或设置此元素使用的样式。

Tag

获取或设置可用于存储有关此元素的自定义信息的任意对象的值。

Triggers

获取子元素中建立的直接此元素，或触发器的集合。

VerticalAlignment

，当在一个父元素中构成例如面板或项控件时，获取或设置的垂直对齐特性应用于此元素。

Width

获取或设置元素的宽度。

事件

名称

说明

ContextMenuClosing

，在元素的所有上下文菜单关闭之前，发生。

ContextMenuOpening

，打开时，发生在元素的所有上下文菜单。

Initialized

，在此 FrameworkElement 初始化，发生。此事件与 IsInitialized 属性的值从 false 更改的情况下进行匹配 (或未定义) true。

LayoutUpdated

，在各种可视化元素的格式与当前 Dispatcher 更改，发生。（继承自 UIElement。）

Loaded

发生，当元素进行布局，呈现时，对交互准备。

LostFocus

，在此元素失去逻辑焦点，发生。（继承自 UIElement。）

RequestBringIntoView

，当 BringIntoView 在此元素，发生。

SizeChanged

，当 ActualHeight 或 ActualWidth 属性更改此元素，的值发生。

SourceUpdated

，当源值为绑定，此元素的所有现有属性发生更改。

Unloaded

，当元素移除加载的组件的内部，元素树发生。

3.System.Windows.Controls.Control

Control表示用户界面元素的基类。这些元素使用ControlTemplate来定义其外观。Control类是添加到应用程序中的许多控件的基类，该类很少定义行为，大多都是外观。

Template属性是一个ControlTemplate,可以指定Control的外观，silverlight附带的许多控件使用ControlTemplate并继承自Control.如果要更改控件的外观并保留其功能，应考虑创建新的ControlTemplate而不是新的类。

如果要创建具有自定义行为的控件并允许其他人自定义控件的外观，则创建的控件可以从Control类继承并定义一个ControlTemplate，如果要扩展现有控件的行为，可以从继承自Control的类继承。简单说就是继承那个Control类的子类。

那么Control类在原有的父类基础上又增加了那些属性和方法呢：

属性

名称

说明

Background

获取或设置描述控件的背景的画笔。

BorderBrush

获取或设置描述控件的边框的背景画笔。

BorderThickness

获取或设置控件的边框粗细。

DefaultStyleKey

使用时，主题样式或定义时，获取或设置键使用引用此控件的样式。（继承自 FrameworkElement。）

FontFamily

获取或设置控件的字体系列。

FontSize

获取或设置字号。

FontStretch

获取或设置字体在屏幕上以及或展开的程度。

FontStyle

获取或设置字体样式。

FontWeight

获取或设置指定的字体的权重或粗细。

Foreground

获取或设置描述前景色的画笔。

HorizontalContentAlignment

获取或设置控件内容的水平对齐。

IsEnabled

获取或设置指示此元素是否的值。用户界面 (UI)启用。这是依赖项属性。（继承自 UIElement。）

IsEnabledCore

获取成为 IsEnabled 的返回值在派生类中的值。（继承自 UIElement。）

IsFocused

获取该值来确定该元素是否有逻辑焦点。这是依赖项属性。（继承自 UIElement。）

Padding

获取或设置控件中的空白。

TabIndex

获取或设置使用 tab 键时，确定顺序接收焦点的元素的值，当用户将控件定位。

Template

获取或设置控件模板。

VerticalContentAlignment

获取或设置控件内容的垂直对齐方式。

事件

IsEnabledChanged

当 IsEnabled 属性的值在此元素的更改，发生。（继承自 UIElement。）

介绍完三大基类以后，再来看看常用的控件

4.常用控件

1. Button

Button(按钮。最常见的就是百度上的“百度一下”那个按钮)。是单击之后要触发事件的控件。代表button的类是System.Windows.Controls.Button.该控件在xaml中的语法如下：

<Button 属性 ...">显示的名字</Button>

他的最大的作用是实现其单击的操作，单击后将会引发一个Click事件，通过设置Click属性来完成对这个事件的处理。比如设置他的属性为Click=”test”,那么在页面上就会生成出一个test的方法。该事件有三种状态：按压（press）；悬停（hover）；释放（Release）。通过设置ClickMode属性来控制annual在那种状态下执行click事件。

示例代码

1. 在悬停状态下单击事件

<Button Height="72" HorizontalAlignment="Left" Margin="46,47,0,0" Name="button"

VerticalAlignment="Top" Content="悬停单击"

Width="364" Click="Button_Click_1" ClickMode="Release"></Button>

private void Button_Click_1(object sender, RoutedEventArgs e){

text1.Text = "Hello word";}

2. 创建一个图片按钮

<Button Height="72" HorizontalAlignment="Center" Margin="102,234,183,134" Name="button1"

VerticalAlignment="Center" Width="364" ClickMode="Release">

</StackPanel>

</Button>

3. 设置按钮的样式

<!--Content 名字 FontSize="48" 字体大小 FontStyle="Italic" 斜体

Foreground="Blue" 字体颜色 BorderBrush="Yellow" 边框颜色

BorderThickness="10" 边框宽度大小 Padding="20" 内边框宽度大小

HorizontalAlignment="Center" VerticalAlignment="Center" 水平竖直居中显示

Margin="63,166,86,269" 显示位置 Width="307" 宽度 Height="172" 高度 -->

2. Textblock

Textblock是用于显示少量文本的轻量级控件，最简单的举例就是当我们登陆QQ的时候，在输入框前边有一堆字符提示，比如说”QQ号” “密码”，这些就是传说中的textblock标签。他在xaml中的语法如下：

<TextBlcok > 显示字体(类似于Context)</TextBlcok>

Textblock常用到的属性如下：

Fontfamily 字体名称，可以设置为多种字体。

FontSize 字体大小

FontStyle 字体样式

FontWeight 字体的粗细

Foreground 字体的前景颜色

Width 文字区域的宽度

Height 文字区域的高度

Opacity 文字的透明度

Text 显示内容

TextWrapping 字体自动换行

示例代码

3. TextBox

这个就相当于QQ登陆时候的输入框。该控件在xaml的表现形式如下：

TextBox这个可以是一行，也可以多行。那么多行的时候需要设置的属性是textWrapping为wrap。如果需要带左右滚动条，需要设置：HorizontalScrollBarVisibility或者VerticalScrollBarVisibility.除了这几个在textbox中最常用的属性如下（详情请参照http://msdn.microsoft.com/zh-cn/library/system.windows.controls.textbox.aspx）：

名称

说明

AcceptsReturn

获取或设置一个值编辑控件的文本如何响应，当用户按 enter 键。（继承自 TextBoxBase。）

CaretBrush

获取或设置用于绘制文本框的插入符号的画笔。（继承自 TextBoxBase。）

HorizontalContentAlignment

获取或设置控件内容的水平对齐。（继承自 Control。）

InputScope

获取或设置此 FrameworkElement使用输入的上下文。（继承自 FrameworkElement。）

IsReadOnly

获取或设置一个值编辑控件的文本是否是只读到与控件的用户。（继承自 TextBoxBase。）

MaxHeight

获取或设置元素的最大高度约束。（继承自 FrameworkElement。）

MaxLength

获取或设置可中手动输入文本框的最大字符数。

MaxLines

获取或设置可见的行的最大数目。

Resources

获取或设置本地定义的资源字典。（继承自 FrameworkElement。）

SelectedText

获取或设置当前的选定内容在文本框中。

SelectionBrush

获取或设置显示选定文本的画笔。（继承自 TextBoxBase。）

SelectionLength

获取或设置一个字符数在当前选定的值在文本框中。

SelectionOpacity

获取或设置 SelectionBrush的不透明度。（继承自 TextBoxBase。）

SelectionStart

获取或设置当前选择的开头的字符索引。

Text

获取或设置文本框的文本内容。

TextAlignment

获取或设置文本框的内容的水平对齐。

TextDecorations

获取文本修饰应用于文本框。

TextWrapping

获取或设置文本框应如何换行文本。

VerticalScrollBarVisibility

获取或设置一个值垂直滚动条是否显示。（继承自 TextBoxBase。）

示例代码

自动折行，并且捕获textbox内容变化事件：

<TextBox.RenderTransform>

</TextBox.RenderTransform>

</TextBox>

private void TextBox_SizeChanged_1(object sender, SizeChangedEventArgs e)

{

test.Text = "我正在被修改";

}

4. Border

边框是指在另一个对象的周围绘制边框，背景或者同事绘制二者的控件,在xaml中的语法如下：

<Border> 子控件对象 </Border>

Border控件通常会是其他空间的一个外观显示的辅助控件，它很少单独使用。一般都是一个组合。一个border中只能包含于一个子对象。如果想要在多个对象中放置一个边框，则要添加容器，如面板stackpanel.

常用的方法如下：

BorderBrush 获取或者设置用于创建边框的brush；

BorderThickness 或者或者设置边框的粗细

Child 或者或者设置要在其周围ie绘制边框的子元素

Padding 获取或者设置边框与子对象之间的距离

示例代码

椭圆形边框按钮：

</Border>

单击后显示的边框：

<Border.BorderBrush>

</Border.BorderBrush>

</Border>

private void Button_Click_1(object sender, RoutedEventArgs e){

//设置边框的透明度为100%

textbr.BorderBrush.Opacity = 1;

}

5. 超链接（HyperlinkButton）

超链接控件，该控件在xaml中的格式如下：

该类继承自buttonBase。大部分特性和button是一样的。不过他多了一个NavigateUri的属性，通过URI的绝对地址或者是相对地址赋值给NavigateUri属性，就可以轻松实现定位。如果URI设置的为外部网页，则可以使用targetName的属性指定应在其中打开页面的目标窗口或者框架。如果URI设置为同一个应用程序中的内容，可以使用targetName属性指定要到行道的对象的名称，不必处理HyperlinkButton的单击事件，就可以定位到。

示例代码

打开网页和应用程序的其他页面

6. 单选按钮

RadioButton是一个单选按钮的控件，比如选择男女的时候就会用到。用户可以从一组数据中选择一个出来。控件在xaml语法如下：

示例代码

性别的选择：

<RadioButton Content="男" HorizontalAlignment="Left" Margin="62,370,0,0" Name="boy"

VerticalAlignment="Top" IsChecked="true" GroupName="sex"/>

注意：他们是使用GroupName来分组，使用IsChecked来确认是否选中。

7. 复选框

checkBox，用于表示用户可以选中或者是不选中的按钮。在xaml语法如下;

<CheckBox.../>

checkBox允许用户从选项卡里多选，不互相排斥。他继承自ToggleButton，具有三种状态：选中，未选中，不确定。他是通过IsThreeState属性来获取或者设置指示控件是支持两种状态还是三中状态的值，通过IsCheckedz属性来获取或者设置是否选中了复选框。需要注意的是，如果IsThreeState属性设置为true，则IsChecked属性将会为选中或者不确定状态返回true。

示例代码

判断Checkbox是否被选中

<CheckBox x:Name="chk_one" Content="CheckBox" HorizontalAlignment="Left"

Foreground="Orange" FontFamily="Geogia" Margin="34,56,0,0" VerticalAlignment="Top" />

<CheckBox x:Name="chk_two" Content="CheckBox" HorizontalAlignment="Left" IsChecked="true"

Checked="chk_two_Checked_1" Unchecked="chk_two_Unchecked_1" Margin="30,112,0,0" VerticalAlignment="Top"/>

private void chk_two_Checked_1(object sender, RoutedEventArgs e){

//为了程序的健壮性，先判断是否为空，因为首次显示是不被初始化

if (chk_one != null)

chk_one.Content = "checked";

}

private void chk_two_Unchecked_1(object sender, RoutedEventArgs e){

if (chk_one != null)

chk_one.Content = "checked";

}

8. 进度条

progressBar,表示一个知识操作进度的控件。在xaml中只有一种表现形式：

progressBar有两种模式，重复模式和非重复模式。他是有属性IsIndeterminate来确定。这两种模式的特点：

1. 重复模式

IsIndeterminate为true时是重复模式。当无法确定其需要等待的时间或者无法计算等待的进度情况，比较适合使用。他就是有几个点儿重复徘徊选中；

2. 非重复模式

为false时是非重复模式，这个是需要根据值哎填充。当可以确定执行任务的时间或者跟踪完成任务的进度情况时，适合使用。他里边minimum和maximum属性来指定范围，默认是0到100.通过valuechanged监控数据的变化。通过value来设置。

使用非重复模式的进度条时，通常需要使用System.ComponentModel.BackgroundWorker类来配合使用。Backgroundworker类允许在单独的专用线程上进行操作，耗时的操作在长时间运行可能导致用户界面的停顿或者是卡屏，这时候就可以使用哪个类方便的解决。如果要在后台执行耗时的操作，可以创建一个backgroundWorker,监听那些报告操作进度并操作完成时发出信号的事件。若要设置后台操作，可以为DoWork事件添加一个事件处理程序。在该程序中调用耗时的操作，虚构要启动，可以使用RunWorkerAsync.若要受到进行更新通知，可以对progressChanged和Ru你workerCompleted事件与用户界面进行通信。Backgroundworker事件不夸appdomain边界进行处理。不能使用它在多个appDomain中执行多线程操作。如果后台需要参数，可以调用RunWoorkerAsync时，给出参数，在Dowork时间处理程序内部，可以从DoworkEventArgs.Argument属性中提取参数。backgroundWorker常用的属性和方法如下：

属性

名称

说明

CancellationPending

获取一个值，指示应用程序是否已请求取消后台操作。

Container

获取 IContainer，它包含 Component。（从 Component 继承。）

IsBusy

获取一个值，指示 BackgroundWorker 是否正在运行异步操作。

Site

获取或设置 Component 的 ISite。（从 Component 继承。）

WorkerReportsProgress

获取或设置一个值，该值指示 BackgroundWorker 能否报告进度更新。

WorkerSupportsCancellation

获取或设置一个值，该值指示 BackgroundWorker 是否支持异步取消。

方法

名称

说明

Disposed

添加事件处理程序以侦听组件上的 Disposed 事件。（从 Component 继承。）

DoWork

调用 RunWorkerAsync 时发生。

ProgressChanged

调用 ReportProgress 时发生。

RunWorkerCompleted

当后台操作已完成、被取消或引发异常时发生。

3. 示例代码

创建重复模式和非重复模式

<ProgressBar Height="56" HorizontalAlignment="Left" Name="progressBar1" VerticalAlignment="Top" Width="462"

IsIndeterminate="true" Margin="0,443,0,0" />

</Grid>

.cs文件

using System.Windows;

using Microsoft.Phone.Controls;

using System.Threading;

using System.ComponentModel;

namespace ProgressBarDemo

{

public partial class MainPage : PhoneApplicationPage

{

//定义一个后台处理类

private BackgroundWorker backgroundWorker;

public MainPage()

{

InitializeComponent();

//第一次进入页面，设置进度条为不可见

progressBar1.Visibility = System.Windows.Visibility.Collapsed;

}

private void begin_Click(object sender, RoutedEventArgs e)

{

//设置进度条为可见

progressBar1.Visibility = System.Windows.Visibility.Visible;

if (radioButton1.IsChecked == true)

{

//设置进度条为不可重复模式

progressBar1.IsIndeterminate = false;

//创建一个后台处理类的对象

backgroundWorker = new BackgroundWorker();

//调用 RunWorkerAsync后台操作时引发此事件，即后台要处理的事情写在这个事件里面

backgroundWorker.DoWork += new DoWorkEventHandler(backgroundWorker_DoWork);

//当后台操作完成事件

backgroundWorker.RunWorkerCompleted += new RunWorkerCompletedEventHandler(backgroundWorker_RunWorkerCompleted);

//当处理进度（ReportProgress）被激活后，进度的改变将触发ProgressChanged事件

backgroundWorker.ProgressChanged += new ProgressChangedEventHandler(backgroundWorker_ProgressChanged);

//设置为可报告进度情况的后台处理

backgroundWorker.WorkerReportsProgress = true;

backgroundWorker.RunWorkerAsync();

}

else

{

//设置进度条的值为0

progressBar1.Value = 0;

//设置进度条为重复模式

progressBar1.IsIndeterminate = true;

}

private void cancel_Click(object sender, RoutedEventArgs e)

{

//隐藏进度条

progressBar1.Visibility = System.Windows.Visibility.Collapsed;

}

//进度改变处理

void backgroundWorker_ProgressChanged(object sender, ProgressChangedEventArgs e)

{

Dispatcher.BeginInvoke(() =>

{

//把进度改变的值赋值给progressBar1进度条的值

progressBar1.Value = e.ProgressPercentage;

}

);

}

//后台操作完成

void backgroundWorker_RunWorkerCompleted(object sender, RunWorkerCompletedEventArgs e)

{

Dispatcher.BeginInvoke(() =>

{

//隐藏进度条

progressBar1.Visibility = System.Windows.Visibility.Visible;

}

);

}

//后台操作处理

void backgroundWorker_DoWork(object sender, DoWorkEventArgs e)

{

for (int i = 0; i < 100; i++)

{

i += 20;

//赋值当前进度的值，同时会触发进度改变事件

backgroundWorker.ReportProgress(i);

//为了能看到进度条的变化效果，这里用进程暂停了1秒

Thread.Sleep(1000);

}

9. 滚动区域

Scrollviewer控件表示可包含其他可见元素的可滚动区域，程序界面中的内容通常比手机屏幕的课显示区域大，利用这个控件可以方便的适用程序中的内容具备滚动功能，在xaml语法如下：

Scrollviewer封装一个内容元素和若干个scrollbar控件(最多两个)，范围包括Scrollviewer的所有内容。可容的可见区域为视区。HorizontalscrollBarVisibility和verticalscrollbarvisibility属性分别控制垂直和水平的scrollbar控件出现的条件。如果他们设置为hidden，则可以在代码中使用ComputedHorizontalScrollBarVisibilityProperty和ComputedVerticalScrollBarVisibilityProperty,以便发现其在运行时的实际状态。Scrollviewer控件是针对于大内容控件的布局控件，例如textbox多行显示的时候。因为他里边就支持一个子控件，所以通常和Stackpanel,Canvas,grid相互配合使用。Scrollviewer常用的属性如下：

ComputedHorizontalScrollBarVisibility

获取一个值，该值指示水平 ScrollBar 是否可见。

ComputedVerticalScrollBarVisibility

获取一个值，该值表示垂直 ScrollBar 是否可见。

ExtentHeight

获取 ScrollViewer 中显示的所有内容的垂直大小。

ExtentWidth

获取 ScrollViewer 中显示的所有内容的水平大小。

HorizontalScrollBarVisibility

获取或设置一个值，该值指示是否应显示水平 ScrollBar。

ScrollableHeight

获取一个表示可滚动区域的垂直大小的值，或一个表示范围高度和视区高度差别的值。

ScrollableWidth

获取一个表示可滚动区域的水平大小的值，或一个表示范围宽度和视区宽度差别的值。

VerticalAlignment

获取或设置在父对象（如面板或项控件）中构成 FrameworkElement 时应用于此元素的垂直对齐特征。（继承自 FrameworkElement。）

VerticalContentAlignment

获取或设置控件内容的垂直对齐方式。（继承自 Control。）

VerticalOffset

获取一个值，该值包含滚动内容的垂直偏移量。

VerticalScrollBarVisibility

获取或设置一个值，该值指示是否应显示垂直 ScrollBar。

ViewportHeight

获取一个值，该值包含可见内容的垂直大小。

ViewportWidth

获取一个值，该值包含可见内容的水平大小。

Visibility

获取或设置 UIElement 的可见性。不可见的 UIElement 不呈现，也不将其所需大小告知布局。（继承自 UIElement。）

示例代码

创建一个scrollviewer控件来存放一张大图，然后可以在空间内可以来回上下左右拖动查看

</StackPanel>

</ScrollViewer>

创建多张图片，可以向上向下滚动的图片;

</Grid>

using System;

using System.Windows;

using System.Windows.Controls;

using Microsoft.Phone.Controls;

using System.Windows.Threading;

using System.Windows.Media.Imaging;

namespace ScrollViewerDemo

{

public partial class MainPage : PhoneApplicationPage

{

//往下滚动的定时触发器

private DispatcherTimer tmrDown;

//往上滚动的定时触发器

private DispatcherTimer tmrUp;

public MainPage()

{

InitializeComponent();

//添加图片到ScrollViewer里面的StackPanel中

for (int i = 0; i <= 30; i++)

{

Image imgItem = new Image();

imgItem.Width = 200;

imgItem.Height = 200;

//4张图片循环添加到StackPanel的子节点上

if (i % 4 == 0)

{

imgItem.Source = (new BitmapImage(new Uri("a.jpg", UriKind.Relative)));

}

else if (i % 4 == 1)

{

imgItem.Source = (new BitmapImage(new Uri("b.jpg", UriKind.Relative)));

}

else if (i % 4 == 2)

{

imgItem.Source = (new BitmapImage(new Uri("c.jpg", UriKind.Relative)));

}

else

{

imgItem.Source = (new BitmapImage(new Uri("d.jpg", UriKind.Relative)));

}

this.stkpnlImage.Children.Add(imgItem);

}

//初始化tmrDown定时触发器

tmrDown = new DispatcherTimer();

//每500毫秒跑一次

tmrDown.Interval = new TimeSpan(500);

//加入每次tick的事件

tmrDown.Tick += tmrDown_Tick;

//初始化tmrUp定时触发器

tmrUp = new DispatcherTimer();

tmrUp.Interval = new TimeSpan(500);

tmrUp.Tick += tmrUp_Tick;

}

void tmrUp_Tick(object sender, EventArgs e)

{

//将VerticalOffset -10 将出现图片将往上滚动的效果

scrollViewer1.ScrollToVerticalOffset(scrollViewer1.VerticalOffset - 10);

}

void tmrDown_Tick(object sender, EventArgs e)

{

//先停止往上的定时触发器

tmrUp.Stop();

//將 VerticalOffset +10 将出现图片将往下滚动的效果

scrollViewer1.ScrollToVerticalOffset(scrollViewer1.VerticalOffset + 10);

}

//往上按钮事件

private void btnUp_Click(object sender, RoutedEventArgs e)

{

//先停止往下的定时触发器

tmrDown.Stop();

//tmrUp定时触发器开始

tmrUp.Start();

}

//往下按钮事件

private void btnDown_Click(object sender, RoutedEventArgs e)

{

//tmrDown定时触发器开始

tmrDown.Start();

}

//停止按钮事件

private void stop_Click(object sender, RoutedEventArgs e)

{

//停止定时触发器

tmrUp.Stop();

tmrDown.Stop();

}

10. 列表框

Listbox是指包含可选项列表。在xaml语法中如下：

Listbox是一个现实项集合的控件，一次可以显示多个listbox中的多个项，可以使用selectionMode互相指定listbox是否允许多选，listbox是itemsControl的子类，可以使用items或者是itemssource属性设置其内容，可以直接填充listbox控件，也可以将空间绑定到项集合，listbox上显示数据有两种：

直接在listbox控件xaml页面上添加子控件元素。

通过数据保定的方式来显示。将listbox控件的itemsource属性设置为一个集合，在设置itemTemplate以自定义每个listboxitem的显示方式。Listbox的常用属性：

selectedItems 获取listbox控件的当前选定项的列表

selectionMode 获取或者设置listbox控件的选择行为

Datacontext 获取或者设置参与数据绑定的是上下文

Items 获取用于生成控件内容的集合

ItemsPanel 获取或者设置模板，它定义了控制项的布局的面板。

ItemsSource 获取或者设置用于生成ietemsControl的内容的集合

ItemTemplate 获取或者设置用于显示每个项的datatemplate

示例代码

使用listbox控件绑定客户列表

Customer.cs文件代码：客户类相当于一个实体类，存储了用户的姓名地址

using System;

namespace ListBoxDemo

{

/***

客户类

**/

public class Customer

{

public String FirstName { get; set; }

public String LastName { get; set; }

public String Address { get; set; }

public Customer(String firstName, String lastName, String address)

{

this.FirstName = firstName;

this.LastName = lastName;

this.Address = address;

}

Customers.cs 初始化客户类，为客户类封装一些数据

using System.Collections.ObjectModel;

namespace ListBoxDemo

{

public class Customers : ObservableCollection<Customer>

{

public Customers()

{

Add(new Customer("李", "小明",

"北京市金山路89号"));

Add(new Customer("林", "关关",

"广东省深圳市深南大道77号"));

Add(new Customer("张", "三三",

"广东省广州市天河路80号"));

Add(new Customer("李", "思思",

"上海市中心街9好"));

}

MainPage.xaml主要代码：

<phone:PhoneApplicationPage

x:Class="ListBoxDemo.MainPage"

.................>

<ListBox.ItemTemplate>

</StackPanel>

</DataTemplate>

</ListBox.ItemTemplate>

</ListBox>

</Grid>

11. 菜单栏

Applicationbar，这个就是所谓的菜单栏控件，包括iconbutton和Menu两种类型。Iconbutton就相当于菜单栏里的工具栏，可以带图标，Menu就是菜单栏，但是没有二级菜单。在创建之前一定要再Reference里加入Microsoft.Phone.shell,并且在xaml页面中添加如下代码：

xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"

它最多可以显示4个图标按钮。他们会自动从左到右进行排列。如果有额外的可以通过菜单项进行添加，这些菜单默认是不显示。只有单击右侧的省略号才会显示。按钮中的图标应该是48*48像素

下边一起看一下这段代码：

<phone:PhoneApplicationPage.ApplicationBar>

<shell:ApplicationBar

IsVisible="True" IsMenuEnabled="True" Opacity="0.5"

StateChanged="ApplicationBar_StateChanged">

<shell:ApplicationBarIconButton IconUri="icon\ie.png" Text="浏览器" Click="ApplicationBarIconButton_Click"/>

<shell:ApplicationBarIconButton IconUri="icon\phone.png" Text="电话" Click="ApplicationBarIconButton_Click_1"/>

<shell:ApplicationBarIconButton IconUri="icon\about.png" Text="关于" Click="ApplicationBarIconButton_Click_2"/>

<shell:ApplicationBar.MenuItems>

<shell:ApplicationBarMenuItem Text="MenuItem 1" Click="ApplicationBarMenuItem_Click"/>

<shell:ApplicationBarMenuItem Text="MenuItem 2" Click="ApplicationBarMenuItem_Click_1"/>

</shell:ApplicationBar.MenuItems>

</shell:ApplicationBar>

</phone:PhoneApplicationPage.ApplicationBar>

创建菜单的时候要注意：

1.xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"为applicationBar定义字首使用，引入Microsoft.Phone.Shell中的主要元素，提供元素的事件，元件使用；

2.Shell:ApplicationBar 负责设定applicationbar是否要显示，是否须有menu选项或者是按钮的出现。具有statechanged的事件可以监听。

3.Shell:ApplicationBarIconButton.用于applicationBar集合中，创建按钮选择。注意图标的build Action属性需要设置为 content 才能显示，否则会出现一个错误图片，并且图标的大小必须严格控制在48*48像素上。

4.Shell:ApplicationBar.MenuItems：指定applicationBar要出现的menu项目，内部包含多个item来显示，纯显示文字也可以加入ApplicationBarIconButton项目，但是只能显示其text属性。Icon不会被显示。Menus采用的是垂直排列。最多可以放50个项目

以上简单说明了applicationBar常见的Tag，蛋事实上可以分为两种：

a) Local Applibation bar

是指特定页面的菜单栏。项目中mainpage.xaml中默认的菜单栏就是这个。它属于xaml专用。需要注意的是如果.xaml文件在<phone:PhoneApplicationPage>中设定了applicationBar= ”{StaticResourceglobalApplicationBar}“,记得要先删除，否则会报错。

b) Globl Application Bar

这个是指全局的菜单栏。如果想要支持不同的.xaml文件也能存在相同的applicationbar，可以到APP.xaml文件中，在<Application.Resiurces>集合中加入<shell:ApplicationBar/>另外记得要设定x:Key属性。这样其他的.xaml文件才有办法使用全局统一的菜单栏，设定好后，可以在其他的.xaml文件中加入以下语法:

<phone:PhoneApplicationPage>设定applicationBar= ”{StaticResourceglobalApplicationBar}“

示例代码

测试菜单栏的各种事件

<phone:PhoneApplicationPage.ApplicationBar>

<shell:ApplicationBar

IsVisible="True" IsMenuEnabled="True" Opacity="0.5"

StateChanged="ApplicationBar_StateChanged">

<shell:ApplicationBarIconButton IconUri="icon\ie.png" Text="浏览器" Click="ApplicationBarIconButton_Click"/>

<shell:ApplicationBarIconButton IconUri="icon\phone.png" Text="电话" Click="ApplicationBarIconButton_Click_1"/>

<shell:ApplicationBarIconButton IconUri="icon\about.png" Text="关于" Click="ApplicationBarIconButton_Click_2"/>

<shell:ApplicationBar.MenuItems>

<shell:ApplicationBarMenuItem Text="MenuItem 1" Click="ApplicationBarMenuItem_Click"/>

<shell:ApplicationBarMenuItem Text="MenuItem 2" Click="ApplicationBarMenuItem_Click_1"/>

</shell:ApplicationBar.MenuItems>

</shell:ApplicationBar>

</phone:PhoneApplicationPage.ApplicationBar>

.cs文件：

private void ApplicationBarIconButton_Click(object sender, EventArgs e)

{

textBlock1.Text = "你单击了浏览器菜单";

}

private void ApplicationBarIconButton_Click_1(object sender, EventArgs e)

{

textBlock1.Text = "你单击了电话菜单";

}

private void ApplicationBarIconButton_Click_2(object sender, EventArgs e)

{

textBlock1.Text = "你单击了关于菜单";

}

private void ApplicationBarMenuItem_Click(object sender, EventArgs e)

{

textBlock1.Text = "你单击了MenuItem 1菜单";

}

private void ApplicationBarMenuItem_Click_1(object sender, EventArgs e)

{

textBlock1.Text = "你单击了MenuItem 2菜单";

}

private void ApplicationBar_StateChanged(object sender, Microsoft.Phone.Shell.ApplicationBarStateChangedEventArgs e)

{

textBlock1.Text = "你打开了Menu菜单列表";

}

热点排行

windows

Windows phone8 基础篇（3） 常用控件开发

Windows phone8 基础篇（3）常用控件开发