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

怎样加入控件

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

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);
}

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

            

为控件设置样式资源

即便没有加入过资源，也不清楚什么是样式。没关系，想必大家都玩过2048吧。

游戏中有很多方格，那这些方格的样式会不会一个个去定义呢，当然不是，能够直接用样式资源来定位到全部的Button。

以下是一个基本样式，

                <Page.Resources>
   <Style TargetType="Button">
      <SetterProperty="FontWeight"Value="Bold"/>
      <SetterProperty="FontSize"Value="40"/>
      <SetterProperty="HorizontalAlignment"Value="Center"></Setter>
      <SetterProperty="VerticalAlignment"Value="Center"></Setter>
      <SetterProperty="Background"Value="Gray"></Setter>
      <SetterProperty="Width"Value="100"></Setter>
      <SetterProperty="Height"Value="100"></Setter>
      <SetterProperty="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">              
         <SetterProperty="FontStyle"Value="Oblique" />
         <SetterProperty="FontSize"Value="20" />
         <SetterProperty="BorderBrush"Value="Green" />
         <SetterProperty="BorderThickness"Value="5" />
         <SetterProperty="Foreground"Value="Orange" />
         <SetterProperty="Height"Value="80"/>
         <SetterProperty="Width"Value="160"/>
     </Style>

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

详细效果见下图。当中Opacity属性为透明度。

大家都知道类能够继承，样式也是能够继承的。

部分控件介绍

通过前面的学习，已经见过一些控件了，如今起将逐步见到很多其它控件。

但由于控件太多。教程中无法一一介绍，请自行举一反三。

教程内容也将不断更新。

Button

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

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

Button有一个非常有意思的属性。

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

仅仅要把鼠标放到Button上面就会显示出这张图片了，也叫做帮助提示吧。事实上更简单的方法是以下这样的。

它显示的是一个后退的样式，并且鼠标放上去会有文字Back提示。

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

ToggleSwitch

这个控件和Button非常像。它像开关一样。

                
                    <ToggleSwitchx:Name="toggleSwitch1"Header="NoMasp Toggle"OnContent="On"OffContent="Off"Toggled="ToggleSwitch_Toggled"Margin="409,468,0,227"/>
                    <ToggleSwitchx: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提供了下拉列表，自然也是一个非经常常使用的控件。

                <ComboBox Height="50" Width="200" Name="cbox1"  SelectionChanged="cbox1_SelectionChanged" Margin="17,47,1049,671">
     <x:String>Select1</x:String>
     <x:String>Select2</x:String>
     <x:String>Select3</x:String>
     <x:String>Select4</x:String>
</ComboBox>
            

ListBox

ListBox控件和ComboBox非常相似，都能够让用户选择已经嵌入在列表中的选项。使用方法例如以下：

                <ListBox x:Name="listBox1" SelectionChanged="listBox1_SelectionChanged" Width="100">
    <x:String>Item1</x:String>
    <x:String>Item2</x:String>
    <x:String>Item3</x:String>
</ListBox>
            

DatePicker、TimePicker

Winows平台设置时间的控件倒是非常有特色，就是DatePicker和TimePicker。

                
                    <DatePickerForeground="Red"Header="NoMasp Date"Margin="3,177,0,533"/>
                    <TimePickerForeground="Green"Header="NoMasp Time"Margin="3,246,0,464"Width="289"/>
                
            

以下既是截图，也是写这篇教程的时间。

这个控件的很多其它介绍也在教程随后的“时间控件的很多其它介绍”中。

FlipView

FlipView是一个能够让用户逐个浏览的项目集合的控件。以下是相关的演示样例代码。CommonAssets文件夹全然能够定义在Shared文件夹下。这样WP也能够拿来用了。

                
                    <FlipView>
                    <ImageSource="CommonAssets/5083.jpg"/>
                    <ImageSource="CommonAssets/5503.jpg"/>
                    <ImageSource="CommonAssets/6121.jpg"/>
                    </FlipView>
                
            

除此之外呢，我们还能够在后台代码中加入，以下的第二段代码和第一段相似。只是是用的List。

                FlipView flipView = new FlipView();
