控件的属性、事件与样式资源
怎样加入控件
加入控件的方式有多种，大家更喜欢以下哪一种呢？
1）使用诸如Blend for Visual Studio或Microsoft Visual Studio XAML设计器的设计工具。
2）在Visual Studio XAML编辑器中将控件加入到XAML代码中。
3）在代码中加入控件。 注意：当应用执行时会看到你在代码中加入的控件，但在 Visual Studio XAML 设计器中看不到。
前面我们通过在工具箱拖住控件以及直接在写XAML代码来设置控件，在教程的后面。我们会看到在C#后台代码中加入控件。Blend我们临时还没实用到。只是其在绘制图形和动画上可谓非常强大和优秀。
设置控件的属性
控件的属性相比大家都已经会用了，一来能够直接在XAML中加入属性，二来能够在属性视图中加入和改动属性。
为控件加入事件
假设要加入和改动事件呢，相同在属性视图中，点击右上角的闪电图标就可以。假设要加入Click事件。那么在Click的输入框中输入好事件名称后直接按Enter就可以。此时VS就会自己主动跳转到C#后台代码中，第一个參数sender是对处理程序所附加的对象的应用。第二參数是事件数据，它通常在签名中显示为e參数。
<code>
<span>private</span>
<span>void</span>
<span>btnSetStyle_Click</span>(<span>object</span> sender, RoutedEventArgs e)
{
Button b = (Button)sender;
b.Height = <span>400</span>;
b.Width = <span>320</span>;
}</code>
上面的这段代码这会将所点击的Button的高设置为400，宽设置为320；除了这样的方式外，也能够按例如以下操作。当中btnSetStyle是当前Button的名字：
<code>
<span>private</span>
<span>void</span>
<span>btnSetStyle_Click</span>(<span>object</span> sender, RoutedEventArgs e)
{
btnSetStyle.Height = <span>400</span>;
btnSetStyle.Width = <span>320</span>;
}</code>
除此之外，我们也能够不在XAML中定义Click事件，依照例如以下操作也能够达到相同的效果，它会将两个事件相互关联。
<code>
<span>public</span>
<span>MainPage</span>()
{
<span>this</span>.InitializeComponent();
btnSetStyle.Click += <span>new</span> RoutedEventHandler(btnSetStyle_Click);
}
<span>private</span><span>void</span><span>btnSetStyle_Click</span>(<span>object</span> sender, RoutedEventArgs e)
{
btnSetStyle.Height = <span>400</span>;
btnSetStyle.Width = <span>320</span>;
}
</code>
为控件设置样式资源
即便没有加入过资源，也不清楚什么是样式。没关系，想必大家都玩过2048吧。
游戏中有很多方格，那这些方格的样式会不会一个个去定义呢，当然不是，能够直接用样式资源来定位到全部的Button。
以下是一个基本样式，
<code><Page.Resources>
<<span>Style</span> TargetType=<span>"Button"</span>>
<<span>Setter</span><span>Property</span>=<span>"FontWeight"</span><span>Value</span>=<span>"Bold"</span>/>
<<span>Setter</span><span>Property</span>=<span>"FontSize"</span><span>Value</span>=<span>"40"</span>/>
<<span>Setter</span><span>Property</span>=<span>"HorizontalAlignment"</span><span>Value</span>=<span>"Center"</span>></<span>Setter</span>>
<<span>Setter</span><span>Property</span>=<span>"VerticalAlignment"</span><span>Value</span>=<span>"Center"</span>></<span>Setter</span>>
<<span>Setter</span><span>Property</span>=<span>"Background"</span><span>Value</span>=<span>"Gray"</span>></<span>Setter</span>>
<<span>Setter</span><span>Property</span>=<span>"Width"</span><span>Value</span>=<span>"100"</span>></<span>Setter</span>>
<<span>Setter</span><span>Property</span>=<span>"Height"</span><span>Value</span>=<span>"100"</span>></<span>Setter</span>>
<<span>Setter</span><span>Property</span>=<span>"Template"</span>>
<<span>Setter</span>.<span>Value</span>>
<ControlTemplate TargetType=<span>"Button"</span>>
<<span>Grid</span> x:Name=<span>"Grid"</span><span>Background</span>=<span>"Transparent"</span>>
<Border x:Name=<span>"Border"</span> Width=<span>"{TemplateBinding Width}"</span> Height=<span>"{TemplateBinding Height}"</span><span>Background</span>=<span>"{TemplateBinding Background}"</span> >
<ContentPresenter x:Name=<span>"ContentPresenter"</span> ContentTemplate=<span>"{TemplateBinding ContentTemplate}"</span> Content=<span>"{TemplateBinding Content}"</span> HorizontalAlignment=<span>"Center"</span> VerticalAlignment=<span>"Center"</span>/>
</Border>
</<span>Grid</span>>
</ControlTemplate>
</<span>Setter</span>.<span>Value</span>>
</<span>Setter</span>>
</<span>Style</span>>
</Page.Resources></code>
可是这里也有一个问题，假设我们有10个Button控件，却仅仅想当中8个用到这些定义。另外2个想用另一种控件，那该怎么办呢？
将样式定义为资源。事实上是有2中方式的。
一种就是直接用Style的TargetType属性来定义到全部的目标控件。
另一种则除了用TargetType属性外，还能够用x:key属性，然后再详细的控件中庸显式的关键字StaticResource来设置详细的Style属性。
<code><Page.Resources>
<<span>Style</span> TargetType=<span>"Button"</span>>
<<span>Setter</span><span>Property</span>=<span>"FontStyle"</span><span>Value</span>=<span>"Oblique"</span> />
<<span>Setter</span><span>Property</span>=<span>"FontSize"</span><span>Value</span>=<span>"20"</span> />
<<span>Setter</span><span>Property</span>=<span>"BorderBrush"</span><span>Value</span>=<span>"Green"</span> />
<<span>Setter</span><span>Property</span>=<span>"BorderThickness"</span><span>Value</span>=<span>"5"</span> />
<<span>Setter</span><span>Property</span>=<span>"Foreground"</span><span>Value</span>=<span>"Orange"</span> />
<<span>Setter</span><span>Property</span>=<span>"Height"</span><span>Value</span>=<span>"80"</span>/>
<<span>Setter</span><span>Property</span>=<span>"Width"</span><span>Value</span>=<span>"160"</span>/>
</<span>Style</span>>
<<span>Style</span> x:Key=<span>"OtherStyle"</span> TargetType=<span>"Button"</span>>
<<span>Setter</span><span>Property</span>=<span>"FontStyle"</span><span>Value</span>=<span>"Italic"</span> />
<<span>Setter</span><span>Property</span>=<span>"FontSize"</span><span>Value</span>=<span>"16"</span> />
<<span>Setter</span><span>Property</span>=<span>"Foreground"</span><span>Value</span>=<span>"Lavender"</span> />
<<span>Setter</span><span>Property</span>=<span>"Height"</span><span>Value</span>=<span>"160"</span>/>
<<span>Setter</span><span>Property</span>=<span>"Width"</span><span>Value</span>=<span>"320"</span>/>
<<span>Setter</span><span>Property</span>=<span>"Opacity"</span><span>Value</span>=<span>"0.2"</span>/>
</<span>Style</span>>
</Page.Resources></code>
详细效果见下图。当中Opacity属性为透明度。
大家都知道类能够继承，样式也是能够继承的。
部分控件介绍
通过前面的学习，已经见过一些控件了，如今起将逐步见到很多其它控件。
但由于控件太多。教程中无法一一介绍，请自行举一反三。
教程内容也将不断更新。
Button
前面最经常使用的控件就是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>Button</span><span>Content</span>=<span>"摩天轮"</span><span>Margin</span>=<span>"134,363,0,367"</span>></span>
<span><<span>ToolTipService.ToolTip</span>></span>
<span><<span>Image</span><span>MaxHeight</span>=<span>"80"</span><span>MaxWidth</span>=<span>"100"</span><span>Source</span>=<span>"Assets/343219.jpg"</span>/></span>
<span></<span>ToolTipService.ToolTip</span>></span>
<span></<span>Button</span>></span>
</code>
仅仅要把鼠标放到Button上面就会显示出这张图片了，也叫做帮助提示吧。事实上更简单的方法是以下这样的。
它显示的是一个后退的样式，并且鼠标放上去会有文字Back提示。
<code><<span>Button</span> Content=<span>"摩天轮"</span> ToolTipService.ToolTip=<span>"Back"</span><span>Style</span>=<span>"{StaticResource NavigationBackButtonNormalStyle}"</span> /> </code>
ToggleSwitch
这个控件和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>
MessageDialog
这控件和Button一起讲还蛮合适的。我们任意加入一个Button。然后写好Click事件例如以下。
<code>
<span>private</span>
<span>async</span>
<span>void</span>
<span>Button_Click</span>(<span>object</span> sender, RoutedEventArgs e)
{
Windows.UI.Popups.MessageDialog messageDialog =
<span>new</span> Windows.UI.Popups.MessageDialog(<span>"噢，你刚刚踩到了地雷。"</span>);
<span>await</span> messageDialog.ShowAsync();
}</code>
注意要在函数上加上async表示异步。
假设须要预览效果，能够參见教程随后的“用浮出控件做预览效果”。
ComboBox
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
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>
DatePicker、TimePicker
Winows平台设置时间的控件倒是非常有特色，就是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
FlipView是一个能够让用户逐个浏览的项目集合的控件。以下是相关的演示样例代码。CommonAssets文件夹全然能够定义在Shared文件夹下。这样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>
除此之外呢，我们还能够在后台代码中加入，以下的第二段代码和第一段相似。只是是用的List。
<code>FlipView flipView = new FlipView()<span>;</span>
flipView<span>.Items</span><span>.Add</span>(<span>"Item 1"</span>)<span>;</span>
flipView<span>.Items</span><span>.Add</span>(<span>"Item 2"</span>)<span>;</span>
flipView<span>.SelectionChanged</span> += filpView_SelectionChanged<span>;</span>
grid1<span>.Children</span><span>.Add</span>(flipView)<span>;</span></code>
<code>List<String> listItems = new List<string>()<span>;</span>
listItems<span>.Add</span>(<span>"Item 1"</span>)<span>;</span>
listItems<span>.Add</span>(<span>"Item 2"</span>)<span>; </span>
FlipView flipView = new FlipView()<span>;</span>
flipView<span>.ItemsSource</span> = listItems<span>;</span>
flipView<span>.SelectionChanged</span> += filpView_SelectionChanged<span>; </span>
grid1<span>.Children</span><span>.Add</span>(flipView)<span>;</span></code>
除了这2种方式之外呢，用CollectionViewSource来绑定数据也是全然没问题的。
<code>
<span><<span>Page.Resources</span>></span>
<span><<span>CollectionViewSource</span><span>x:Name</span>=<span>"collectionVSFlipView"</span><span>Source</span>=<span>"{Binding Items}"</span>/></span>
<span></<span>Page.Resources</span>></span>
</code>
上面是一段资源文件。然后FlipView ListView的ItemsSource加入静态资源绑定就OK了。
<code>
<span><<span>FlipView</span><span>x:Name</span>=<span>"flipView"</span><span>ItemsSource</span>=<span>"{Binding Source={StaticResource collectionVSFlipView}}"</span>/></span>
</code>
假设大家自己试过FlipView就会发现它的图片资源等都是左右滚动的，假设要用上下滚动呢？那就用以下这个ItemsPanelTemplate模板就好了。
<code>
<span><<span>FlipView.ItemsPanel</span>></span>
<span><<span>ItemsPanelTemplate</span>></span>
<span><<span>VirtualizingStackPanel</span><span>Orientation</span>=<span>"Vertical"</span>/></span>
<span></<span>ItemsPanelTemplate</span>></span>
<span></<span>FlipView.ItemsPanel</span>></span>
</code>
ScrollBar
假设有缩放图片。并且能够滚动以查看图片的须要，那么就能够用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
另一个控件则能够将图片等缩放到指定的大小的，那就是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
相信大家都已经看过了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
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>
ProgressBar
相信大家都挺喜欢玩进度条的吧？我本人倒是认为相比于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，是执行中的进度条在设计器中的精巧状态。
ProgressRing
环形的进度条会不会更好玩呢？
<code>
<span><<span>ProgressRing</span><span>x:Name</span>=<span>"progressRing1"</span><span>IsActive</span>=<span>"True"</span> /></span>
</code>
Slider
比方说win8上的音量呀、屏幕亮度呀，这些地方都用到了滑动条。
这里来看看它的ThumbToolTipValueConverter属性吧。
为了将值绑定到Slider上，我们须要有一个类，这个类须要一个为数据绑定提供值转换的接口。可视化元素也就是Slider为绑定目标。其有2个方向：数据源->数据->绑定目标，绑定目标->数据->数据源。
我们须要写一个类，能够直接在MainPage.xaml.cs下写，但更好是单独新建一个类，再考虑到这个是通用应用，所以将类新建到Shared下比較合适。
<code>
<span>public</span>
<span>class</span> ThumbToolTipValueConverter : Windows.UI.Xaml.Data.IValueConverter
{
<span>public</span><span>object</span><span>Convert</span>(<span>object</span><span>value</span>, Type targetType, <span>object</span> parameter, <span>string</span> language)
{
<span>if</span>(<span>value</span><span>is</span><span>double</span>)
{
<span>double</span> dValue= System.Convert.ToDouble(<span>value</span>);
<span>return</span> dValue;
}
<span>return</span><span>null</span>;
}
<span>public</span><span>object</span><span>ConvertBack</span>(<span>object</span><span>value</span>, Type targetType, <span>object</span> parameter, <span>string</span> language)
{
<span>return</span><span>null</span>;
}
}</code>
然后加入以下代码作为本地实例化的资源就可以。
<code>
<span><<span>Page.Resources</span>></span>
<span><<span>local:ThumbToolTipValueConverter</span><span>x:Key</span>=<span>"thumbToolTipValueC"</span>/></span>
<span></<span>Page.Resources</span>></span>
</code>
最后就是传说中的本体啦。
<code>
<span><<span>Slider</span><span>Width</span>=<span>"200"</span><span>Height</span>=<span>"50"</span><span>Name</span>=<span>"slider1"</span><span>ThumbToolTipValueConverter</span>=<span>"{StaticResource thumbToolTipValueC}"</span> /></span>
</code>
我们还能够加入一个Button和TextBlock，让点击来在TextBlock上显示Slider的Value。
<code>
<span>private</span>
<span>void</span>
<span>btnGetSliderValue_Click</span>(<span>object</span> sender, RoutedEventArgs e)
{
tblockSlider.Text = slider1.Value.ToString();
}</code>
用浮出控件做预览效果
在前面学习控件的时候。我们已经见过了MessageDialog了，关于Button另一个浮出控件Flyout哦。
详细是怎样用呢？接下来就一起看看。
我们还是延续前面的那个演示样例好了。那么，代码来了。
<code>
<span><<span>Button</span><span>x:Name</span>=<span>"btnWhat"</span><span>Content</span>=<span>"这是什么？"</span>></span>
<span><<span>Button.Flyout</span>></span>
<span><<span>Flyout</span>></span>
<span><<span>StackPanel</span>></span>
<span><<span>TextBlock</span><span>Width</span>=<span>"430"</span><span>Style</span>=<span>"{StaticResource BaseTextBlockStyle}"</span><span>Text</span>=<span>"噢！你刚刚又踩到地雷了，要撤销吗？"</span><span>Foreground</span>=<span>"Red"</span><span>FontSize</span>=<span>"25"</span>/></span>
<span><<span>Button</span><span>Click</span>=<span>"btnUndo_Click"</span><span>Margin</span>=<span>"12"</span><span>Content</span>=<span>"撤销"</span>/></span>
<span></<span>StackPanel</span>></span>
<span></<span>Flyout</span>></span>
<span></<span>Button.Flyout</span>></span>
<span></<span>Button</span>></span>
</code>
当我们点击了撤销button后。当然须要btnWhatbutton的Flyout消失掉，这个嘛，也仅仅要1行代码啦。另外这个踩雷的逻辑这里就不展开啦.
<code>
<span>private</span>
<span>void</span>
<span>btnUndo_Click</span>(<span>object</span> sender, RoutedEventArgs e)
{
btnWhat.Flyout.Hide();
}</code>
更为重要的是在于这些在WP8上也是通用的，这才是核心所在。既然这一篇教程主要是浮出控件。假设能够借助浮出产生预览图像的效果会不会非常棒呢？先来看张执行截图吧。
以下都是代码啦，什么Binding呀之类的都不用管啦。须要注意的地方也就是那些Height和Width可能须要拿来调整一下。
<code> <Page.Resources>
<Flyout x:Key=<span>"ResourceFlyoutImage"</span> Placement=<span>"Right"</span>>
<<span>Image</span> Source=<span>"{Binding Path=Source}"</span> MaxHeight=<span>"800"</span> MaxWidth=<span>"1400"</span> Stretch=<span>"Uniform"</span>/>
<Flyout.FlyoutPresenterStyle>
<<span>Style</span> TargetType=<span>"FlyoutPresenter"</span>>
<<span>Setter</span><span>Property</span>=<span>"MinHeight"</span><span>Value</span>=<span>"900"</span>/>
<<span>Setter</span><span>Property</span>=<span>"MinWidth"</span><span>Value</span>=<span>"1600"</span>/>
<<span>Setter</span><span>Property</span>=<span>"BorderThickness"</span><span>Value</span>=<span>"3"</span>/>
<<span>Setter</span><span>Property</span>=<span>"Background"</span><span>Value</span>=<span>"Wheat"</span>/>
<<span>Setter</span><span>Property</span>=<span>"BorderBrush"</span><span>Value</span>=<span>"Green"</span>/>
<<span>Setter</span><span>Property</span>=<span>"ScrollViewer.ZoomMode"</span><span>Value</span>=<span>"Enabled"</span>/>
</<span>Style</span>>
</Flyout.FlyoutPresenterStyle>
</Flyout>
</Page.Resources>
<<span>Grid</span>>
<StackPanel HorizontalAlignment=<span>"Left"</span> Orientation=<span>"Vertical"</span>>
<<span>Image</span> Source=<span>"Assets/14152.jpg"</span> Width=<span>"100"</span> Height=<span>"100"</span> Margin=<span>"12"</span> Tapped=<span>"img_Tapped"</span>
FlyoutBase.AttachedFlyout=<span>"{StaticResource ResourceFlyoutImage}"</span>
DataContext=<span>"{Binding RelativeSource={RelativeSource Mode=Self}}"</span>/>
<<span>Image</span> Source=<span>"Assets/14158.jpg"</span> Width=<span>"100"</span> Height=<span>"100"</span> Margin=<span>"12"</span> Tapped=<span>"img_Tapped"</span>
FlyoutBase.AttachedFlyout=<span>"{StaticResource ResourceFlyoutImage}"</span>
DataContext=<span>"{Binding RelativeSource={RelativeSource Mode=Self}}"</span>/>
<<span>Image</span> Source=<span>"Assets/14160.jpg"</span> Width=<span>"100"</span> Height=<span>"100"</span> Margin=<span>"12"</span> Tapped=<span>"img_Tapped"</span>
FlyoutBase.AttachedFlyout=<span>"{StaticResource ResourceFlyoutImage}"</span>
DataContext=<span>"{Binding RelativeSource={RelativeSource Mode=Self}}"</span>/>
<<span>Image</span> Source=<span>"Assets/14164.jpg"</span> Width=<span>"100"</span> Height=<span>"100"</span> Margin=<span>"12"</span> Tapped=<span>"img_Tapped"</span>
FlyoutBase.AttachedFlyout=<span>"{StaticResource ResourceFlyoutImage}"</span>
DataContext=<span>"{Binding RelativeSource={RelativeSource Mode=Self}}"</span>/>
</StackPanel>
</<span>Grid</span>></code>
<code>
<span>private</span>
<span>void</span>
<span>img_Tapped</span>(<span>object</span> sender, TappedRoutedEventArgs e)
{
FlyoutBase.ShowAttachedFlyout((FrameworkElement)sender);
} </code>
相同的。在WP上也是能够得哦，一下是做了些改动后的XAML代码啦。
正如大家所见，我把图片都缩小了，Placement也设置成了Top，StactPanel的属性也做了改动。
<code> <Page.Resources>
<Flyout x:Key=<span>"ResourceFlyoutImage"</span> Placement=<span>"Top"</span>>
<<span>Image</span> Source=<span>"{Binding Path=Source}"</span> MaxHeight=<span>"600"</span> MaxWidth=<span>"400"</span> Stretch=<span>"Uniform"</span>/>
<Flyout.FlyoutPresenterStyle>
<<span>Style</span> TargetType=<span>"FlyoutPresenter"</span>>
<<span>Setter</span><span>Property</span>=<span>"MinHeight"</span><span>Value</span>=<span>"600"</span>/>
<<span>Setter</span><span>Property</span>=<span>"MinWidth"</span><span>Value</span>=<span>"400"</span>/>
<<span>Setter</span><span>Property</span>=<span>"BorderThickness"</span><span>Value</span>=<span>"3"</span>/>
<<span>Setter</span><span>Property</span>=<span>"Background"</span><span>Value</span>=<span>"Wheat"</span>/>
<<span>Setter</span><span>Property</span>=<span>"BorderBrush"</span><span>Value</span>=<span>"Green"</span>/>
<<span>Setter</span><span>Property</span>=<span>"ScrollViewer.ZoomMode"</span><span>Value</span>=<span>"Enabled"</span>/>
</<span>Style</span>>
</Flyout.FlyoutPresenterStyle>
</Flyout>
</Page.Resources>
<<span>Grid</span>>
<StackPanel VerticalAlignment=<span>"Bottom"</span> Orientation=<span>"Horizontal"</span>>
<<span>Image</span> Source=<span>"Assets/14152.jpg"</span> Width=<span>"72"</span> Height=<span>"60"</span> Margin=<span>"12"</span> Tapped=<span>"img_Tapped"</span>
FlyoutBase.AttachedFlyout=<span>"{StaticResource ResourceFlyoutImage}"</span>
DataContext=<span>"{Binding RelativeSource={RelativeSource Mode=Self}}"</span>/>
<<span>Image</span> Source=<span>"Assets/14158.jpg"</span> Width=<span>"72"</span> Height=<span>"60"</span> Margin=<span>"12"</span> Tapped=<span>"img_Tapped"</span>
FlyoutBase.AttachedFlyout=<span>"{StaticResource ResourceFlyoutImage}"</span>
DataContext=<span>"{Binding RelativeSource={RelativeSource Mode=Self}}"</span>/>
<<span>Image</span> Source=<span>"Assets/14160.jpg"</span> Width=<span>"72"</span> Height=<span>"60"</span> Margin=<span>"12"</span> Tapped=<span>"img_Tapped"</span>
FlyoutBase.AttachedFlyout=<span>"{StaticResource ResourceFlyoutImage}"</span>
DataContext=<span>"{Binding RelativeSource={RelativeSource Mode=Self}}"</span>/>
<<span>Image</span> Source=<span>"Assets/14164.jpg"</span> Width=<span>"72"</span> Height=<span>"60"</span> Margin=<span>"12"</span> Tapped=<span>"img_Tapped"</span>
FlyoutBase.AttachedFlyout=<span>"{StaticResource ResourceFlyoutImage}"</span>
DataContext=<span>"{Binding RelativeSource={RelativeSource Mode=Self}}"</span>/>
</StackPanel>
</<span>Grid</span>></code>
看样子效果还不错嘛。
时间控件的很多其它介绍
在前面我们走马观花地介绍了一大堆控件，当中自然也包含这DatePicker和TimePicker，那么略微高级些的使用方法呢？
假设你想做一个关于健身、闹钟等的App，那么不可避免的会用到时间这些控件了。
<code>
<span><<span>DatePicker</span><span>x:Name</span>=<span>"datePicker"</span><span>Header</span>=<span>"NoMasp Date"</span><span>Foreground</span>=<span>"Beige"</span>/></span>
<span><<span>Button</span><span>x:Name</span>=<span>"btnOK"</span><span>Click</span>=<span>"btnOK_Click"</span><span>Content</span>=<span>"确定"</span><span>Foreground</span>=<span>"Cyan"</span><span>Margin</span>= "<span>292</span>,<span>378</span>,<span>0</span>,<span>352</span>" ></span>
<span><<span>Button.Flyout</span>></span>
<span><<span>Flyout</span>></span>
<span><<span>TextBlock</span><span>x:Name</span>=<span>"tblock1"</span><span>Foreground</span>=<span>"Fuchsia"</span>/></span>
<span></<span>Flyout</span>></span>
<span></<span>Button.Flyout</span>></span>
<span></<span>Button</span>></span>
</code>
那么我们可能须要所选定的时间是未来时间，也就是比应用执行时的时间要大。
获取当前选中的时间给程序的其它部分使用也是非常easy的。我这里的year等都在之前定义过了哦。在函数内定义可是不明智的哟。
<code>
<span>private</span> void btnOK_Click(object sender, RoutedEventArgs e)
{
<span>if</span>(datePicker.<span>Date</span>>DateTimeOffset.<span>Now</span>)
tblock1.Text = <span>string</span>.Format(<span>"你所选中的时间是：{0}。"</span>, datePicker.<span>Date</span>.ToString(<span>"D"</span>));
<span>else</span>
tblock1.Text = <span>"噢！</span></code>
你想要穿越吗？"
; year = datePicker. Date. Year; month = datePicker. Date. Month; day = datePicker. Date. Day; }有意思的事情又来了，假设你是想要做一个时间囊，默认的时间就是10年之后，那么DatePicker的初始事件假设正好就是10年后不是非常好吗。那么我们要做的呢，首先就是给DatePicker的Loaded写一条事件啦。（尽管我认为App是保存不了10年的）
<code><span>private</span><span>void</span><span>datePicker_Loaded</span>(<span>object</span> sender, RoutedEventArgs e)
{
datePicker.Date = DateTimeOffset.Now.AddYears(<span>10</span>);
}</code>
假设不想兴师动众去用DatePicker的Loaded。那么也能够直接在后台代码中这样写。
<code><span>protected</span><span>override</span><span>void</span><span>OnNavigatedTo</span>(NavigationEventArgs e)
{
datePicker.Date = DateTimeOffset.Now.AddYears(<span>10</span>);
}</code>
我还做了一个小測试呢。在Loaded事件中让时间添加11年。在OnNavigatedTo事件中让时间添加10年，结果——结果是添加了11年啦，看来还是自家的Loaded更厉害。
接下来就是TimePicker啦，回到健身的话题，假设哈，6点到18点才适合运动，那么我们的Microsoft Band就做了以下这么个要求（开玩笑啦）。
<code><span>private</span><span>void</span><span>btnOK_Click</span>(<span>object</span> sender, RoutedEventArgs e)
{
TimeSpan startTime = <span>new</span> TimeSpan(<span>6</span>, <span>0</span>, <span>0</span>);
TimeSpan endTime = <span>new</span> TimeSpan(<span>18</span>, <span>0</span>, <span>0</span>);
<span>if</span>(timePicker.Time>=startTime&&timePicker.Time<=endTime)
{
tblock1.Text = <span>string</span>.Format(<span>"这段时间运动都是非常好的哦——{0}。"</span>, timePicker.Time.ToString());
}
<span>else</span>
{
tblock1.Text = <span>"此时间吧不适合运动的吧？"</span>;
}
} </code>
或许你还想控制手环上时间选择器的初始时间，那么代码来了。
<code><span>protected</span><span>override</span><span>void</span><span>OnNavigatedTo</span>(NavigationEventArgs e)
{
timePicker.Time = <span>new</span> TimeSpan(<span>23</span>, <span>0</span>, <span>0</span>);
}</code>
作为强迫症患者呢，每次我设定闹钟的时候都要设置在一个比較好的时间。比方被5整除啦、质数啦。这里能够用MinuteIncrement属性来控制分钟的增量哟，比方增量为5呀。
从小学起就飞得把电子手表的时间给设置成24小时制的。这个也是能够实现的。ClockIdentifier设置成24HourClock就搞定啦。
应用栏
主要的使用方法我们在教程前面的“页面布局与基本导航”中已经讲过了。这里继续补充关于应用栏的很多其它使用方法。
Icon
在之前的学习中，我们知道Icon属性中有非常多非常多系统提前定义，但或许这些还是不够的，如今就来添加几种使用方法。
字符集应用
<code><span><<span>AppBarToggleButton</span><span>Label</span>=<span>"Sigma"</span><span>Click</span>=<span>"AppBarButton_Click"</span>></span><span><<span>AppBarToggleButton.Icon</span>></span><span><<span>FontIcon</span><span>Glyph</span>=<span>"Σ"</span>/></span><span></<span>AppBarToggleButton.Icon</span>></span><span></<span>AppBarToggleButton</span>></span></code>
关于很多其它字符集的应用请訪问维基百科。
PathIcon
我们也能够用路径来绘制一个属于自己的图形哦。以下的图形大概就是9点钟的样子啦。
<code><span><<span>AppBarToggleButton</span><span>Label</span>=<span>"Time"</span><span>Click</span>=<span>"AppBarButton_Click"</span>></span><span><<span>AppBarToggleButton.Icon</span>></span><span><<span>PathIcon</span><span>Data</span>=<span>"F1 M 20,20 21,1L 21,21L 8,21"</span>/></span><span></<span>AppBarToggleButton.Icon</span>></span><span></<span>AppBarToggleButton</span>></span></code>
怎样适应不同的分辨率
怎样适应不同的分辨率这也是值得我们去解决的问题，毕竟不论是从8英寸的平板还是25英寸的台式机，甚至还有4英寸至7英寸的手机，在应用栏button太多而屏幕不够大时，多余的button该怎么办呢？
默认情况下，应用栏图标的宽度都是确定好的100像素哦。
那么我们先来看两张图片好了，由于Windows 10是能够直接调整Modern应用的大小的（而不是windows 8那种仅仅能全屏显示），所以我直接拉伸Modern大小以模拟分辨率的概率啦。
<code><span><<span>Page.BottomAppBar</span>></span><span><<span>AppBar</span><span>x:Name</span>=<span>"bottomAppBar"</span><span>IsSticky</span>=<span>"True"</span>></span><span><<span>Grid</span>></span><span><<span>StackPanel</span><span>x:Name</span>=<span>"leftBottomAppBar"</span><span>Orientation</span>=<span>"Horizontal"</span>></span><span><<span>AppBarButton</span><span>Label</span>=<span>"Like"</span><span>Icon</span>=<span>"Like"</span>/></span><span><<span>AppBarButton</span><span>Label</span>=<span>"Dislike"</span><span>Icon</span>=<span>"Dislike"</span>/></span><span><<span>AppBarButton</span><span>Label</span>=<span>"Delete"</span><span>Icon</span>=<span>"Delete"</span>/></span><span><<span>AppBarButton</span><span>Label</span>=<span>"Download"</span><span>Icon</span>=<span>"Download"</span>/></span><span><<span>AppBarButton</span><span>Label</span>=<span>"Pin"</span><span>Icon</span>=<span>"Pin"</span>/></span><span></<span>StackPanel</span>></span><span><<span>StackPanel</span><span>x:Name</span>=<span>"rightBottomAppBar"</span><span>Orientation</span>=<span>"Horizontal"</span><span>HorizontalAlignment</span>=<span>"Right"</span>></span><span><<span>AppBarButton</span><span>Label</span>=<span>"Play"</span><span>Icon</span>=<span>"Play"</span>/></span><span><<span>AppBarButton</span><span>Label</span>=<span>"Pause"</span><span>Icon</span>=<span>"Pause"</span>/></span><span><<span>AppBarButton</span><span>Label</span>=<span>"Stop"</span><span>Icon</span>=<span>"Stop"</span>/></span><span><<span>AppBarButton</span><span>Label</span>=<span>"Previous"</span><span>Icon</span>=<span>"Previous"</span>/></span><span><<span>AppBarButton</span><span>Label</span>=<span>"Next"</span><span>Icon</span>=<span>"Next"</span>/></span><span></<span>StackPanel</span>></span><span></<span>Grid</span>></span><span></<span>AppBar</span>></span><span></<span>Page.BottomAppBar</span>></span></code>
这里为了调试更加方便，所以使用了IsSticky属性。AppBarButton另一个非常重要的属性哟，之前用不到，只是这里就是核心成员了呢，它就是IsCompact。这个属性能够让应用栏button仅仅显示图标而不显示文字，也就是Label啦。那么我们的工作就要环绕这个属性来展开了。
我们能够这样假设，有一个函数。它有一个布尔变量的參数，參数为真的话呢。那么全部的这些AppBarButton的IsCompact属性也为真。
在以下这段代码中，我们先将bottomAppBar的自对象选取为root，这样一来的话呢。假设应用中还有顶部的应用栏，就不会相互干扰啦。然后逐步取出root和panel中的自对象就好咯。
<code><span>private</span><span>void</span><span>AppBarButtonCompact</span>(<span>bool</span> isCompact)
{
Panel root = bottomAppBar.Content <span>as</span> Panel;
<span>if</span>(root!=<span>null</span>)
{
<span>foreach</span>(Panel panel <span>in</span> root.Children)
{
<span>foreach</span> (ICommandBarElement child <span>in</span> panel.Children)
{
child.IsCompact = isCompact;
}
}
}
}</code>
接下来还须要推断究竟需不须要启用IsCompact。那这又是由什么决定的呢。既然前面提到是由于屏幕的分辨率，也就是所应用所占用的宽度会导致应用栏发生重叠。那么答案就毫无疑问了。
看到以下的代码相信大家都明确了，至于为何是宽度的界限在1000呢，那是由于有10个AppBarButton，前面也说了它们的宽度是100。
（不带Label的话呢。就仅仅须要60像素啦。
）
<code><span>void</span> AppSizeChanged(<span>object</span> sender, SizeChangedEventArgs e)
{
<span>if</span> (e.NewSize.Width != e.PreviousSize.Width)
{
<span>if</span> (e.NewSize.Width < <span>1000</span>)
{
AppBarButtonCompact(<span>true</span>);
}
<span>else</span>
{
AppBarButtonCompact(<span>false</span>);
}
}
}</code>
来张图片以示搞定这个问题了吧。
可是像我这么钻牛角尖的人，10个AppBarButton用这样的方式搞定了，那20个呢？我们就来演示一下，把之前XAML中的AppBarButton复制粘贴一番。
假设是2K、4K的屏幕应对20个没问题啊。但我这1920X1080的屏幕就放不下了。
那么这又有什么办法能够解决的吗？当然有啦，将这20个图标切成2列就好啦。我们首先在Grid中加入一行。
<code><span><<span>Grid.RowDefinitions</span>></span><span><<span>RowDefinition</span><span>Height</span>=<span>"auto"</span>/></span><span><<span>RowDefinition</span><span>Height</span>=<span>"auto"</span>/></span><span></<span>Grid.RowDefinitions</span>></span></code>
再通过以下这张方式来调整它处于哪一行，以及在水平方向的右側还是左側。这里我将两行都设置在右側啦。
<code>leftBottomAppBar.<span>SetValue</span>(<span>Grid</span>.RowProperty, <span>1</span>); leftBottomAppBar.<span>SetValue</span>(HorizontalAlignmentProperty, HorizontalAlignment.<span>Right</span>); </code>
当然了，这样一来就能够放40个AppBarButton啦，假设缩小应用的大小的话为了容纳很多其它还能够用IsCompact属性呢。只是没有哪个应用做成这样吧。
另外呢，假设把应用栏设计成这样的话。
<code><span><<span>Page.BottomAppBar</span>></span><span><<span>AppBar</span><span>x:Name</span>=<span>"bottomAppBar"</span><span>IsSticky</span>=<span>"True"</span>></span><span><<span>Grid</span>></span><span><<span>Grid.ColumnDefinitions</span>></span><span><<span>ColumnDefinition</span><span>Width</span>=<span>"*"</span>/></span><span><<span>ColumnDefinition</span><span>Width</span>=<span>"*"</span>/></span><span></<span>Grid.ColumnDefinitions</span>></span><span><<span>StackPanel</span><span>Grid.Column</span>=<span>"0"</span><span>x:Name</span>=<span>"leftBottomAppBar"</span><span>Orientation</span>=<span>"Horizontal"</span><span>HorizontalAlignment</span>=<span>"Left"</span>></span><span><<span>AppBarButton</span><span>Label</span>=<span>"Like"</span><span>Icon</span>=<span>"Like"</span>/></span><span><<span>AppBarButton</span><span>Label</span>=<span>"Dislike"</span><span>Icon</span>=<span>"Dislike"</span>/></span><span><<span>AppBarButton</span><span>Label</span>=<span>"Delete"</span><span>Icon</span>=<span>"Delete"</span>/></span><span><<span>AppBarButton</span><span>Label</span>=<span>"Download"</span><span>Icon</span>=<span>"Download"</span>/></span><span><<span>AppBarButton</span><span>Label</span>=<span>"Pin"</span><span>Icon</span>=<span>"Pin"</span>/></span><span></<span>StackPanel</span>></span><span><<span>StackPanel</span><span>Grid.Column</span>=<span>"1"</span><span>x:Name</span>=<span>"rightBottomAppBar"</span><span>Orientation</span>=<span>"Horizontal"</span><span>HorizontalAlignment</span>=<span>"Right"</span>></span><span><<span>AppBarButton</span><span>Label</span>=<span>"Play"</span><span>Icon</span>=<span>"Play"</span>/></span><span><<span>AppBarButton</span><span>Label</span>=<span>"Pause"</span><span>Icon</span>=<span>"Pause"</span>/></span><span><<span>AppBarButton</span><span>Label</span>=<span>"Stop"</span><span>Icon</span>=<span>"Stop"</span>/></span><span><<span>AppBarButton</span><span>Label</span>=<span>"Previous"</span><span>Icon</span>=<span>"Previous"</span>/></span><span><<span>AppBarButton</span><span>Label</span>=<span>"Next"</span><span>Icon</span>=<span>"Next"</span>/></span><span></<span>StackPanel</span>></span><span></<span>Grid</span>></span><span></<span>AppBar</span>></span><span></<span>Page.BottomAppBar</span>></span></code>
那么对于Windows 10，在拉伸的过程中，中间部分的控件就会慢慢消失啦。以下这张图片呢，是我在拉伸到中间有2个控件刚好重叠的时候啦。
至于把AppBarButton设计成这样是好是坏大家自己决定咯。我反正认为这样不好呢。只是有意思的是，即便如此。它们彼此的Click事件还都是有效的噢。会区分左右两部分，而不会叠在一起。
当然啦，这个的应用远不是应用栏这么简单哟。对于其它的前景，比方有两个TextBlock在屏幕左右两側，当应用把收缩变小之后也能够让这个TextBlock叠成2层在屏幕的一边。
在应用栏上加入菜单
我们都见过有菜单的应用栏button对吧，这个的实现事实上也挺简单的。用Flyout属性就好了。
<code><span><<span>Page.BottomAppBar</span>></span><span><<span>CommandBar</span>></span><span><<span>AppBarButton</span><span>Icon</span>=<span>"Rotate"</span><span>Label</span>=<span>"Rotate"</span>></span><span><<span>AppBarButton.Flyout</span>></span><span><<span>MenuFlyout</span>></span><span><<span>MenuFlyoutItem</span><span>Text</span>=<span>"Rotate 90"</span><span>Click</span>=<span>"MenuFlyoutItem_Click"</span><span>Tag</span>=<span>"Rotate90"</span>/></span><span><<span>MenuFlyoutItem</span><span>Text</span>=<span>"Rotate 180"</span><span>Click</span>=<span>"MenuFlyoutItem_Click"</span><span>Tag</span>=<span>"Rotate180"</span>/></span><span><<span>MenuFlyoutItem</span><span>Text</span>=<span>"Rotate 270"</span><span>Click</span>=<span>"MenuFlyoutItem_Click"</span><span>Tag</span>=<span>"Rotate270"</span>/></span><span></<span>MenuFlyout</span>></span><span></<span>AppBarButton.Flyout</span>></span><span></<span>AppBarButton</span>></span><span></<span>CommandBar</span>></span><span></<span>Page.BottomAppBar</span>></span></code>
Tag属性。就相当于做一个标签。以下这段代码就让Flyout菜单发挥作用了。
<code><span>private</span><span>void</span><span>MenuFlyoutItem_Click</span>(<span>object</span> sender, RoutedEventArgs e)
{
MenuFlyoutItem selectedItem = sender <span>as</span> MenuFlyoutItem;
<span>if</span> (selectedItem != <span>null</span>)
{
<span>if</span> (selectedItem.Tag.ToString() == <span>"Rotate90"</span>)
{
DoRotate(<span>90</span>);
}
<span>else</span><span>if</span> (selectedItem.Tag.ToString() == <span>"Rotate180"</span>)
{
DoRotate(<span>180</span>);
}
<span>else</span><span>if</span> (selectedItem.Tag.ToString() == <span>"Rotate270"</span>)
{
DoRotate(<span>270</span>);
}
}
}
</code>
原文：http://www.cnblogs.com/lxjshuju/p/7223713.html
【说明】：本文章由站长整理发布，文章内容不代表本站观点，如文中有侵权行为，请与本站客服联系(QQ:254677821)！