Bài 6: Xây dựng giao diện với XAML trong Windows Phone (phần 2)

Tiếp tục trình bày về Xây dựng giao diện với XAML, ở phần 2 này Tui sẽ nói về cách sử dụng Brush.

Phần 2) Cách sử dụng Brush

Brush là một công cụ giúp ta định nghĩa màu cho các control. Brush hỗ trợ ta vẽ màu đơn sắc và kết hợp nhiều màu với nhau theo kiểu Gradient. Dưới đây là một số brush được hỗ trợ trong Windows Phone:

Tui chụp một số màu đại diện tương ứng để bạn dễ liên tưởng:

Để tạo một đối tượng Brush thì ta có thể sử dụng XAML để định nghĩa hoặc sử dụng coding behind, tùy từng trường hợp mà ta nên sử dụng một cách khéo léo.

Để định nghĩa một Brush, ta có thể định nghĩa trực tiếp trên code XAML hoặc định nghĩa trong code behind. Và ta cần cần biết cách viết chuyển đổi qua lại giữa coding behind và XAML.

Ứng với mỗi loại Brush Tui sẽ viết bằng 2 cách (coding behind và XAML) để các bạn có thể dễ dàng hiểu được cách sử dụng Brush cũng như cách viết chuyển đổi.

Đa phần các Brush nằm trong thư viện:

using System.Windows.Media

1)SolidColorBrush:

Dùng để tạo màu đơn sắc đồng nhất (Ví dụ màu đỏ, màu xanh, màu vàng).

Cách tạo trong XAML:

[code language=”xml”]

<Button Content="drthanh" >

    <Button.Background>

        <SolidColorBrush Color="Red">

        </SolidColorBrush>

    </Button.Background>

</Button>

[/code]

 

Cách tạo trong coding behind:

Nếu màu đơn sắc đó là màu phải dựa theo những thông số RED, GREEN, BLUE ta làm như sau

[code language=”csharp”]

Color cr = new Color();

cr.B = cr.R = cr.G = 122;

cr.A = 255;

SolidColorBrush br = new SolidColorBrush(cr);

button1.Background = br;

[/code]

 

ở trên Tui để cr.B=cr.R=cr.G=122 , bạn có thể tách riêng ra mỗi dòng để gán mỗi giá trị riêng biệt cho nó.

Nếu như màu đơn sắc chỉ lấy màu theo hệ thống đã định nghĩa thì ta làm như sau:

[code language=”csharp”]

SolidColorBrush br = new SolidColorBrush(Colors.Blue);

button1.Background = br;

[/code]

 

Để giúp các bạn dễ dàng tìm được các thông số RED, GREEN, BLUE để tạo màu cho đối tượng, tui có viết sẵn công cụ lấy màu theo các thông số này, bạn có thể tải ở đây: Link Download

Bạn chỉ cần kéo thả trackbar để chọn màu và các giá trị RED, GREEN, BLUE sẽ xuất hiện theo. hoặc bấm vào button “…” để hiển thị cửa sổ chọn màu:

2)LinearGradientBrush:

Dùng để tạo bảng phối màu theo dạng tuyến tính, các bạn khi làm màu Gradient thì chú ý về cơ chế hoạt động của nó là: Không quan tâm tới kích thước của cửa sổ là bao nhiêu (tức là nếu 1 đối tượng có kích thước là 500×500 với 1 đối tượng có kích thước là 50×50 là như sau), nó chỉ quan tâm góc trái trên cùng là (0.0,0.0) và góc phải cuối cùng là (1.0,1.0) đây là một dãy số thực vô hạn:

Cách tạo trong XAML:

[code language=”xml”]<Button Content= "drthanh" name="btnLinear">
                <Button.Background>
                    <LinearGradientBrush StartPoint="0.75,0.25">
                        <GradientStop Color="Red" Offset="0.0"/>
                        <GradientStop Color="Blue" Offset="0.5"/>
                        <GradientStop Color="White" Offset="1.0"/>
                    </LinearGradientBrush>
                </Button.Background>
            </Button>
[/code]

 

Cách tạo trong coding behind:

[code language=”csharp”]

public MainPage()
{
InitializeComponent();

LinearGradientBrush brush=new LinearGradientBrush();
brush.StartPoint=new Point(0.75,0.25);
GradientStop st1=new GradientStop();
st1.Color=Colors.Red;
st1.Offset=0.0;

GradientStop st2=new GradientStop();
st2.Color=Colors.Blue;
st2.Offset=0.5;

GradientStop st3=new GradientStop();
st3.Color=Colors.White;
st3.Offset=1.0;

brush.GradientStops.Add(st1);
brush.GradientStops.Add(st2);
brush.GradientStops.Add(st3);

btnLinear.Background = brush;

}

