WP7基础学习第二讲

本文添加有点多，附有第二讲、第三讲、第四讲，这样不太好！还可以看看！

WP7--2

页面\Application Bar\系统资源\IsolatedStorage\Splashscreen and Applictopn Tile\ScreenShot

1.页面
(1).PhoneApplicationFrame:
一个程序中只能有一个Frame；是所有页面的容器；为SystemTray和ApplicationBar预留空间
(2).PhoneApplicationPage:
显示各自页面的ApplicationBar；放置页面内容的容器
(3).方向：
Orientation="Portrait";
this.Orientation=PageOrientation.Portrait;
(4).转向
SupportedOrientations="Portrait";
this.SupportedOrientations=
SupportedPageOrientation.PortraitOrLandscape;
this.OrientationChanged+=new EventHandler<OrientationChangedEventArgs>(MainPage_OrientationChanged);
(5).this.NavigationService.Navigate(new Uri("/Page1.xaml",UriKind.Relative));
this.NavigationService.GoBack();
this.NavigationService.GoForward();
(6).传值(对于传值，可在下一个页面的Loaded事件接受)
this.NavigationService.Navigate(new Uri("/Page1.xaml?name=aa",UriKind.Relative));
(7).接受
if(this.NavigationContext.QueryString.ContainaKey("name"))
 this.PageTitle.Text=this.NavigationContext.QueryString["name"];
2.ApplicationBar:
ApplicationBarIconButton
<shell:ApplicationBarIconButton IconUri="/Assets/appbar.add.rest.png" Text="增加" Click="ApplicationBarIconButton_Click"/>
图标：48*48像素png图，前景色一般为白色

MenuItems(无二级菜单)
<shell:ApplictionBarMenuItem Text="MenuItem1" Click="ApplicationBarMenuItem_Click"/>

注意：
ApplicationBarIconButton最多只能加4个；
Icon 图片属性：Build Action:Content
Copy to Output Directory:Copy if newer\Copy Always

5.系统资源的使用
6.IslatedStorage的读写操作

WP7--3
本节课程:对于常用容器和控件的练习

对于通用属性（UIElement）
1.Height/Width:用户设置的控件的大小，是预期的大小
2.ActualHeight/ActualWidth:获取控件的实际大小
3.MaxHeight/MaxWidth&MinHeight/MinWidth:设置空间的大小的三个属性（还有Height/Width）中的两个。如果三个值发生冲突，首先要保证的是Min然后是Max,但是这两个值一定要在Height/Width设置值之间才有效
4.Cursor:设置、获取控制光标形状
5.DataContext:设置、获取控件数据内容
6.HorizontalAlignment/VerticalAlignment:设置/获取控件水平/垂直方向的对齐方式
7.Language:设置/获取localization/globalization语言信息，如Language="en-US"
8.Margin:设置/获取控件与页面的边距
9.Name:设置/获取空间的名称
10.Parent:获取空间的父对象
11.Resources:设置/获取控件资源字典，使资源像样式一样通过引用资源串名，在XAML中使用。资源可以是任何数据类型
12.Style:设置/获取控件的外观样式，也可以先定义好后，绑定到多个控件上
13.Tag:维空间加标签说明
14.CacheMode:设置、获取一个值，该值指示应在可能时高速缓存已呈现的内容（一般用在大的内容上，如：播放媒体，加载大图片）
15.DesiredSize:获取系统布局的大小，对于布局的调整很有用
16.Opacity:设置/获取控件的透明度
17.UseLayoutRounding:设置/获取控件及其子控件是否按子像素进行布局，使控件外观圆滑清晰
18.Visibility：设置/获取控件是否可见
19.Background:设置/获取控件背景效果
20.Foreground:设置/获取字体颜色
21.RenderTransformOrigin:设置/获取变形的起始点
22.BorderBrush:设置/获取控件边框效果
23.BorderThickness:设置/获取控件边框粗细
24.FontFamily:设置/获取字体
25.FontSize:设置/获取字体大小
26.FontStretch:设置/获取字体字形
27.FontStyle:设置/获取字体样式
28.FontWeight:获取/设置字体粗细
29.IsEnable:设置/获取控件是否可用。
   如果为false,控件无法获取焦点，不能输入
