Metro学习笔记+心得+体会（一）

序言：

　　最近Windows8消费者预览版刚刚出世，性能还算稳定，这不，前些天，我刚刚下来了Visual Studio11。其中最感兴趣的东西，莫过于Metro了。新事物嘛。于是又下载了一些示例源码，在学习的过程中，把一些技术方面觉得好的写成此系列博客。

　　迎接10月份Windows8正式版的发布和应用商店的开启。。。。

正文：

这是我写的第一个Metro程序，界面是这样的：

怎地，还算凑活吧？虽然这个Metro程序很简单，但毕竟也是我的第一个程序了。在此分享下源码，莫说我写的差劲。

这是状态切换所需的xaml：

 1       <VisualStateManager.VisualStateGroups>
 2           <VisualStateGroup>
 3               <VisualState x:Name="Fill"></VisualState>
 4                 <VisualState x:Name="Snapped">
 5                   <Storyboard>
 6                         <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(StackPanel.Orientation)" Storyboard.TargetName="CenterContent">
 7                             <DiscreteObjectKeyFrame KeyTime="0">
 8                                 <DiscreteObjectKeyFrame.Value>
 9                                     <Orientation>Vertical</Orientation>
10                                 </DiscreteObjectKeyFrame.Value>
11                             </DiscreteObjectKeyFrame>
12                         </ObjectAnimationUsingKeyFrames>
13                       <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(StackPanel.Orientation)" Storyboard.TargetName="about">
14                           <DiscreteObjectKeyFrame KeyTime="0">
15                               <DiscreteObjectKeyFrame.Value>
16                                   <Orientation>Vertical</Orientation>
17                               </DiscreteObjectKeyFrame.Value>
18                           </DiscreteObjectKeyFrame>
19                       </ObjectAnimationUsingKeyFrames>
20                   </Storyboard>
21               </VisualState>
22               <VisualState x:Name="Full">
23                   <Storyboard>
24                         <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(StackPanel.Orientation)" Storyboard.TargetName="CenterContent">
25                             <DiscreteObjectKeyFrame KeyTime="0">
26                                 <DiscreteObjectKeyFrame.Value>
27                                     <Orientation>Horizontal</Orientation>
28                                 </DiscreteObjectKeyFrame.Value>
29                             </DiscreteObjectKeyFrame>
30                         </ObjectAnimationUsingKeyFrames>
31                         <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(StackPanel.Orientation)" Storyboard.TargetName="about">
32                             <DiscreteObjectKeyFrame KeyTime="0">
33                                 <DiscreteObjectKeyFrame.Value>
34                                     <Orientation>Horizontal</Orientation>
35                                 </DiscreteObjectKeyFrame.Value>
36                             </DiscreteObjectKeyFrame>
37                         </ObjectAnimationUsingKeyFrames>
38                     </Storyboard>
39               </VisualState>
40           </VisualStateGroup>
41       </VisualStateManager.VisualStateGroups>

这是代码：

Windows.UI.ViewManagement.ApplicationView.GetForCurrentView().ViewStateChanged += BlankPage_ViewStateChanged;//加在窗口的构造函数中，相应事件

 1             switch (args.ViewState)
 2             {
 3                 case Windows.UI.ViewManagement.ApplicationViewState.Filled://占约2/3窗口显示
 4                     {
 5                         VisualStateManager.GoToState(this, "Fill", false);
 6                         break;
 7                     }
 8                 case Windows.UI.ViewManagement.ApplicationViewState.FullScreenLandscape://正常显示
 9                     {
10                         VisualStateManager.GoToState(this, "Full", false);
11                         break;
12                     }
13                 case Windows.UI.ViewManagement.ApplicationViewState.Snapped://占约1/3显示
14                     {
15                         VisualStateManager.GoToState(this, "Snapped", false);
16                         break;
17                     }

除以上三种模式，还有一种FullScreenPortrait，表示窗口纵向显示时的状态，相当于正常状态下旋转90度。

在这个示例里，还运用了几种不常用的空间：即RichTextBlock和RichTextBlockOverflow。这些控件有一个OverflowContentTarget属性，在这个属性里（Binding）可以绑定一个控件，当原控件空间不足时，就将多余的文本显示在绑定的控件中，而文本只可以放在RichTextBlock，而不是RichTextBlockOverflow。并且是通过一个段落显示的。

xaml：

1                     <RichTextBlock Padding="20" Grid.Row="2" Grid.Column="0"  OverflowContentTarget="{Binding ElementName=firstrich}" FontSize="{Binding ElementName=sli,Path=Value}" MaxHeight="500">
2                         <Paragraph  >
3                             <Run x:Name="txt" Text="{Binding ElementName=box,Path=Text}"></Run>
4                         </Paragraph>
5 
6                     </RichTextBlock>
7                     <RichTextBlockOverflow Padding="20" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"  Grid.Row="2" Grid.Column="1" x:Name="firstrich"   OverflowContentTarget="{Binding ElementName=secondrich}" MaxHeight="500"/>
8                     <RichTextBlockOverflow Padding="20" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"  Grid.Row="2" Grid.Column="2" x:Name="secondrich"  MaxHeight="500" />