代码改变世界

接触Surface 2.0 一

2011-12-07 18:42  Paul Wong  阅读(3193)  评论(1)  编辑  收藏  举报

   偶然得到一支持多触摸的屏幕，看到Surface的展示很炫，就想学习一下。关于Surface的博客，园友Gnie写得非常精彩，膜拜一下。

Surface很适合产品的展示，展示效果很炫，体验很好。下面看看几个来自官方的图片吧。

image           image           image

  是不是很炫，更多的产品介绍请移步至Surface Application Showcase。如果您现在用的是Win7系统，那可以到官网下载SurfaceRuntime和SurfaceSDK，安装完毕，就可以在VS里进行Surface的开发拉。

打开VS您会发现多了Surface项目模板，

image 

那我们就选择Surface Application(WPF)建一个项目吧，呵呵，学习WPF的人有福了哟。把Surface(WPF)和普通的WPF来对比一下。

image                                                                            image 

左右的Surface工程多引用了几个Surface的命名空间，顺便说说Presentation层的命名空间，只介绍Presentation层，其他的大家自己去研究一下咯。

image

接下来熟悉一下Surface的常用控件，如下：

            image

其中最经典，用得最多的应该是ScatterView与ScatterViewItem了，Scatter分散的意思，ScatterViewItem能自由地分散在屏幕，支持拖拽。

image

ScatterView可以用ScatterViewItem来填充，也可以用任何类型的控件来填充。当这个控件不是ScatterViewItem时，ScatterView控件会预先封装成ScatterViewItem，然后再填充进去。

 <s:ScatterView Name="MyScatterView" Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="2">
        <!-- Rectangle不是ScatterViewItem，但ScatterView会自动封装成ScatterViewItem-->
        <Rectangle Width="142" Height="112" Margin="8" Fill="DarkSeaGreen"/>
        <s:ScatterViewItem Deceleration="25.25">
            <Label Content="Label"/>
        </s:ScatterViewItem>
        <s:ScatterViewItem Deceleration="10.0">
            <s:SurfaceButton Content="Button" Height="23" HorizontalAlignment="Left" Name="surfaceButton" VerticalAlignment="Top" Width="75" />
        </s:ScatterViewItem>
        <s:ScatterViewItem>
                <Image Height="150" HorizontalAlignment="Left" Name="image1" Stretch="Fill" VerticalAlignment="Top" Width="200" Source="/SurfaceApplication1;component/Resources/Koala.jpg" />
         </s:ScatterViewItem>
        <s:ScatterViewItem>
            <TextBox Height="23" HorizontalAlignment="Left" Name="textBox" VerticalAlignment="Top" Width="240" />
        </s:ScatterViewItem>
      
    </s:ScatterView>

效果图：

image

感谢阅读，写得很随意，谢谢指正！