30.IsTabStop:设置/获取控件是否加入TabNavigation.
   如果为false,控件无法获取焦点。
31.Padding:设置/获取控件与容器的边距
32.TabIndex:设置/获取控件获取焦点的顺序
33.TabNavigation:设置、获取控件焦点顺序按什么方式轮转
34.Template:设置/货物控件的模板
35.IsHitTestVisible:设置/获取控件是否接受输入事件，
   如mouse事件等；如果为false,无法获得焦点
36.HorizontalContentsAligment/VerticalContentAlignment:
   设置/获取控件内容的对齐方式
  
##########################################################
1.Clip:设置、获取空间剪裁效果（圆角效果）
<Image Grid.Row="1" Height="213" HorizontalAlignment="Left" Margin="126,93,0,0" Name="image2" Stretch="Fill" VerticalAlignment="Top"
Width="200" Source="Hydrangeas.jpg" Tag="Hydrangeas">
<Image.Clip>
  <RectangleGeometry Rect="100,100,100,100" RadiusX="20" RadiusY="20"/>
</Image.Clip>
</Image>

2.OpacityMask设置、获取一个控件蒙板，来产生蒙板透明效果
<Image.OpacityMask>
  <RadialGradientBrush>
     <GradientStop Color="#0C000000" Offset="1"/>
     <GradientStop Color="White" Offset="0.3"/>
  </RadialGradientBrush>
</Image.OpacityMask>

3.Projection:设置、获取控件3-D透视效果
<Image.Projection>
 <PlaneProjection LocalOffsetX="-3" RotationX="49"   RotationY="47" RotationZ="34" CenterOfRotationX="0"
  CenterOfRotationZ="-2.3" GlobalOffsetX="63"   GlobalOffsetY="21" GlobOffsetZ="40"/>
</Image.Projection>

4.RenderTransform:设置、获取空间变形效果
<Image.RenderTransform>
 <RotateTransform CenterX="100" CenterY="200"   Angle="60"/>
</Image.RenderTransform>

<ImageGrid.Row="1" Height="213"  HorizontalAlignment="Left" Margin="129,257,0,0"  Name="image2" Stretch="Fill" VerticalAlignment="Top"
 Width="200" RenderTransformOrigin="0,0"  Source="Hydrangeas.jpg"/>

---------------------------容器---------------------------
容器：Grid\Canvas\StackPanel\Border\PopUp\ScrollView

5.Grid:网格
<Grid x:Name="ContentGrid" Grid.Row="1">
 <Grid.ColumnDefinitions>
  <ColumnDefinition Width="159"/>
  <ColumnDefinition Width="141"/>
  <ColumnDefinition Width="180"/>
 </Grid.ColumnDefinitions>
 <Grid.RowDefinitions>
  <RowDefinition Height="134"/>
  <RowDefinition Height="133"/>
  <RowDefinition Height="220"/>
  <RowDefinition Height="162"/>
 </Grid.RowDefinitions>
 <Image Height="110" Margin="20,16,0,0" Width="131"  Stretch="Fill"  Source="Chrysanthemum.jpg"/>
 <Image Grid.Column="1" Grid.Row="1" Height="105" Stretch="Fill"   Margin="13,12,0,0" Width="115" Source="Desert.jpg"/>
 <Image Grid.Column="2" Grid.Row="2" Height="150"    Stretch="Fill"  Margin="14,51,0,0" Width="154"
  Source="Hydrangeas.jpg"/>
</Grid>

6.Canvas：用绝对坐标来定位子控件（层叠）
<Canvas Grid.Row="1">
 <Image Source="Chrysanthemum.jpg" Stretch="Fill"   Canvas.Left="79" Canvas.Top="93" Canvas.ZIndex="2"   Width="206" Height="96"/>
 <Image Source="Desert.jpg" Stretch="Fill"   Canvas.Left="134" Canvas.Top="121" Canvas.ZIdex="1"   Width="224" Height="120"/>
</Canvas>

cs代码：在页面Load事件去写
{
  Canvas.SetLeft(image1，300);//动态控制放在Canvas的控件
}

