Bài giảng Lập trình Windows Phone (Module 2): Bài 7 - Trần Duy Thanh

ườ 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 7: Tìm hi u Brush và Resource

ạ

ầ

GV Biên so n: Tr n Duy Thanh

2014

Nội dung

• Tìm hiểu Brush

• Tìm hiểu về Resource

• Tạo GroupList với LongListSelector

2

ể Bài 7: Tìm hi u Brush và Resource

1. Tìm hiểu Brush

Brush

GradientBrush

SolidColorBrush

LinearGradientBrush

RadialGradientBrush

3

ể Bài 7: Tìm hi u Brush và Resource

1. Tìm hiểu Brush

4

ể Bài 7: Tìm hi u Brush và Resource

1. Tìm hiểu Brush

Ø SolidColorBrush

XAML

5

ể Bài 7: Tìm hi u Brush và Resource

1. Tìm hiểu Brush

Ø SolidColorBrush

using System.Windows.Media

Color cr = new Color(); cr.B = cr.R = cr.G = 122; cr.A = 255;

SolidColorBrush br = new SolidColorBrush(cr); button1.Background = br;

6

ể Bài 7: Tìm hi u Brush và Resource

1. Tìm hiểu Brush

Ø LinearGradientBrush

XAML

7

ể Bài 7: Tìm hi u Brush và Resource

1. Tìm hiểu Brush

Ø LinearGradientBrush LinearGradientBrush br

= new LinearGradientBrush();

8

ể Bài 7: Tìm hi u Brush và Resource

GradientStop gs1 = new GradientStop(); gs1.Color = Colors.Red; gs1.Offset = 0; GradientStop gs2 = new GradientStop(); gs2.Color = Colors.White; gs2.Offset = 1.0; br.GradientStops.Add(gs1); br.GradientStops.Add(gs2); button1.Background = br;

1. Tìm hiểu Brush

Ø RadialGradientBrush

XAML

9

ể Bài 7: Tìm hi u Brush và Resource

1. Tìm hiểu Brush

10

RadialGradientBrush br = new RadialGradientBrush(); br.GradientOrigin = new Point(0.75, 0.25); GradientStop gs1 = new GradientStop(); gs1.Color = Colors.Yellow; gs1.Offset = 0; GradientStop gs2 = new GradientStop(); gs2.Color = Colors.Orange; gs2.Offset = 0.5; GradientStop gs3 = new GradientStop(); gs3.Color = Colors.Blue; gs3.Offset = 1.0; br.GradientStops.Add(gs1); br.GradientStops.Add(gs2); br.GradientStops.Add(gs3); button1.Background = br; ể

Bài 7: Tìm hi u Brush và Resource

1. Tìm hiểu Brush

11

ể Bài 7: Tìm hi u Brush và Resource

1. Tìm hiểu Brush

12

ể Bài 7: Tìm hi u Brush và Resource

1. Tìm hiểu Brush

13

ể Bài 7: Tìm hi u Brush và Resource

1. Tìm hiểu Brush

Ø ImageBrush

14

ể Bài 7: Tìm hi u Brush và Resource

1. Tìm hiểu Brush

Ø ImageBrush

using System.Windows.Media; using System.Windows.Media.Imaging;

ImageBrush br = new ImageBrush(); br.ImageSource = new BitmapImage ( new Uri( “/Assets/children.jpg", UriKind.Relative) );

btnimg.Background = br;

15

ể Bài 7: Tìm hi u Brush và Resource

2. Tìm hiểu Resource

• Đặt vấn đề

• Giới thiệu Resource

• Các loại Resource

• Các vị trí đặt Resource

16

ể Bài 7: Tìm hi u Brush và Resource

2.1 Đặt vấn đề

v Cần thống nhất giao diện cho các control trong

ứng dụng

v Cần tổ chức code XAML để dễ chỉnh sửa, tái

sử dụng.

v Một số control như ListBox hay

LongListSelector cần được định nghĩa các mẫu dữ liệu

17

ể Bài 7: Tìm hi u Brush và Resource

2.2 Giới thiệu Resource

v Windows Phone cung cấp khái niệm Resource

để giải quyết các vấn đề trên

v Sử dụng giống như CSS trong HTML

STYLE

RESOURCE

DATA TEMPLATE

PAGE

APPLICATI ON

DICTIONAR Y

18

ể Bài 7: Tìm hi u Brush và Resource

2.3 Các loại Resource

v Style: dùng để định giao diện cho các control

ü Thuộc tính x:Key dùng để định danh cho style

ü Thuộc tính TargetType dùng để loại control sẽ được

áp dụng

19

ể

Lưu ý: nếu thuộc tính x:Key không được khai báo thì tất cả các control cùng loại với TargetType sẽ được áp dụng style. Bài 7: Tìm hi u Brush và Resource

2.3 Các loại Resource

v Style

ü Một thẻ sẽ khai báo cho một thuộc tính

của control

ü Để áp dụng 1 style cho 1 control ta khai báo thuộc

tính Style của control đó như sau

Style="{StaticResource } "

Ví dụ: Gắn style có tên CustomText được khai báo bên trên cho 1 TextBlock control

20

ể Bài 7: Tìm hi u Brush và Resource

2.3 Các loại Resource

v Data Template: dùng để định nghĩa mẫu dữ liệu

cho các control như ListBox và LongListSelector

21

ể Bài 7: Tìm hi u Brush và Resource

2.3 Các loại Resource

v Data Template

ü Thuộc tính x:Key dùng để định danh cho Data Template

Ví dụ: Gắn Data Template có tên ListBoxTemplate cho một ListBox, ta khai báo như sau

22

ể Bài 7: Tìm hi u Brush và Resource

2.4 Các vị trí đặt Resource

v PageResource

v ApplicationResource

v ResourceDictionary

23

ể Bài 7: Tìm hi u Brush và Resource

2.4 Các vị trí đặt Resource

v Page Resource

ü Được khai trong một trang XAML và chỉ được sử

dụng trong trang đó.

ü Được định nghĩa trong cặp thẻ

24

ể Bài 7: Tìm hi u Brush và Resource

2.4 Các vị trí đặt Resource

v Application Resource

ü Được khai trong một trang App.xaml và chỉ được sử

dụng trong toàn ứng dụng.

ü Được định nghĩa trong cặp thẻ

25

ể Bài 7: Tìm hi u Brush và Resource

2.4 Các vị trí đặt Resource

v ResourceDictionary

ü Được khai báo trong một file xml riêng lẻ

ü Tên file phải được kết thúc bằng “.xaml”

ü Các Resource được định nghĩa trong cặp thẻ

26

ể Bài 7: Tìm hi u Brush và Resource

2.4 Các vị trí đặt Resource

v ResourceDictionary

ü Để sử dụng, ta phải add vào Application Resource

như sau

27

ể Bài 7: Tìm hi u Brush và Resource

2.4 Các vị trí đặt Resource

v ResourceDictionary

ü Nếu có nhiều file Resource, ta phải khai báo tất cả

trong thẻ

28

ể Bài 7: Tìm hi u Brush và Resource

3. Tạo GroupList với LonglistSelector v Xem file hướng dẫn

29

ể Bài 7: Tìm hi u Brush và Resource

Thảo luận

30

ể Bài 7: Tìm hi u Brush và Resource