Bài giảng Mạng Silverlight - Chương 4: Control và user control trong Silverlight

Nội dung text: Bài giảng Mạng Silverlight - Chương 4: Control và user control trong Silverlight

1. CHƢƠNG IV: CONTROL VÀ USER CONTROL TRONG SILVERLIGHT 1 Giới thiệu về các control phổ biến của Silverlight SDK tích hợp trong VS2008 Các Control trong silverlight cho phép bạn lƣu trữ nội dung hoặc các control khác, bạn có thể tạo hoặc tự thiết kế đƣợc các control này để chúng hiển thị đƣợc những thay đổi trạng thái tới ngƣời dùng. Trong công cụ phát triển Visual studio 2008 đã tích hợp các công cụ silverlight (Cài đặt Siverlight tool, đã hƣớng dẫn ở chƣơng một) có rất nhiều các control có sẵn để bạn tạo, thay đổi hoặc xử lý các sự kiện theo chúng Dƣới đây là hình ảnh danh sách các công cụ đã có trong Silverlight tool Ở Chƣơng II chúng ta đã tìm hiểu về các cách trình bày control theo Layout (Grid, StackPanel, Canvas). Trong chƣơng này chúng ta sẽ xem và tìm hiểu các control phổ biến trong silverlight 2 và cách trình bày chúng theo Layout đã học. 2 Các control phổ biến trong Silverlight 2 1.1 Border o Mổ tả Border cung cấp một background , khu vực cho phép bạn nhúng vào đó một thành phần duy nhất nhằm tạo ra hiệu quả về đồ hoạ. o Ví dụ Text Surrounded by a Border Microsoft Vietnam LLC – DPE team | Chương IV: Control và User Control trong Silverlight 1
2. 1.2 Button o Mô tả Button kiểm soát các phản ứng của ngƣời dùng qua các thiết bị đầu vào, bao gồm các sự kiện, style o Ví dụ 1.3 Calendar o Mô tả Calendar cho phép ngƣời sử dụng chọn ngày, tháng, năm. Ta có thể sử dụng các style khác nhau thông qua Mode o Ví dụ 1.4 CheckBox o Mô tả Cho phép ngƣời dùng lựa chọn ba trạng thái dánh dấu ,bỏ dánh dấu và trạng thái trung gian o Ví dụ Microsoft Vietnam LLC – DPE team | Chương IV: Control và User Control trong Silverlight 2
3. 1.5 ComboBox o Mô tả ComboBox cho phép chọn lựa một Item từ một danh sách Item từ ComboBox o Ví dụ 1.6 ContentControl o Mô tả ContentControl có các dẫn xuất nhƣ Button, Panel. Ta có thể tuỳ chỉnh ContentControl thông qua các template o Ví dụ Sau đây là việc cài đặt một vài control đƣợc thừa kế từ ContentControl \ Microsoft Vietnam LLC – DPE team | Chương IV: Control và User Control trong Silverlight 3
4. 1.7 DatePicker o Mô tả DatePicker cho phép ngƣời dùng sử dụng để lựa chọn ngày, hoặc gõ trực tiếp vào textbox hoặc sử dụng lịch thả xuống. DatePicker cung cấp một loạt các sự kiện hỗ trợ việc kiểm soát lịch thả xuống. o Ví dụ 1.8 GridSplitter o Mô tả GridSplitter cho phép ngƣời dùng phân phối lại không gian giữa các hàng hoặc cột. Nó là yếu tố đồ hoạ tƣợng trƣng cho một thành phần gắn vào nó mà thành phần đó có thể tƣơng tác Microsoft Vietnam LLC – DPE team | Chương IV: Control và User Control trong Silverlight 4
5. o Ví dụ Microsoft Vietnam LLC – DPE team | Chương IV: Control và User Control trong Silverlight 5
6. 1.9 HyperlinkButton o Mô tả HyperlinkButton hiển thị một siêu liên kết. Khi bấm vào HyperlinkButton sẽ cho phép ngƣời dùng truy cập vào một trang web, địa chỉ URI đích đƣợc xác định với các NavigateUri. Bạn có thể chỉ định cửa sổ hoặc một khung trong những điểm đến trang web bằng cách sử dụng TargetName o Ví dụ 1.10 Image o Mô tả Image hiển thị hình ảnh trong định dạng JPEG hoặc PNG. Hình ảnh hiển thị ở 1, 4 hoặc 8 bit màu, hình ảnh thực với 24 hoặc 32 bit o Ví dụ Mã XAML: Mã C#: Image myImage = new Image(); myImage.Source = new BitmapImage(new Uri("myPicture.jpg", UriKind.RelativeOrAbsolute)); LayoutRoot.Children.Add(myImage); 1.11 InkPresenter o Mô tả InkPresenter cung cấp các bản vẽ mặt để hỗ trợ tính năng Tablet PC. InkPresenter đƣợc dẫn xuất từ canvas nên có thể hiển thị một hoặc nhiều đối tƣợng và UIElement strokes. o Ví dụ Mã XAML: <InkPresenter x:Name="MyIP" Height="500" Width="500" Margin="50,50,0,0" MouseLeftButtonDown="MyIP_MouseLeftButtonDown" Microsoft Vietnam LLC – DPE team | Chương IV: Control và User Control trong Silverlight 6
7. LostMouseCapture="MyIP_LostMouseCapture" MouseMove="MyIP_MouseMove" Background="Transparent" Opacity="1" /> Mã C# private void MyIP_MouseLeftButtonDown(object sender, MouseEventArgs e) { MyIP.CaptureMouse(); StylusPointCollection MyStylusPointCollection = new StylusPointCollection(); MyStylusPointCollection.Add(e.StylusDevice.GetStylusPoints(MyIP)); NewStroke = new Stroke(MyStylusPointCollection); MyIP.Strokes.Add(NewStroke); } //StylusPoint objects are collected from the MouseEventArgs and added to MyStroke. private void MyIP_MouseMove(object sender, MouseEventArgs e) { if (NewStroke != null) NewStroke.StylusPoints.Add(e.StylusDevice.GetStylusPoints(MyIP)); } //MyStroke is completed private void MyIP_LostMouseCapture(object sender, MouseEventArgs e) { NewStroke = null; } 1.12 ListBox o Mô tả ListBox chứa một danh sách các Item, Item có thể là một doạn văn bản hay một Control. o Ví dụ Microsoft Vietnam LLC – DPE team | Chương IV: Control và User Control trong Silverlight 7
8. 1.13 MediaElement o Mô tả Các MediaElement kiểm soát nội dung Audio hoặc Video. MediaElement cung cấp một vùng chữa nhật có thể hiển thị Video trên đó, hoặc Audio o Ví dụ 1.14 MultiScaleImage o Mô tả MultiScaleImage cho phép ngƣời dùng mở một hình ảnh cho phép phóng to thu nhỏ thông qua công nghệ Deep Zoom. o Ví dụ Mã XAML: Mã C#: private void DeepZoomObject_MouseEnter(object sender, MouseEventArgs e) { if (deepZoomObject.UseSprings = false) { deepZoomObject.UseSprings = true; } this.deepZoomObject.ZoomAboutLogicalPoint(3, .5, .5); } Microsoft Vietnam LLC – DPE team | Chương IV: Control và User Control trong Silverlight 8
9. 1.15 PasswordBox o Mô tả PasswordBox đƣợc sử dụng để nhập vào thông tin mật khẩu ký tự hiển thị chỉ là ký tự đại diện. o Ví du Mã XAML: Mã C#: public Page() { InitializeComponent(); } private void MyPWBox1_PasswordChanged(object sender, RoutedEventArgs e) { ReadOnlyTB.Text = MyPWBox1.Password; } 1.16 Popup o Mô tả Popup luôn luôn xuất hiện lên trên cùng cửa sổ ứng dụng hữu ích cho việc hiện thị thông báo cho một nhiệm vụ Microsoft Vietnam LLC – DPE team | Chương IV: Control và User Control trong Silverlight 9
10. o Ví dụ Mã XAML: Mã C# // Create the popup object. Popup p = new Popup(); private void showPopup_Click(object sender, RoutedEventArgs e) { Border border = new Border(); border.BorderBrush = new SolidColorBrush(Colors.Black); border.BorderThickness = new Thickness(5.0); } 1.17 ProgressBar o Mô tả ProgressBar hiển thị cho biết tiến trình đang hoạt động bằng việc thay đổi giá trị thay đổi. o Ví dụ 1.18 RadioButton o Mô tả RadioButton cho phép ngƣời dùng chọn một tùy chọn từ một nhóm các tùy chọn. Các RadioButton tổ chức trong cùng một nhóm bằng cách đặt các GroupName chung cho mỗi RadioButton. Các RadioButton là một ContentControl Microsoft Vietnam LLC – DPE team | Chương IV: Control và User Control trong Silverlight 10
11. o Ví dụ Mã XAML: Mã C#: private void HandleCheck(object sender, RoutedEventArgs e) { RadioButton rb = sender as RadioButton; choiceTextBlock.Text = "You chose: " + rb.GroupName + ": " + rb.Name; } 1.19 RepeatButton o Mô tả RepeatButton là một nút kiểm soát các sự kiện tác động vào nút nhƣ Mouse Click và thời gian giữa hai lần click liên tiếp o Ví dụ Mã XAML: RepeatButton Content="click and hold for multiple Click events" Click="RepeatButton_Click" Width="250" Margin="0,0,0,5" HorizontalAlignment="Left"/> Mã C#: Microsoft Vietnam LLC – DPE team | Chương IV: Control và User Control trong Silverlight 11
12. static int Clicks = 0; private void RepeatButton_Click(object sender, RoutedEventArgs e) { Clicks += 1; clickTextBlock.Text = "Number of Clicks: " + Clicks; } 1.20 ScrollBar o Mô tả ScrollBar cung cấp một thanh trƣợt có khả năng di chuyển định hƣớng theo chiều ngang hoặc chiều dọc 1.21 ScrollViewer o Mô tả ScrollViewer kiểm soát một mảng content, cung cấp hai ScrollBar để kiểm soát việc di chuyển mảng content . ScrollViewer cho phép bạn thiết lập kích cỡ của khoảng View liên quan đến Content theo chiều ngang và chiều dọc. o Ví dụ 1.22 Slider o Mô tả Slider cho phép ngƣời dùng lựa chọn từ một loạt các giá trị bằng cách di chuyển dọc theo một thanh ngang. Microsoft Vietnam LLC – DPE team | Chương IV: Control và User Control trong Silverlight 12
13. o Ví dụ 1.23 TabControl o Mô tả TabControl cung cấp một giao diện hiển thị cho các thành phần. Các thành phần con của TabControl là các TabItem. o Ví dụ Microsoft Vietnam LLC – DPE team | Chương IV: Control và User Control trong Silverlight 13
14. 1.24 TextBlock o Mô tả TextBlock hiển thị nội dung văn bản. bạn có thể gán các nội dung của một TextBlock bằng cách sử dụng nguồn text. Ngoài ra cũng có thể gán TextBlock bằng một tập hợp các đối tƣợng text. o Ví dụ Hello, world! 1.25 TextBox o Mô tả TextBox đƣợc sử dụng nhập dữ liệu dạng text từ ngƣời dùng hoặc hiển thị văn bản. TextBox thƣờng đƣợc dùng để chỉnh sửa văn bản đôi khi cũng đƣợc dùng ở chế độ chỉ đọc. TextBox có thể hiển thị nhiều dòng văn bản. o Ví dụ 1.26 ToolTip o Mô tả Tooltip cung cấp thông tin về một đối tƣợng đồ họa bằng cách sử dụng một cửa sổ pupup. o Ví dụ Microsoft Vietnam LLC – DPE team | Chương IV: Control và User Control trong Silverlight 14
15. 1.27 DataGrid o Mô tả DataGrid cung cấp một cách linh hoạt để hiển thị một tập hợp các dữ liệu trong các hàng và cột. Data Grid hỗ trợ nhiều style hiển thị dữ liệu trong các cột hoặc hàng. Data Grid hỗ trợ các bảng tùy chọn định dạng và khả năng hiển thị hoặc ẩn các tiêu đề, các thanh trƣợt di chuyển . Ngoài ra Data Grid còn cung cấp một số kiểu mẫu mà bạn có thể thay đổi hình thức thể hiện dữ liệu hàng, cột và tiêu đề. o Ví dụ Microsoft Vietnam LLC – DPE team | Chương IV: Control và User Control trong Silverlight 15
16. Microsoft Vietnam LLC – DPE team | Chương IV: Control và User Control trong Silverlight 16
17. Mã C#: using System; using System.Collections.Generic; using System.Windows.Controls; namespace DataGridSnippets { public partial class Page : UserControl { public Page() { InitializeComponent(); // Thiết lập ItemsSource để tự tạo các cột. dataGrid1.ItemsSource = Customer.GetSampleCustomerList(); dataGrid3.ItemsSource = Customer.GetSampleCustomerList(); dataGrid4.ItemsSource = Customer.GetSampleCustomerList(); dataGrid5.ItemsSource = Customer.GetSampleCustomerList(); } } public class Customer { public String FirstName { get; set; } public String LastName { get; set; } public String Address { get; set; } public Boolean IsNew { get; set; } public Boolean? IsSubscribed { get; set; } public Customer(String firstName, String lastName, String address, Boolean isNew, Boolean? isSubscribed) { this.FirstName = firstName; this.LastName = lastName; this.Address = address; this.IsNew = isNew; this.IsSubscribed = isSubscribed; } public static List GetSampleCustomerList() { return new List (new Customer[4] { new Customer("A.", "Zero", "12 North Third Street, Apartment 45", false, true), new Customer("B.", "One", "34 West Fifth Street, Apartment 67", false, false), new Customer("C.", "Two", "56 East Seventh Street, Apartment 89", true, null), Microsoft Vietnam LLC – DPE team | Chương IV: Control và User Control trong Silverlight 17
18. new Customer("D.", "Three", "78 South Ninth Street, Apartment 10", true, true) }); } } } 3 User Control trong Visual Studio 2008 Trong ví dụ đƣợc trình bày dƣới đây chúng ta tìm hiểu cách tạo một User Control và sử dụng nó nhƣ thế nào trong Visual Studio 2008 1. Trong Project Silverlight đã có chúng ta làm thao tác tạo New Item theo hình vẽ dƣới đây Microsoft Vietnam LLC – DPE team | Chương IV: Control và User Control trong Silverlight 18
19. 2. Chọn Silverlight User Control trong Templates và đặt tên control này là FormContactUserControl.xaml 3. Chúng ta sẽ có 2 file sau đƣợc tạo ra - FormContactUserControl.xaml - FormContactUserControl.xaml.cs Trong FormContactUserControl.xaml chúng ta sẽ có đoạn mã sau 4. Bây giờ chúng ta sẽ thêm đoạn mã dƣới đây vào bên trong thẻ 5. Thêm sự kiện vào nut bấm “btnSubmit’. Microsoft Vietnam LLC – DPE team | Chương IV: Control và User Control trong Silverlight 19
20. Chúng ta sẽ xử lý sự kiện btnSubmit_Click vào trong mã c# nhƣ sau private void btnSubmit_Click(object sender, RoutedEventArgs e) { // Phe duyet du lieu dau vao if (txtName.Text == "") { MessageBox.Show("Họ và tên không đƣợc bỏ trống"); txtName.Focus(); } else { //Tiep tuc xu ly luu contact // } } 6. Làm thao tác Build Sulution, chúng ta đã tạo xong control FormContactUserControl. Bây giờ chúng ta mở file Page.xaml để sử dụng lại control đó. Chúng ta thêm mới đoạn mã sau: xmlns:inf="clr-namespace:Chapter2" vào bên trong thẻ 7. Để hiển thị đƣợc User control: FormContactUserControl trong Page.xaml ta tiếp tục thêm đoạn mã sau Microsoft Vietnam LLC – DPE team | Chương IV: Control và User Control trong Silverlight 20
21. 8. Bấm F5 để chạy chƣơng trình bạn sẽ đƣợc kết quả nhƣ hình ảnh sau 4 Các bài tập thực hành Các ví dụ, và các bài thực hành mở rộng các bạn có thể tải về từ địa chỉ sau. liên kết này là các ví dụ bao gồm của chƣơng 2 và chƣơng 3 Microsoft Vietnam LLC – DPE team | Chương IV: Control và User Control trong Silverlight 21