1. 程式人生 > >【萬裏征程——Windows App開發】控件大集合1

【萬裏征程——Windows App開發】控件大集合1

new 也有 spl sources csdn ++ 你在 mark 博客

加入控件的方式有多種。大家更喜歡哪一種呢?
1)使用諸如 Blend for Visual Studio 或 Microsoft Visual Studio XAML 設計器的設計工具。
2)在 Visual Studio XAML 編輯器中將控件加入到 XAML 標記中。
3)在代碼中加入控件。 當應用執行時會看到你在代碼中加入的控件。但在 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屬性為透明度。

技術分享

大家都知道類能夠繼承,樣式也是能夠繼承的。

盡管這篇博客內容比較少,但更精彩的內容還在後面呢。感謝大家的支持!



感謝您的訪問,希望對您有所幫助。

歡迎大家關註或收藏、評論或點贊。


為使本文得到斧正和提問,轉載請註明出處:
http://blog.csdn.net/nomasp


【萬裏征程——Windows App開發】控件大集合1