【萬裡征程——Windows App開發】控制項大集合【修補中】

標籤：

使用諸如 Blend for Visual Studio 或 Microsoft Visual Studio XAML 設計器的設計工具。
在 Visual Studio XAML 編輯器中將控制項添加到 XAML 標記中。
在代碼中添加控制項。 當應用運行時會看到你在代碼中添加的控制項，但在 Visual Studio XAML 設計器中看不到。

前面我們已經用過了Grid、Button等控制項，現在就來系統地看看關於控制項的一些屬性、事件等等。

毫無疑問第一步就是要來添加控制項，那麼添加控制項有哪幾種方式呢。前面我們都是直接在XAML中寫的控制項或者從工具箱中拖拽出來。其實還有2種，一種比較複雜但我們以後也會用到，那就是在C#後台代碼中添加控制項；還有一種就是在Blend for Visual Studio中拖拽控制項了。後者的功能也非常強大，比如要使用動畫之類的，這個設計器就能發揮作用了。

控制項的屬性相比大家都已經會用了，一來可以直接在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;}

前面我們已經瞭解了如果添加控制項、添加/修改屬性、添加/修改事件。也瞭解一下控制項的樣式，雖然說到樣式大家想到的可能是css。想必大家都玩過2048吧，遊戲中有許多許多的方格，那麼這些方格的樣式會不會一個一個去定義呢，當然不是啦，可以直接用樣式資源來定位到所有的Button。後面我們也會來實踐一下如何寫一個2048小遊戲的。

以下是我寫的2048裡面的樣式啦，

<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屬性為透明度。

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

【萬裡征程——Windows App開發】控制項大集合【修補中】