7.StackPanle:设置自空间的排列方向
<StackPanle Orientation="Horizontal">
 <Image Source="Chrysanthemum.jpg" Height="200"   Width="200"/>
 <StackPanel Orientation="Vertial">
  <TextBlock Text="Test1" FontSize="30"/>
  <TextBlock Text="Test2" FontSize="30"/>
 </StackPanel>
</StackPanel>

8.Border:给包容的子控件加边框
<Border Width="200" Height="200"  BorderBrush="Aquamarine" BorderThickness="10"  Margin="150,103,130,346"/>
<Border Width="200" Heght="200"  BorderBrush="Aquamarine" BorderThrickness="10,5,20,40"
 Margin="150,369,130,80" CornerRadius="25,200,10,15">
 <TextBox Height="67" Text="Test Border"   Background="Gold" Foregroung="White" Width="170"    VerticalAlignment="Bottom"/>
</Border>

9.PopUp:这个容器可以被打开和关闭(关闭不能看到里面内容)
<Popup HorizontalAlignment="Left" Margin="109,172,0,0"  Name="popup1" VerticalAlignment="Top" Height="250"  Width="250" IsOpen="True">
 <Canvas Width="250" Height="250" Background="Red"   VerticalAlignment="Center"   HorizontalAlignment="Center">
  <TextBlock Margin="90,120,0,0" Text="请等待。。。"/>
 </Canvas>
</Popup>

10.ScrollView:拖动显示其所包含的控件的内容（ScrollBar）
<ScrollViewer Height="293" Margin="75,112,0,0"  Name="ScollViewer1" VerticalAlignment="Top"   Width="279" HorizontalScrollBarVisibility="Auto"  VerticalScrollBarbility="Auto">
 <Image Source="Hydrangeas.jpg" Height="779"   Width="1036" />(图片控件的大小等于大图片的大小)
</ScrollViewer>

----------------------按钮--------------------------------
11.Button(也可直接设置它的背景颜色)
<Button Content="Button" Height="72"  HorizontalAlignment="Left" Margin="124,242,0,0"   Name="button1" VerticalAlignment="Top" Width="160"
 <Button.Background>
  <ImageBrush ImageSource="Desert.jpg"/.
 <Button.Background>
</Button>

12.HyperlinkButton:超链接按钮，用于本地、Web
<HyperlinkButton Content="HyperlinkButton" Height="61"
 HorizontalAligment="Left" Margin="96,99,0,0"  Name="hyperlinkButton1" VerticalAlignment="Top"  Width="220" NavigateUri=http://baidu.com
 TargetName="_self"/>此处是必须的
<HyperlinkButton Content="Navigate" Height="50"  HorizontalAlignment="Left" Margin="96,265,0,0"
 Name="hyperlinkButton2" VerticalAlignment="Top"
 Width="204" NavigateUri="/Page1.xaml">相对地址不需的
 <HyperlinkButton.Backgrond>
  <ImageBrush ImageSource="Desert.jpg"/>
 </HyperlinkButton.Backgroung>
</HyperlinkButton>

13.RepeatButton:在按下后，不断的发生Click事件
(可以操作，按住按钮时，实现计数功能！)
<RepeatButton Content="Test RepeatButton" Height="94"  HorizontalAlignment="Left" Margin="79,80,0,0"  Name="repeatButton1" VerticalAlignment="Top"  Width="292"/>
<RepeatButton Content="Test" Height="106"  HorizontalAlignment="Left" Margin="79,239,0,0"  Name="repeatButton2" VerticalAlignment="Top"  Width="236" Click="repeatBU=utton2_Click">
 <RepeatButton.Background>
 <ImageBrush IamgeSource="Desert.jpg"/>
 </RepeatButton.Background>
<RepeatButton>

14.ToggleButton:关闭按钮，三种状态Checked,UnChecked,Indeterminate

<ToggleButton Content="ToggleButton" Height="182"  HorizontalAlignment="Left" Margin="104,177,0,0"
 Name="toggleButton1" VerticalAlignment="Top"  Width="268" IsThreeState="True" (三状态:必须设为True)  Checked="toggleButton1_Checked"   UnChecked="toggleButton1_UnChecked"   Indeterminate="toggleButton1_Indeterminate"/>

