《SilverLight2快速入門》之基本控件Button

前面我們搭建了開發環境，并且建立了一個基本的SilverLight應用程式。本節我們開始研究界面控件的用法。

注意：

做SilverLight有一點需要記住，這是運作在用戶端宿主環境中的，是以這裡的控件不是伺服器控件。換句話說，SilverLight的運作需要用戶端安裝.NET Framework 3，雖然宿主環境是浏覽器，但是程式是下載下傳到本地運作的，這和WPF機理一緻，畢竟SilverLight代号是WPF/E。

我們所用到的标準控件都來自System.Windows.Controls 命名空間，具體成員說明可以查閱SDK。

Button控件絕對是最常用的控件。是以第一個講解。其實我們在Hello程式裡見過了。我們舉個例子說明Button的聲明和事件綁定，順便通過示範來了解控件在本地運作的機理。

<UserControl x:Class="_51CTO.lesson02.Button" 

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    

        Width="400" Height="300"> 

        <Grid x:Name="LayoutRoot" Background="White"> 

                <Button Name="button1" Width="200" Height="100" Content="這是一個按鈕" Click="Button_Click" ></Button> 

        </Grid> 

</UserControl>

上面聲明了一個Button，文法與ASP.NET控件寫法基本一緻。

namespace _51CTO.lesson02 

{ 

        public partial class Button : UserControl 

        { 

                private int times=0; 

                public Button() 

                { 

                        InitializeComponent(); 

                } 

                private void Button_Click(object sender, RoutedEventArgs e) 

                        times++; 

                        MessageBox.Show(times.ToString(), "提示", MessageBoxButton.OK); 

        } 

}

這是SilverLight XAML C#代碼，實作計數器累加和顯示。與ASP.NET不同，我們已不需要考慮計數器狀态儲存的問題了。

運作結果如下：

這是個很簡單的例子。說明Button控件的基本設定和Click事件處理，當然Button的屬性和事件不止如此，筆者抛磚引玉，更多詳細内容見SDK。

上面的控件使用用法沒有新意，與傳統控件不一樣的是，Button屬于控件内容模型，關于“控件内容模型”我們會在後期單獨講解。先看一個在Button上顯示其它圖形的做法：

<UserControl x:Class="_51CTO.lesson02.ButtonImage" 

                <Button Height="100" Width="300" HorizontalContentAlignment="Left"> 

                        <Grid> 

                                <Grid.ColumnDefinitions> 

                                        <ColumnDefinition /> 

                                </Grid.ColumnDefinitions> 

                                <Grid.RowDefinitions> 

                                        <RowDefinition /> 

                                </Grid.RowDefinitions> 

                                <Image Source="Naruto.jpg" Grid.Column="0" Grid.Row="0"></Image> 

                                <TextBlock Grid.Column="1" Grid.Row="0" VerticalAlignment="Center" FontSize="20">圖檔按鈕</TextBlock> 

                        </Grid> 

                </Button> 

</UserControl> 

這裡用到了Grid布局的知識，簡單的實作左右布局，我們會在後期有專門的布局學習。其實就是如下一樣的按鈕：

你甚至可以在Button上加其它輸入控件，簡直就是個容器一樣，比如下面代碼：

<UserControl x:Class="_51CTO.lesson02.ButtonContent" 

                <Button Name="button1" Width="200" Height="100"> 

                        <StackPanel> 

                                <Ellipse Height="40" Width="40" Fill="Blue"/> 

                                <Slider Name="Slider1" Width="100" ValueChanged="Slider_ValueChanged"></Slider> 

                                <TextBlock Name="TextBlock1" TextAlignment="Center">按鈕</TextBlock> 

                        </StackPanel> 

C#代碼如下：

        public partial class ButtonContent : UserControl 

                public ButtonContent() 

                private void Slider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e) 

                        TextBlock1.Text = ((int)Slider1.Value).ToString(); 

實作的效果按鈕上一個滑動條，滑動式顯示數值：

有興趣的朋友可以發揮想象力将Button玩出更強大的效果來。

本文轉自 王傑瑞 51CTO部落格，原文連結：http://blog.51cto.com/wangjierui/117931，如需轉載請自行聯系原作者