【UWP通用应用开发】控件、应用栏

控件的属性、事件与样式资源

如何添加控件

添加控件的方式有多种，大家更喜欢下面哪一种呢？

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参数。

private void btnSetStyle_Click(object sender, RoutedEventArgs e)
{
    Button b = (Button)sender;
    b.Height = 400;
    b.Width = 320;
}

上面的这段代码这会将所点击的Button的高设置为400，宽设置为320；除了这种方式外，也可以按如下操作，其中btnSetStyle是当前Button的名字：

private void btnSetStyle_Click(object sender, RoutedEventArgs e)
{
    btnSetStyle.Height = 400;
    btnSetStyle.Width = 320;
}

除此之外，我们也可以不在XAML中定义Click事件，按照如下操作也可以达到相同的效果，它会将两个事件相互关联。

public MainPage()
{
     this.InitializeComponent();

     btnSetStyle.Click += new RoutedEventHandler(btnSetStyle_Click);
}

private void btnSetStyle_Click(object sender, RoutedEventArgs e)
{
    btnSetStyle.Height = 400;
    btnSetStyle.Width = 320;
}

为控件设置样式资源

即便没有添加过资源，也不清楚什么是样式，没关系，想必大家都玩过2048吧。游戏中有许多方格，那这些方格的样式会不会一个个去定义呢，当然不是，可以直接用样式资源来定位到所有的Button。

以下是一个基本样式，

<Page.Resources>
   <Style TargetType="Button">
      <Setter Property="FontWeight" Value="Bold"/>
      <Setter Property="FontSize" Value="40"/>
      <Setter Property="HorizontalAlignment" Value="Center"></Setter>
      <Setter Property="VerticalAlignment" Value="Center"></Setter>
      <Setter Property="Background" Value="Gray"></Setter>
      <Setter Property="Width" Value="100"></Setter>
      <Setter Property="Height" Value="100"></Setter>
      <Setter Property="Template">
          <Setter.Value>
              <ControlTemplate TargetType="Button">
                  <Grid x:Name="Grid" Background="Transparent">
                      <Border x:Name="Border" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" Background="{TemplateBinding Background}" >
                          <ContentPresenter x:Name="ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="Center"  VerticalAlignment="Center"/>
                       </Border>
                   </Grid>
               </ControlTemplate>
           </Setter.Value>
       </Setter>
    </Style>
</Page.Resources>

但是这里也有一个问题，如果我们有10个Button控件，却只想其中8个用到这些定义，另外2个想用另一种控件，那该怎么办呢？

将样式定义为资源，其实是有2中方式的。

一种就是直接用Style的TargetType属性来定义到所有的目标控件。

另一种则除了用TargetType属性外，还可以用x:key属性，然后再具体的控件中庸显式的关键字StaticResource来设置具体的Style属性。

<Page.Resources>     
     <Style TargetType="Button">              
         <Setter Property="FontStyle" Value="Oblique" />
         <Setter Property="FontSize" Value="20" />
         <Setter Property="BorderBrush" Value="Green" />
         <Setter Property="BorderThickness" Value="5" />
         <Setter Property="Foreground" Value="Orange" />
         <Setter Property="Height" Value="80"/>
         <Setter Property="Width" Value="160"/>
     </Style>

     <Style x:Key="OtherStyle" TargetType="Button">
         <Setter Property="FontStyle" Value="Italic" />
         <Setter Property="FontSize" Value="16" />
         <Setter Property="Foreground" Value="Lavender" />
         <Setter Property="Height" Value="160"/>
         <Setter Property="Width" Value="320"/>
         <Setter Property="Opacity" Value="0.2"/>
     </Style>                                                            
</Page.Resources>

具体效果见下图，其中Opacity属性为透明度。

大家都知道类可以继承，样式也是可以继承的。

部分控件介绍

通过前面的学习，已经见过一些控件了，现在起将逐步见到更多控件。但由于控件太多，教程中无法一一介绍，请自行举一反三。教程内容也将不断更新。

Button

前面最常用的控件就是Button了，Button还有一个有意思的属性，当把鼠标指针放在Button上时，就会在Button的头顶冒出一串文本。

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

Button有一个很有意思的属性。

<Button Content="摩天轮" Margin="134,363,0,367">               
    <ToolTipService.ToolTip>
        <Image MaxHeight="80" MaxWidth="100" Source="Assets/343219.jpg"/>       
    </ToolTipService.ToolTip>     
</Button>

只要把鼠标放到Button上面就会显示出这张图片了，也叫做帮助提示吧。其实更简单的方法是下面这种。它显示的是一个后退的样式，而且鼠标放上去会有文字Back提示。

<Button Content="摩天轮" ToolTipService.ToolTip="Back"
                Style="{StaticResource NavigationBackButtonNormalStyle}" />  

ToggleSwitch

这个控件和Button很像，它像开关一样。

<ToggleSwitch x:Name="toggleSwitch1" Header="NoMasp Toggle" 
      OnContent="On" OffContent="Off" Toggled="ToggleSwitch_Toggled" 
      Margin="409,468,0,227"/>

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

MessageDialog

这控件和Button一起讲还蛮合适的，我们随意添加一个Button，然后写好Click事件如下。

private async void Button_Click(object sender, RoutedEventArgs e)
{
    Windows.UI.Popups.MessageDialog messageDialog =
        new Windows.UI.Popups.MessageDialog("噢，你刚刚踩到了地雷！");
    await messageDialog.ShowAsync();
}

注意要在函数上加上async表示异步。

如果需要预览效果，可以参见教程随后的“用浮出控件做预览效果”。

ComboBox

ComboBox提供了下拉列表