【万里征程——Windows App开发】控件大集合2【修补中】

下面再来看看一些前面还没有讲过的控件，不过控件太多以至于无法全部列出来，大家只好举一反三啦。（还有人记得”学王一拖三“吗？）

前面最常用的控件就是Button啦，Button还有一个有意思的属性呢，当把鼠标指针放在Button上时，就会在Button的头顶冒出一串文本啦。这个不太截图哎……

            <code>
                <span><<span>Button</span><span>ToolTipService.ToolTip</span>=<span>"Go to www.blog.csdn.net/nomasp"</span><span>Margin</span>=<span>"692,458,0,230"</span>  /></span>
            </code>
        

还有一个控件和Button很像呢，它像开关一样。

            <code>
                <span><<span>ToggleSwitch</span><span>x:Name</span>=<span>"toggleSwitch1"</span><span>Header</span>=<span>"NoMasp Toggle"</span><span>OnContent</span>=<span>"On"</span><span>OffContent</span>=<span>"Off"</span><span>Toggled</span>=<span>"ToggleSwitch_Toggled"</span><span>Margin</span>=<span>"409,468,0,227"</span>/></span>
                <span><<span>ToggleSwitch</span><span>x:Name</span>=<span>"toggleSwitch2"</span><span>Header</span>=<span>"NoMasp Toggle"</span><span>OnContent</span>=<span>"On"</span><span>OffContent</span>=<span>"Off"</span><span>IsOn</span>=<span>"True"</span><span>Toggled</span>=<span>"ToggleSwitch_Toggled"</span><span>Margin</span>=<span>"409,565,0,130"</span>/></span>
            </code>
        

ComboBox提供了下拉列表，自然也是一个很常用的控件咯。

            <code><ComboBox Height=<span>"50"</span> Width=<span>"200"</span> Name=<span>"cbox1"</span>  SelectionChanged=<span>"cbox1_SelectionChanged"</span> Margin=<span>"17,47,1049,671"</span>>
     <x:<span>String</span>><span>Select</span><span>1</span></x:<span>String</span>>
     <x:<span>String</span>><span>Select</span><span>2</span></x:<span>String</span>>
     <x:<span>String</span>><span>Select</span><span>3</span></x:<span>String</span>>
     <x:<span>String</span>><span>Select</span><span>4</span></x:<span>String</span>>
</ComboBox></code>
        

ListBox控件和ComboBox很相似，都可以让用户选择已经嵌入在列表中的选项。用法如下：

            <code><ListBox x:Name=<span>"listBox1"</span> SelectionChanged=<span>"listBox1_SelectionChanged"</span> Width=<span>"100"</span>>
    <x:<span>String</span>><span>Item</span><span>1</span></x:<span>String</span>>
    <x:<span>String</span>><span>Item</span><span>2</span></x:<span>String</span>>
    <x:<span>String</span>><span>Item</span><span>3</span></x:<span>String</span>>
</ListBox></code>
        

Win平台设置时间的控件倒是很有特色呢，DatePicker和TimePicker。

            <code>
                <span><<span>DatePicker</span><span>Foreground</span>=<span>"Red"</span><span>Header</span>=<span>"NoMasp Date"</span><span>Margin</span>=<span>"3,177,0,533"</span>/></span>
                <span><<span>TimePicker</span><span>Foreground</span>=<span>"Green"</span><span>Header</span>=<span>"NoMasp Time"</span><span>Margin</span>=<span>"3,246,0,464"</span><span>Width</span>=<span>"289"</span>/></span>
            </code>
        

以下既是截图，又是写这篇博客的时间啦。

FlipView是一个可以让用户逐个浏览的项目集合的控件，下面是相关的示例代码啦。CommonAssets文件夹完全可以定义在Shared目录下，这样WP也可以拿来用了。我一直都没有截WP的图是因为我没有装虚拟机，我用的是真机调试的。

            <code>
                <span><<span>FlipView</span>></span>
                <span><<span>Image</span><span>Source</span>=<span>"CommonAssets/5083.jpg"</span>/></span>
                <span><<span>Image</span><span>Source</span>=<span>"CommonAssets/5503.jpg"</span>/></span>
                <span><<span>Image</span><span>Source</span>=<span>"CommonAssets/6121.jpg"</span>/></span>
                <span></<span>FlipView</span>></span>
            </code>
        

