控件的屬性、事件與樣式資源

控件的屬性、事件與樣式資源

如何添加控件

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

• 使用諸如 Blend for Visual Studio 或 Microsoft Visual Studio XAML 設(shè)計(jì)器的設(shè)計(jì)工具。
• 在 Visual Studio XAML 編輯器中將控件添加到 XAML 代碼中。
• 在代碼中添加控件。 注意：當(dāng)應(yīng)用運(yùn)行時(shí)會看到你在代碼中添加的控件，但在 Visual Studio XAML 設(shè)計(jì)器中看不到。

前面我們通過在工具箱拖住控件以及直接在寫 XAML 代碼來設(shè)置控件，在教程的后面，我們會看到在 C# 后臺代碼中添加控件。Blend 我們暫時(shí)還沒有用到，不過其在繪制圖形和動畫上可謂非常強(qiáng)大和優(yōu)秀。

設(shè)置控件的屬性

控件的屬性相比大家都已經(jīng)會用了，一來可以直接在XAML中添加屬性，二來可以在屬性視圖中添加和修改屬性。

為控件添加事件

如果要添加和修改事件呢，同樣在屬性視圖中，點(diǎn)擊右上角的閃電圖標(biāo)即可。如果要添加 Click 事件，那么在 Click 的輸入框中輸入好事件名稱后直接按 Enter 即可。此時(shí) VS 就會自動跳轉(zhuǎn)到 C# 后臺代碼中，第一個(gè)參數(shù) sender 是對處理程序所附加的對象的應(yīng)用，第二參數(shù)是事件數(shù)據(jù)，它通常在簽名中顯示為 e 參數(shù)。

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

上面的這段代碼這會將所點(diǎn)擊的 Button 的高設(shè)置為 400，寬設(shè)置為 320；除了這種方式外，也可以按如下操作，其中 btnSetStyle 是當(dāng)前 Button 的名字：

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

除此之外，我們也可以不在 XAML 中定義 Click 事件，按照如下操作也可以達(dá)到相同的效果，它會將兩個(gè)事件相互關(guān)聯(lián)。

public MainPage()
{
     this.InitializeComponent();
     btnSetStyle.Click += new RoutedEventHandler(btnSetStyle_Click);
}
private void btnSetStyle_Click(object sender, RoutedEventArgs e)
{
    btnSetStyle.Height = 400;
    btnSetStyle.Width = 320;
}

為控件設(shè)置樣式資源

即便沒有添加過資源，也不清楚什么是樣式，沒關(guān)系，想必大家都玩過 2048 吧。游戲中有許多方格，那這些方格的樣式會不會一個(gè)個(gè)去定義呢，當(dāng)然不是，可以直接用樣式資源來定位到所有的 Button。

以下是一個(gè)基本樣式，<Page.Resources/> 應(yīng)該在最外層的 Grid 外面，和 AppBar 等位于同一級別。其內(nèi)有一個(gè) Style 樣式，TargetType 指向目標(biāo)控件，Property 為目標(biāo)空間的具體屬性名，其值用 Value 列出即可。后面的容器部分我們暫時(shí)不作考慮啦，后面都會講解的。

<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>

但是這里也有一個(gè)問題，如果我們有 10 個(gè) Button 控件，卻只想其中 8 個(gè)用到這些定義，另外 2 個(gè)想用另一種控件，那該怎么辦呢？

將樣式定義為資源，其實(shí)是有 2 中方式的。

一種就是直接用 Style 的 TargetType 屬性來定義到所有的目標(biāo)控件。

另一種則除了用 TargetType 屬性外，還可以用 x:key 屬性，然后再具體的控件中庸顯式的關(guān)鍵字 StaticResource 來設(shè)置具體的 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 屬性為透明度。

大家都知道類可以繼承，樣式也是可以繼承的。