WP7--4
本节课程：输入控件、基本控件、多媒体控件
输入控件:｛PasswordBox/TextBox｝
1.PasswordBox:用于输入自定义的遮罩字符的输入控件
<PasswordBox Height="72" HorizontalAlignment="Left"  Margin="12,119,0,0" Name="passwordBox1"  VerticalAlignment="Top" Width="460"/>
<PasswordBox Height="72" HorizontalAlignment="Left"  Margin="12,284,0,0" Name="passwordBox2" Width="460"  VerticalAlignment="Top" PasswordChar="$"/>
<PasswordBox Height="72" HorizontalAlignment="Left"
 Margin="12,454,0,0" Name="passwordBox3"  VerticalAlignment="Top" Width="460" PasswordChar="@"/>

2.TextBox:可以让软键盘产生不同的键面效果
  InputScope属性：通过代码获取属性列表
  --typeof(InputScopeNameValue).GetFields    (BindingFlags.Public|BindingFlags.Static);--
  典型的软键盘设置
  -Text：增加了联想输入
  -TelephoneNumber:键面全部为数字显示
  -Url:键面显示.com
<TextBox>
 <TextBox.InputScope>
  <InputScope>
   <InputScopeName NameValue="Number"/>
  </InputScope>
 </TextBox.InputScope>
</TextBox>

也可用代码编辑，在页面Load事件写入
FileIdInfo []array=typeof(InputScopeNameValue).GetFiles(BindingFlags.Public|BindingFlags.Static);
获取60多种软键盘的设置

多媒体控件：｛Image/MediaElement｝
1.Image:只支持png/jpg格式图像；显示本地或网络图像(注意图片属性的修改，Content|Copy if new)
<Image Source="Desert.jpg"/>
<Image Source="http://www.daisy123.com/wpcontent/uploads/2010/11/42724650.jpg"/>
也可通过代码加载
this.image1.Source=new BitmapImage(new Uri("Desert.jpg",UriKind.Relative));
this.image1.Source=new BitmapImage(new Uri("http://www.daisy123.com/wpcontent/uploads/2010/11/42724650.jpg",UriKind.Absolute));

2.MediaElement

<MediaElement

对于事件：在Load事件中为mediaElement加一个播放失败的委托
代码：(加入大的视频，可能无法加载，报错！)
mediaElement1.MediaFailed+=new EventHandle();
在mediaElement1.MediaFaile事件中写入：
if(e.ErrorException!=null)
 this.PageTitle.Text=e.ErrorException.ToString();

基本控件：｛TextBlock/CheckBox/RadioButton/PrgressBar/Slider/Thumb/ListBox｝
1.TextBlock:在页面上显示文字（如：PageTitle）
  （属性：TextWraping:换行显示）
<TextBlock Height="84" Foreground="Red" FontSize="50"  HorizontalAlignment="Left" Margin="80,66,0,0"  Name="textBlock1" Text="Hello World"  VerticalAlignment="Top" Width="281"/>
<TextBlock Height="176" HorizontalAlignment="Left"  Margin="79,242,0,0" Name="textBlock2" FontSize="40"
 Text="Hello Windows  Phone7" TextWrapping="Wrap"   VerticalAlignment="Top" Width="271" />

2.CheckBox:对于它的放大、缩小，设置ScaleX,ScaleY的值;
  ScaleX>1放大；<1缩小
<CheckBox Content="CheckBox" Height="72" IsChecked="True"
 HorizontalAlignment="Left" Margin="105,124,0,0"  Name="checkBox1" VerticalAlignment="Top"  Checked="Checked事件" UnChecked="UnChecked事件"/>
<CheckBox Content="CheckBox" Height="74" Foreground="Blue"
 Background="Red" HorizontalAlignment="Left"  Name="checkBox2"Margin="111,224,0,0"   VerticalAlignment="Top" Width="177"
 <CheckBox.RenderTransform>
  <ScaleTransform ScaleX="0.8" ScaleY="0.8"/>
 </CheckBox.RenderTransform>
</CheckBox>