flipView.Items.Add("Item 1");
flipView.Items.Add("Item 2");
flipView.SelectionChanged += filpView_SelectionChanged;
grid1.Children.Add(flipView);
            

                List<String> listItems = new List<string>();
listItems.Add("Item 1");
listItems.Add("Item 2");                                                                                                       
FlipView flipView = new FlipView();
flipView.ItemsSource = listItems;
flipView.SelectionChanged += filpView_SelectionChanged;          
grid1.Children.Add(flipView);
            

除了这2种方式之外呢，用CollectionViewSource来绑定数据也是全然没问题的。

                
                    <Page.Resources>
                    <CollectionViewSourcex:Name="collectionVSFlipView"Source="{Binding Items}"/>
                    </Page.Resources>
                
            

上面是一段资源文件。然后FlipView ListView的ItemsSource加入静态资源绑定就OK了。

                
                    <FlipViewx:Name="flipView"ItemsSource="{Binding Source={StaticResource collectionVSFlipView}}"/>
                
            

假设大家自己试过FlipView就会发现它的图片资源等都是左右滚动的，假设要用上下滚动呢？那就用以下这个ItemsPanelTemplate模板就好了。

                
                    <FlipView.ItemsPanel>
                    <ItemsPanelTemplate>
                    <VirtualizingStackPanelOrientation="Vertical"/>
                    </ItemsPanelTemplate>
                    </FlipView.ItemsPanel>
                
            

ScrollBar

假设有缩放图片。并且能够滚动以查看图片的须要，那么就能够用ScrollBar啦。

这主要是能留给图片的位置太小以至于图片无法全部显示出来。

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

Viewbox

另一个控件则能够将图片等缩放到指定的大小的，那就是Viewbox。

大家看看以下这个图。是不是非常炫酷呢。

                
                    <ViewboxMaxHeight="33"MaxWidth="33"Margin="23.5,35,-26,-35">
                    <ImageSource="CommonAssets/5503.jpg"Opacity="0.9 "/>
                    </Viewbox>
                    <ViewboxMaxHeight="66"MaxWidth="66"Margin="26,35,-26,-35">
                    <ImageSource="CommonAssets/5503.jpg"Opacity="0.6"/>
                    </Viewbox>
                    <ViewboxMaxHeight="99"MaxWidth="99"Margin="26,35,-26,-35">
                    <ImageSource="CommonAssets/5503.jpg"Opacity="0.3"/>
                    </Viewbox>
                
            

GridView

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

                <GridView x:Name="gView1" SelectionChanged="gView1_SelectionChanged">
    <x:String>Item1</x:String>
    <x:String>Item2</x:String>
    <x:String>Item3</x:String>
</GridView>
            

HyperlinkButton

HyperlinkButton既能够作为Button来用，也能够用来做超链接。

                
                    <HyperlinkButtonContent="NoMasp--CSDN"NavigateUri="http://blog.csdn.net/nomasp" />
                
            

ProgressBar

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

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

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

ProgressRing

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

                
                    <ProgressRingx:Name="progressRing1"IsActive="True" />
                
            

Slider

比方说win8上的音量呀、屏幕亮度呀，这些地方都用到了滑动条。

这里来看看它的ThumbToolTipValueConverter属性吧。

为了将值绑定到Slider上，我们须要有一个类，这个类须要一个为数据绑定提供值转换的接口。可视化元素也就是Slider为绑定目标。其有2个方向：数据源->数据->绑定目标，绑定目标->数据->数据源。

我们须要写一个类，能够直接在MainPage.xaml.cs下写，但更好是单独新建一个类，再考虑到这个是通用应用，所以将类新建到Shared下比較合适。

                
                    public
                    class ThumbToolTipValueConverter : Windows.UI.Xaml.Data.IValueConverter
{
    publicobjectConvert(objectvalue, Type targetType, object parameter, string language)
    {
        if(valueisdouble)
        {
                double dValue= System.Convert.ToDouble(value);
                return dValue;                
        }
        returnnull;
     }

    publicobjectConvertBack(objectvalue, Type targetType, object parameter, string language)
    {
        returnnull;
    }
}
            

