ườ Tr ọ ự ng ĐH Khoa H c T Nhiên TP.HCM
TRUNG TÂM TIN H CỌ
ậ
L p trình Windows Phone Bài 3: Các control nâng cao trong Windows Phone
ạ
ầ
GV Biên so n: Tr n Duy Thanh
2014
Nội dung
• List controls
• Menu controls
• Media controls
• MessageBox, Popups
2
Bài 3: Các control nâng cao trong Windows Phone
1. List controls
• ListBox control
• LongListSelector control
3
Bài 3: Các control nâng cao trong Windows Phone
1.1 ListBox control
v Dùng để hiển thị dữ liệu dạng danh sách
v Để sử dụng ListBox, ta có 2 cách
ü Khai báo các Item ngay trên XAML
ü Load các Item từ một nguồn dữ liệu thông qua data
binding
4
Bài 3: Các control nâng cao trong Windows Phone
1.1 ListBox control
VD: Khai báo các Item từ ngay trên XAML
Designer Time and Run Time
5
Bài 3: Các control nâng cao trong Windows Phone
1.1 ListBox control
ừ
VD: Load các Item t
ồ ữ ệ ngu n d li u
"Nguy n Hữu Tài" ễ ,
"Đ Thị Thùy Nhung" "Dương Thùy Trang", }; public MainPage() { InitializeComponent(); MyListBox.ItemsSource = Items; }
Code Behind
Code XAML
6
Bài 3: Các control nâng cao trong Windows Phone
1.1 ListBox control
ừ
VD: Load các Item t
ồ ữ ệ ngu n d li u
Run Time
Designer Time
7
Bài 3: Các control nâng cao trong Windows Phone
1.1 ListBox control
ể ượ ế ợ ừ
v Các Item c a ListBox có th đ
c k t h p t
ề nhi u
ủ thành ph nầ
ễ
ổ
8
Bài 3: Các control nâng cao trong Windows Phone
1. List controls
• ListBox control
• LongListSelector control
9
Bài 3: Các control nâng cao trong Windows Phone
1.2 LongListSelector control
v Windows Phone cung cấp cho ta thêm control LongListSelector để hiển thị dữ liệu dạng danh sách
v Ngoài việc hiển thị dữ liệu dạng FlatList giống ListBox, LongListSelector còn hỗ trợ hiển thị dữ liệu dạng GroupList.
v Không hỗ trợ khai báo các Item trên XAML, chỉ có thể dùng data binding để load từ một nguồn dữ liệu
10
Bài 3: Các control nâng cao trong Windows Phone
1.2 LongListSelector control
VD: Binding LongListSelector đơn giản
Designer Time
11
Bài 3: Các control nâng cao trong Windows Phone
1.2 LongListSelector control
VD: Binding LongListSelector đơn giản
Run Time
class MyObject { public string Data { get; set; } }
12
List
Bài 3: Các control nâng cao trong Windows Phone
1.2 LongListSelector control
VD: GroupList
v Khai báo lớp MyObject, đây là kiểu dữ liệu chính của chương trình class MyObject { Public string Category { get; set; } public string Data { get; set; } }
v Khai báo lớp generic Groups để nhóm dữ liệu
class Group
public Group(TKey key, IEnumerable
13
}
Bài 3: Các control nâng cao trong Windows Phone
1.2 LongListSelector control
v
Khai báo các resource cho LongListSelector. Các resource được đặt trong tag
ü Resource để binding dữ liệu
ü Resource để định dạng cho Jumplist
14
Bài 3: Các control nâng cao trong Windows Phone
1.2 LongListSelector control
v
Khai báo các resource cho LongListSelector.
ü Resource định dạng cho JumpList
Value="{StaticResource GroupTile}" /> ü Resource định dạng cho GroupList 15 Bài 3: Các control nâng cao trong Windows Phone v Khai báo các resource cho LongListSelector. ü Resource định dạng cho GroupList Background="{Binding Converter={StaticResource BackgroundConverter
}}"> 16 Bài 3: Các control nâng cao trong Windows Phone v Code behind ü Hàm khởi tạo nguồn dữ liệu public void loadDataSample() { var flatList = new List new MyObject() { Category = "A", Data = "some data 1" }, new MyObject() { Category = "A", Data = "some data 2" }, new MyObject() { Category = "B", Data = "some data 3" }, new MyObject() { Category = "C", Data = "some data 4" }, new MyObject() { Category = "C", Data = "some data 5" }, }; var groups = (from obj in flatList
group obj by obj.Category into g orderby g.Key select new Group 17 } Bài 3: Các control nâng cao trong Windows Phone
LongListSelector1.ItemsSource = groups.ToList(); v Code behind ü Gọi hàm khởi tạo trong phương thức khởi tạo của hàm MainPage public MainPage() { InitializeComponent(); loadDataSample(); 18 } Bài 3: Các control nâng cao trong Windows Phone v Kết quả 19 Bài 3: Các control nâng cao trong Windows Phone • ApplicationBar vApplicationBar được thiết kế để đặt một số chức 20 Bài 3: Các control nâng cao trong Windows Phone • ApplicationBar vApplicationBar được thiết kế để đặt một số chức v ApplicationBar thuộc namespace shell, được định 21 Bài 3: Các control nâng cao trong Windows Phone • ApplicationBar vĐịnh nghĩa ApplicationBar Text="save" Click="ApplicationBarIconButton_Click_1"
/> 22 Bài 3: Các control nâng cao trong Windows Phone • ApplicationBar vApplicationBar còn hỗ trợ tạo menu 23 Bài 3: Các control nâng cao trong Windows Phone • Image • MediaElement 24 Bài 3: Các control nâng cao trong Windows Phone v v Cách khai báo image control 25 Bài 3: Các control nâng cao trong Windows Phone v Thuộc tính Stretch để định dạng cách hiển thị ẽ ượ ể ả c co gi n đ đáp ng kích ü Fill : hình s đ ứ
c đã đinh, không quan tâm đ n t l th ữ ướ ế ỉ ệ
c cũng nh t l .
ư ỉ ệ nguyên kích th ướ
ü None : gi
ủ
c a hình ố ü The Uniform : co gi n hình t ư ả ị i đa theo kích
ả ượ ỉ ệ c t l ả
ướ
c đã đ nh nh ng v n đ m b o đ
ẫ ằ ọ ẫ
t trong khung hình th
và v n n m l ướ ả ả
ả
ệ ố
ü The UniformToFill : co gi n hình t
i đa theo
ẫ
ị
ượ ỉ ệ
c t l
kích th
c đã đ nh, v n đ m b o đ
ị ấ
ả
ả
ư
nh ng không đ m b o vi c hình có b m t
không 26 Bài 3: Các control nâng cao trong Windows Phone • Image • MediaElement 27 Bài 3: Các control nâng cao trong Windows Phone v Để chơi các file media như nhạc hay video, ta v Cách khai báo MediaElement 28 Source="Assets/hm_helix_twist_320x240.wmv "/> Bài 3: Các control nâng cao trong Windows Phone v Định nghĩa các nút để điều khiển 29 Bài 3: Các control nâng cao trong Windows Phone private void btnPlay_Click(object sender, RoutedEventArgs e)
{ MediaWindow.Play(); }
private void btnPause_Click(object sender, RoutedEventArgs e)
{ MediaWindow.Pause(); }
private void btnForward_Click(object sender, RoutedEventArgs e)
{ TimeSpan current = MediaWindow.Position; 30 MediaWindow.Position = current.Add(new TimeSpan(0, 0, 1)); } Bài 3: Các control nâng cao trong Windows Phone v Ghi chú: đ i thu c tính Build Action c a file video 31 Bài 3: Các control nâng cao trong Windows Phone • MessageBox • Popup 32 Bài 3: Các control nâng cao trong Windows Phone v MessageBox cho phép ứng dụng đưa ra v Với MessageBox, ta chỉ có thể tương tác với
người dùng bằng những câu thông báo và
các nút nhấn đơn giản như Yes, No, Cancel v MessageBox được gọi từ code behind 33 Bài 3: Các control nâng cao trong Windows Phone v Nếu MessageBox có 2 nút nhấn OK– Cancel,
ta dùng biến kiểu MessageBoxResult để nhận
kết quả 34 Bài 3: Các control nâng cao trong Windows Phone v Tương tự MessageBox, nhưng popup cho
phép ta thay đổi giao diện và nhận dữ liệu
nhập từ người dùng. v Ta có thể định dạng các popup trên code 35 Bài 3: Các control nâng cao trong Windows Phone Foreground="White"/> 36 Bài 3: Các control nâng cao trong Windows Phone v Để ẩn hay hiện popup, ta dùng thuộc tính ü IsOpen="True“ : hiện popup ü IsOpen="False“: ẩn popup 37 Bài 3: Các control nâng cao trong Windows Phone 38 Bài 3: Các control nâng cao trong Windows Phone1.2 LongListSelector control
1.2 LongListSelector control
1.2 LongListSelector control
1.2 LongListSelector control
2. Menu controls
năng của chương trình, ví dụ chức năng thêm, xóa,
sửa dữ liệu
2. Menu controls
năng của chương trình, ví dụ chức năng thêm, xóa,
sửa dữ liệu
nghĩa trong cặp thẻ
2. Menu controls
2. Menu controls
3. Media controls
3.1 Image
Image control dùng để thể hiện hình ảnh trên
ứng dụng
3.1 Image
hình ảnh. Các giá trị của Stretch
3. Media controls
3.2 MediaElement
sử dụng MediaElement control.
3.2 MediaElement
3.2 MediaElement
3.2 MediaElement
ủ
ổ
ộ
ọ
ộ
ổ
thành Resource
ả
ü Click ph i vào file video, ch n Properties
ị
ü Tìm đ n thu c tính Build Action, đ i giá tr
ế
thành Resource
4. Popup, MessageBox
4.1 MessageBox
những thông báo cho người dùng dưới dạng
panel nằm đè lên màn hình hiện tại.
MessageBox.Show("Xin chào người dùng!");
4.1 MessageBox
MessageBoxResult result =
MessageBox.Show("Bạn có lưu dữ liệu không
!", "Câu hỏi", MessageBoxButton.OKCancel);
if (result == MessageBoxResult.OK)
{ }
4.2 Popup
XAML và gọi popup từ code behind
4.2 Popup
4.2 Popup
IsOpen
Thảo luận