3.RadioButton:当创建多个时，自动互斥;大小的改变，还是同上
<RadioButton Content="RadioButton" Height="72"   HorizontalAlignment="Left" Margin="113,112,0,0"   Name="radioButton1" VerticalAlignment="Top"/>
<RadioButton Content="RadioButton" Foreground="Bule"  Background="Red" Height="72" HorizontalAlignment="Left"  Margin="113,229,0,0" Name="radioButton2"  VerticalAlignment="Top"/>

4.ProgressBar:两种类型：显示确切进度的；不断重复
  特有属性：IsIndeterminate="True"(两种类型)
  事件:ValueChanged="事件"（值不断改变时，做的操作）
<ProgressBar Height="71" HorizontalAlignment="Left"  Margin="24,109,0,0" Name="progressBar1"  VerticalAlignment="Top" Width="424" Value="80"/>
<ProgressBar Height="55" HorizontalAlignment="Left"  Margin="36,273,0,0" Name="progressBar2" Width=412"   VerticalAlignment="Top"  IsIndeterminate="True"/>

5.Slider:可以设置水平、垂直方向（滑竿：如播放器的音量）
  属性：Orientation：方向；Value:最大是10
  事件:ValueChanged="事件"（值不断改变时，做的操作）
<Slider Height="90" HorizontalAlignment="Left"  Margin="20,30,0,0" Name="slider1" VerticalAlignment="Top"
 Width="460"/>
<Slider Height="390" HorizontalAlignment="Left"  Margin="192,166,0,0" Name="slider2"  Width="59"  VerticalAlignment="Top" Orientation=Vertical"/>
事件代码：
this.PageTitle.Text=e.NewValue.ToString();

6.Thumb:通过拖动，获取连续的坐标(像记事本)
  三个事件：DragStarted:当鼠标点击，触发，执行操作；    DragDelta:当鼠标在控件内滑动，触发，执行操作；    DragCompleted：当鼠标离开，触发，执行操作
（本测试：点击：Started；离开:Compeleted；滑动：显示坐标）
<Thumb Height="125" HorizontalAlignment="Left"  Margin="154,99,0,0" Name="thumb1" VerticalAlignment="Top"  Width="190" DragStarted="thumb1_DragStarted"  DragDelta="thumb1_DragDelta"  DragCompleted="thumb1_DragCompleted"/>
事件代码：
DragCompleted:this.PageTitle.Text="Completed";
DragStarted:  this.PageTitle.Text="Started";
DragDelta:(对于水平、垂直显示)
this.PageTile.Text=string.Format("x={0};y={1}",
e.HorizontalChange,e.VerticalChange);

7.ListBox:相当于一个容器，可以通过ListItem来组合多个控件而  得到不同的功能的List
 （属性：ItemTemplate有很多的Template，如：DataTemplate  (数据绑定)）
<ListBox HorizontalAlignment="Left" Margin="10,6,0,0"  Name="listBox1" VerticalAlignment="Top" Width="460">
 <ListBox.ItemTemplate>
  <DtatTemplate>
   <StackPanel Orientation="Horizontal">
    <Image Width="100" Height="100"
     Source="{Binding Source}"/>
    <TextBlock Text="{Binding Text}"/>
   </StackPanel>
  </DataTemplate>
 </ListBox.ItemTemplate>
</ListBox>
(this.listBox1.ItemsSource=list;)

数据绑定：传值
(1)创建一个类:
public class Item
{
 public ImageSource Source {get;set;}
 public string Text {get;set;}
}
(2)在页面Load事件写入如下代码;
List<Item> list=new List<Item>();
Item item=new Item();
item.Source=new BitmapImage(new Uri("Chry.jpg",UriKind.relative));
item.Text="Chry.jpg";
list.Add(item);

item=new Item();
item.Source=new BitmapImage(new Uri("Desert.jpg",UriKind.relative));
item.Text="Desert.jpg";
list.Add(item);

item=new Item();
item.Source=new BitmapImage(new Uri("Ch.jpg",UriKind.relative));
item.Text="Ch.jpg";
list.Add(item);

listBox1.ItemsSource=list;

事件：listBox1.SelectionChange=new (事件)
在对应的事件中写入如下代码：
ListBox lb=sender as ListBox;
Item item=lb.SelectedItem as Item;
this.PageTitle.Text=item.Text;