然后加入以下代码作为本地实例化的资源就可以。

                
                    <Page.Resources>
                    <local:ThumbToolTipValueConverterx:Key="thumbToolTipValueC"/>
                    </Page.Resources>
                
            

最后就是传说中的本体啦。

                
                    <SliderWidth="200"Height="50"Name="slider1"ThumbToolTipValueConverter="{StaticResource thumbToolTipValueC}" />
                
            

我们还能够加入一个Button和TextBlock，让点击来在TextBlock上显示Slider的Value。

                
                    private
                    void
                    btnGetSliderValue_Click(object sender, RoutedEventArgs e)
{
    tblockSlider.Text = slider1.Value.ToString();
}
            

用浮出控件做预览效果

在前面学习控件的时候。我们已经见过了MessageDialog了，关于Button另一个浮出控件Flyout哦。

详细是怎样用呢？接下来就一起看看。

我们还是延续前面的那个演示样例好了。那么，代码来了。

                
                    <Buttonx:Name="btnWhat"Content="这是什么？">
                    <Button.Flyout>
                    <Flyout>
                    <StackPanel>
                    <TextBlockWidth="430"Style="{StaticResource BaseTextBlockStyle}"Text="噢！你刚刚又踩到地雷了，要撤销吗？"Foreground="Red"FontSize="25"/>
                    <ButtonClick="btnUndo_Click"Margin="12"Content="撤销"/>
                    </StackPanel>
                    </Flyout>
                    </Button.Flyout>
                    </Button>
                
            

当我们点击了撤销button后。当然须要btnWhatbutton的Flyout消失掉，这个嘛，也仅仅要1行代码啦。另外这个踩雷的逻辑这里就不展开啦.

                
                    private
                    void
                    btnUndo_Click(object sender, RoutedEventArgs e)
{
     btnWhat.Flyout.Hide();
}
            

更为重要的是在于这些在WP8上也是通用的，这才是核心所在。既然这一篇教程主要是浮出控件。假设能够借助浮出产生预览图像的效果会不会非常棒呢？先来看张执行截图吧。

以下都是代码啦，什么Binding呀之类的都不用管啦。须要注意的地方也就是那些Height和Width可能须要拿来调整一下。

                   <Page.Resources>
        <Flyout x:Key="ResourceFlyoutImage" Placement="Right">                            
            <Image Source="{Binding Path=Source}" MaxHeight="800" MaxWidth="1400" Stretch="Uniform"/>
            <Flyout.FlyoutPresenterStyle>
                <Style TargetType="FlyoutPresenter">
                    <SetterProperty="MinHeight"Value="900"/>
                    <SetterProperty="MinWidth"Value="1600"/>
                    <SetterProperty="BorderThickness"Value="3"/>
                    <SetterProperty="Background"Value="Wheat"/>
                    <SetterProperty="BorderBrush"Value="Green"/>
                    <SetterProperty="ScrollViewer.ZoomMode"Value="Enabled"/>        
                </Style>
            </Flyout.FlyoutPresenterStyle>
        </Flyout>
    </Page.Resources>    

    <Grid>
        <StackPanel HorizontalAlignment="Left" Orientation="Vertical">
            <Image Source="Assets/14152.jpg" Width="100" Height="100" Margin="12" Tapped="img_Tapped"  
                   FlyoutBase.AttachedFlyout="{StaticResource ResourceFlyoutImage}"                        
                   DataContext="{Binding RelativeSource={RelativeSource Mode=Self}}"/>

            <Image Source="Assets/14158.jpg" Width="100" Height="100" Margin="12" Tapped="img_Tapped"  
                   FlyoutBase.AttachedFlyout="{StaticResource ResourceFlyoutImage}"                                                 
                   DataContext="{Binding RelativeSource={RelativeSource Mode=Self}}"/>

            <Image Source="Assets/14160.jpg" Width="100" Height="100" Margin="12" Tapped="img_Tapped"    
                   FlyoutBase.AttachedFlyout="{StaticResource ResourceFlyoutImage}"                           
                   DataContext="{Binding RelativeSource={RelativeSource Mode=Self}}"/>

            <Image Source="Assets/14164.jpg" Width="100" Height="100" Margin="12" Tapped="img_Tapped"      
                   FlyoutBase.AttachedFlyout="{StaticResource ResourceFlyoutImage}"                                                  
                   DataContext="{Binding RelativeSource={RelativeSource Mode=Self}}"/>
        </StackPanel>
    </Grid>
            

                
                    private
                    void
                    img_Tapped(object sender, TappedRoutedEventArgs e)
{
    FlyoutBase.ShowAttachedFlyout((FrameworkElement)sender);
}             
            