[/code]

Kết quả:

Bạn để ý thông số Offset là vị trí trong đoạn (0.0,1.0) mà ta bắt đầu đổ màu vào, bạn cứ tưởng tượng là 1 tờ giấy A4 được bạn đổ một bình mực vào vị trí nào, nơi nào được đổ vào trước thì ở đó đậm nét của màu và lan tỏa ra xung quanh, màu nào mạnh hơn thì chiếm ưu thế hơn.

Tiếp tục quan sát StartPoint có 2 thông số (X,Y) là điểm khởi đầu tô màu cho màu đầu tiên trong danh sách màu, ở trên ta thấy màu đỏ được tô bắt đầu từ tọa độ X=0.75, Y=0.25 nên có hình dáng như vậy.

Nếu như bạn phối 4 màu:

Yellow có Offset 0.0

Red có Offset 0.25

Blue có Offset 0.75

LimeGreen có Offset 1.0

Thì có có bảng phân bố màu như sau:

2)RadialGradientBrush:

Phối màu theo hình cầu có tiêu điểm

Cách viết XAML:

[code language=”xml”]

<Rectangle Width="200" Height="100">

<Rectangle.Fill>

<RadialGradientBrush

GradientOrigin="0.5,0.5"

Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5">

<RadialGradientBrush.GradientStops>

<GradientStop Color="Yellow" Offset="0" />

<GradientStop Color="Red" Offset="0.25" />

<GradientStop Color="Blue" Offset="0.75" />

<GradientStop Color="LimeGreen" Offset="1" />

</RadialGradientBrush.GradientStops>

</RadialGradientBrush>

</Rectangle.Fill>

</Rectangle>

[/code]

Cách viết trong Coding behind:

[code language=”csharp”]

RadialGradientBrush radialGradient = new RadialGradientBrush();

// thiết lập GradientOrigin để vẽ tâm bẻ góc (làm lệch tâm) của bảng màu.

radialGradient.GradientOrigin = new Point(0.5, 0.5);

// Thiết lập tọa độ tâm.

radialGradient.Center = new Point(0.5, 0.5);

// Thiết lập bo góc.

radialGradient.RadiusX = 0.5;

radialGradient.RadiusY = 0.5;

// Tạo 4 màu phối lại với nhau

radialGradient.GradientStops.Add(new GradientStop(Colors.Yellow, 0.0));

radialGradient.GradientStops.Add(new GradientStop(Colors.Red, 0.25));

radialGradient.GradientStops.Add(new GradientStop(Colors.Blue, 0.75));

radialGradient.GradientStops.Add(new GradientStop(Colors.LimeGreen, 1.0));

// Freeze the brush (make it unmodifiable) for performance benefits.

radialGradient.Freeze();

// Tạo một Rectangle (bạn có thể lấy tên của một control nào đó)

Rectangle aRectangle = new Rectangle();

aRectangle.Width = 200;

aRectangle.Height = 100;

aRectangle.Fill = radialGradient;

[/code]

Bạn cần lưu ý các  thuộc tính như GradientOrigin, Center, RadiusX, RadiusY. Hình sau mô tả công năng từng thuộc tính:

Ví dụ:

[code language=”xml”]

<Button x:Name="button1" Content="drthanh" >
<Button.Background>
<RadialGradientBrush GradientOrigin="0.75,0.25" RadiusX="0.3" RadiusY="0.5">
<GradientStop Color="Yellow" Offset="0.0"/>
<GradientStop Color="Orange" Offset="0.5"/>
<GradientStop Color="Blue" Offset="1.0"/>
</RadialGradientBrush>
</Button.Background>
</Button>

[/code]

4) ImageBrush:

ImageBrush cho phép hiển thị hình ảnh.

Nếu viết lại trong coding behind:

[code language=”csharp”]

using System.Windows.Media;

using System.Windows.Media.Imaging;

….

ImageBrush br = new ImageBrush();

br.ImageSource = new BitmapImage

(

new Uri(

"Assets\\hinhvui.PNG",

UriKind.Relative)

);

btnimg.Background = br;

[/code]

Như vậy Tui đã trình bày sơ qua về một số Brush thường sử dụng, bạn có thể sử dụng để vận dụng vào các bài tập tiếp theo.

Bài tiếp theo Tui sẽ nói về phần số 3 Cách sử dụng Resource và Style.

Chúc các bạn thành công.