Hoang Ha's Blog

Những Khung Hình Shapes Cơ Bản

Trong Silverlight, một Shape là một bức vẽ 2D cơ bản với một Stroke (border) và Fill (vùng bên trong) có thể tự điều chỉnh. Ba phần tử được đề cập tới trong phần này là:

• Rectangle

• Ellipse

• Polygon

Rectangle

- Giống như hầu hết các shapes khác, một Rectangle cũng có các thuộc tính tùy biến như Width, Height, Fill và Stroke.
+ Ví dụ:

<Rectangle Width="100" Height="100" Fill="Red" /> hay

<Rectangle Width="300" Height="100" Fill="Yellow" Stroke="Black" StrokeThickness="10" />

- Nếu bạn không chỉ định một Stroke, thì bạn phải chỉ định một Fill, Width, và Height cho Rectangle.

- Rectangle thậm chí còn định nghĩa các thuộc tính RadiusX và RadiusY, mà nó cho phép bạn bo tròn các góc của Rectangle.
+ Ví dụ:

- Bo tròn đều các góc:

<Rectangle Width="300" Height="100" Fill="Green" Stroke="Black" StrokeThickness="10" RadiusX="20" RadiusY="20" />

- Bo tròn góc Y nhiều hơn:

<Rectangle Width="300" Height="100" Fill="Green" Stroke="Black" StrokeThickness="10" RadiusX="20" RadiusY="50" />

Ellipse

- Sau khi đã khám phá sự mềm dẻo của Rectangle, ban có thể sẽ nghĩ rằng việc có một công cụ vẽ Ellipse riêng biệt là dư thừa. Có thể là bạn đúng, nhưng sẽ là dễ dàng hơn nếu chúng ta có thể tạo ra một Ellipse chi bằng việc thiết lập chiều rộng và chiều cao:

<Elippse Width="300" Height="100" Fill="Purple" Stroke="Black" StrokeThickness="10" />

- Dĩ nhiên, một Ellipse với sự điều chỉnh Width và Height hợp lý sẽ cho chúng ta một hình tròn:

<Ellipse Width="100" Height="100" Fill="Brown" Stroke="Black" StrokeThickness="10" />

Note:

- So sánh giữa Visiblity và Opacity
+ Visibility: Dùng cho hầu hết các phần tử (bao gồm tất cả các Shapes) có hai thuộc tính lựa chọn là Visible và Collapsed. Bạn thường sử dụng chúng cho việc ẩn/hiện một control trên khung màn hình.

+ Trong khi đó, việc sử dụng Opacity cho phép bạn thiết lập tới bất kỳ giá trị nào trong khoảng từ 0->1 (Với 0 thể hiện sự trong suốt của hình vẽ, và 1 thể hiện sự mờ đục của hình vẽ).

- Thuộc tính Stretch
Mặc định, nội dung của một Shape mở rộng ra (stretch) toàn bộ vùng không gian đã được định nghĩa bởi chiều rộng (Width) và chiều cao (Height) của nó. Thao tác này có thể được tùy chỉnh, tuy nhiên, chúng ta thường thiết lập một giá trị cho thuộc tính Stretch hơn là giá trị mặc định.

- Sự khác biệt giữa Uniform và UniformToFill:
+ Uniform: Lựa chọn kích thước nhỏ hơn so với kích thước đã được khởi tạo bởi chiều rộng và chiều cao.
+ UniformToFill:Lựa chọn kích thước lớn hơn so với kích thước đã được khởi tạo bởi chiều rộng và chiều cao.

Polygon

- Polygon cho phép bạn sắp đặt sự phân chia chuỗi các đoạn thẳng một cách tùy ý, dựa trên thuộc tính Points của chúng. Bởi vì Point không hỗ trợ việc minh họa như là một phần tử XAML, bạn phải thiết lập Points với chuỗi cú pháp được hỗ trợ bởi một kiểu build-in. Ví dụ:

<Polygon Fill=“Red“ Stroke=“Black“ StrokeThickness=“10“ StrokeMiterLimit=“0“
Points=“20,20 100,100“/>

<Polygon Fill=“Orange“ Stroke=“Black“ StrokeThickness=“10“
Points=“20,20 100,100 200,10“/>

<Polygon Fill=“Yellow“ Stroke=“Black“ StrokeThickness=“10“
Points=“20,20 100,100 200,10 300,100“/>

<Polygon Fill=“Green“ Stroke=“Black“ StrokeThickness=“10“ StrokeMiterLimit=“0“
Points=“20,20 100,100 200,10 300,100 100,100“/>

- Giá trị của Points có thể đơn giản chỉ là một danh sách các giá trị x và y được lặp đi lặp lại. Dấu phẩy có thể giúp bạn dễ đọc, nhưng chúng là tùy chọn.Bạn có thể đặt một dấu phẩy giữa mỗi giá trị hoặc không sử dụng bất kỳ dấu phẩy nào. Thuộc tính StrokeMiterLimit được thiết lập trên hai Polygon nhằm tránh việc xung đột giữa các mặt phẳng.

- Chú ý rằng, nếu bạn không thêm một Point để thêm tới điểm xuất phát thì Polygon sẽ tự động thêm vào nhằm tạo ra một vòng khép kín.

- Polygon còn có thêm thuộc tính FillRule mà nó cho phép lựa chọn tới một trong hai giá trị:

+ EvenOdd (mặc định)- Tô màu một vùng không gian với điều kiện bạn sẽ cắt ngang một số lẻ các phân đoạn nhằm di chuyển từ vùng tô màu đó tới khu vực bên ngoài của toàn bộ hình vẽ.
+ NoneZero - Là một thuật toán phức tạp hơn mà nó mang tới sự cân nhắc tới việc điều khiển các phân đoạn mà bạn sẽ phải cắt ngang ra bên ngoài của toàn bộ hình vẽ.

<Polygon Fill=“Red“ Stroke=“Black“ StrokeThickness=“10“
Points=“50,100 350,100 300,200 250,20 175,200 150,30 100,200 100,200 200,20
250,200 300,20 350,175“ FillRule=“EvenOdd“/>

<Polygon Fill=“Red“ Stroke=“Black“ StrokeThickness=“10“
Points=“50,100 350,100 300,200 250,20 175,200 150,30 100,200 100,200 200,20
250,200 300,20 350,175“ FillRule=“NonZero“/>