相同的。在WP上也是能够得哦，一下是做了些改动后的XAML代码啦。

正如大家所见，我把图片都缩小了，Placement也设置成了Top，StactPanel的属性也做了改动。

                    <Page.Resources>
        <Flyout x:Key="ResourceFlyoutImage" Placement="Top">
            <Image Source="{Binding Path=Source}" MaxHeight="600" MaxWidth="400" Stretch="Uniform"/>
            <Flyout.FlyoutPresenterStyle>
                <Style TargetType="FlyoutPresenter">
                    <SetterProperty="MinHeight"Value="600"/>
                    <SetterProperty="MinWidth"Value="400"/>
                    <SetterProperty="BorderThickness"Value="3"/>
                    <SetterProperty="Background"Value="Wheat"/>
                    <SetterProperty="BorderBrush"Value="Green"/>
                    <SetterProperty="ScrollViewer.ZoomMode"Value="Enabled"/>
                </Style>
            </Flyout.FlyoutPresenterStyle>
        </Flyout>
    </Page.Resources>

    <Grid>
        <StackPanel VerticalAlignment="Bottom" Orientation="Horizontal">
            <Image Source="Assets/14152.jpg" Width="72" Height="60" Margin="12" Tapped="img_Tapped"  
                   FlyoutBase.AttachedFlyout="{StaticResource ResourceFlyoutImage}"                        
                   DataContext="{Binding RelativeSource={RelativeSource Mode=Self}}"/>

            <Image Source="Assets/14158.jpg" Width="72" Height="60" Margin="12" Tapped="img_Tapped"  
                   FlyoutBase.AttachedFlyout="{StaticResource ResourceFlyoutImage}"                                                 
                   DataContext="{Binding RelativeSource={RelativeSource Mode=Self}}"/>

            <Image Source="Assets/14160.jpg" Width="72" Height="60" Margin="12" Tapped="img_Tapped"    
                   FlyoutBase.AttachedFlyout="{StaticResource ResourceFlyoutImage}"                           
                   DataContext="{Binding RelativeSource={RelativeSource Mode=Self}}"/>

            <Image Source="Assets/14164.jpg" Width="72" Height="60" Margin="12" Tapped="img_Tapped"      
                   FlyoutBase.AttachedFlyout="{StaticResource ResourceFlyoutImage}"                                                  
                   DataContext="{Binding RelativeSource={RelativeSource Mode=Self}}"/>
        </StackPanel>
    </Grid>
            

看样子效果还不错嘛。

时间控件的很多其它介绍

在前面我们走马观花地介绍了一大堆控件，当中自然也包含这DatePicker和TimePicker，那么略微高级些的使用方法呢？

假设你想做一个关于健身、闹钟等的App，那么不可避免的会用到时间这些控件了。

                
                    <DatePickerx:Name="datePicker"Header="NoMasp Date"Foreground="Beige"/>
                    <Buttonx:Name="btnOK"Click="btnOK_Click"Content="确定"Foreground="Cyan"Margin= "292,378,0,352" >
                    <Button.Flyout>
                    <Flyout>
                    <TextBlockx:Name="tblock1"Foreground="Fuchsia"/>
                    </Flyout>
                    </Button.Flyout>
                    </Button>
                
            

那么我们可能须要所选定的时间是未来时间，也就是比应用执行时的时间要大。

获取当前选中的时间给程序的其它部分使用也是非常easy的。我这里的year等都在之前定义过了哦。在函数内定义可是不明智的哟。

                
                    private void btnOK_Click(object sender, RoutedEventArgs e)
{
    if(datePicker.Date>DateTimeOffset.Now)
        tblock1.Text = string.Format("你所选中的时间是：{0}。", datePicker.Date.ToString("D"));
    else
        tblock1.Text = "噢！