如果有缩放图片，并且可以滚动以查看图片的需要，那么就可以用ScrollBar啦。这主要是能留给图片的位置太小以至于图片无法全部显示出来。

            <code>
                <span><<span>ScrollViewer</span><span>ZoomMode</span>=<span>"Enabled"</span><span>MaxZoomFactor</span>=<span>"12"</span><span>HorizontalScrollMode</span>=<span>"Enabled"</span><span>HorizontalScrollBarVisibility</span>=<span>"Visible"</span><span>VerticalScrollBarVisibility</span>=<span>"Visible"</span><span>VerticalScrollMode</span>=<span>"Enabled"</span><span>Height</span>=<span>"200"</span><span>Width</span>=<span>"200"</span><span>Margin</span>=<span>"363,35,803,533"</span>></span>
                <span><<span>Image</span><span>Source</span>=<span>"CommonAssets/6121.jpg"</span><span>Height</span>=<span>"400"</span><span>Width</span>=<span>"400"</span>/></span>
                <span></<span>ScrollViewer</span>></span>
            </code>
        

还有一个控件则可以将图片等缩放到指定的大小哟，那就是Viewbox啦。大家看看下面这个图，是不是很炫酷呢。

            <code>
                <span><<span>Viewbox</span><span>MaxHeight</span>=<span>"33"</span><span>MaxWidth</span>=<span>"33"</span><span>Margin</span>=<span>"23.5,35,-26,-35"</span>></span>
                <span><<span>Image</span><span>Source</span>=<span>"CommonAssets/5503.jpg"</span><span>Opacity</span>=<span>"0.9 "</span>/></span>
                <span></<span>Viewbox</span>></span>
                <span><<span>Viewbox</span><span>MaxHeight</span>=<span>"66"</span><span>MaxWidth</span>=<span>"66"</span><span>Margin</span>=<span>"26,35,-26,-35"</span>></span>
                <span><<span>Image</span><span>Source</span>=<span>"CommonAssets/5503.jpg"</span><span>Opacity</span>=<span>"0.6"</span>/></span>
                <span></<span>Viewbox</span>></span>
                <span><<span>Viewbox</span><span>MaxHeight</span>=<span>"99"</span><span>MaxWidth</span>=<span>"99"</span><span>Margin</span>=<span>"26,35,-26,-35"</span>></span>
                <span><<span>Image</span><span>Source</span>=<span>"CommonAssets/5503.jpg"</span><span>Opacity</span>=<span>"0.3"</span>/></span>
                <span></<span>Viewbox</span>></span>
            </code>
        

相信大家都已经看过了GridView控件，很多Modern应用都会采用的。其和ComboBox挺类似的。

            <code><GridView x:Name=<span>"gView1"</span> SelectionChanged=<span>"gView1_SelectionChanged"</span>>
    <x:<span>String</span>><span>Item</span><span>1</span></x:<span>String</span>>
    <x:<span>String</span>><span>Item</span><span>2</span></x:<span>String</span>>
    <x:<span>String</span>><span>Item</span><span>3</span></x:<span>String</span>>
</GridView></code>
        

HyperlinkButton既可以作为Button来用，也可以用来做超链接。

            <code>
                <span><<span>HyperlinkButton</span><span>Content</span>=<span>"NoMasp--CSDN"</span><span>NavigateUri</span>=<span>"http://blog.csdn.net/nomasp"</span> /></span>
            </code>
        

相信大家都挺喜欢玩进度条的吧？我本人倒是觉得相比于Win7及Vista等，Win8的进度条变得更加有意思了。

            <code>
                <span><<span>ProgressBar</span><span>x:Name</span>=<span>"progressBar1"</span><span>IsIndeterminate</span>=<span>"True"</span><span>Width</span>=<span>"100"</span><span>Margin</span>=<span>"607,377,659,385"</span>/></span>
                <span><<span>ProgressBar</span><span>x:Name</span>=<span>"progressBar2"</span><span>Value</span>=<span>"70 "</span><span>Width</span>=<span>"100"</span><span>Margin</span>=<span>"607,352,659,410"</span>/></span>
            </code>
        

第一个图是运行中的进度条啦；第二个图中的上图也就是progressBar1，其Value为70的确定进度的进度条，下图则是progressBar2，是运行中的进度条在设计器中的静止状态。

环形的进度条会不会更好玩呢？

            <code>
                <span><<span>ProgressRing</span><span>x:Name</span>=<span>"progressRing1"</span><span>IsActive</span>=<span>"True"</span> /></span>
            </code>