[Windows Phone – Silverlight] Uniform to fill, centered

Hiển thị hình ảnh trong các ứng dụng Silverlight, bạn thường sử dụng Image Control.

Image Control có một số thuộc tính về hiển thị như Stretch, Fill, Uniform, UniformToFill. Uniform To Fill sẽ mở rộng tấm hình ra cho vừa kích thước của control, và thực tế là nó cắt mất một góc trái trên của tấm hình, cho ta có cảm giác như tấm hình được canh giữa

steeve 2

 

Làm sao đạt được tấm hình “Tuyệt vời”

Stretch Property

Image Control có 4 trạng thái của Stretch Property (Hình minh họa)

  • None: không resize hình
  • Fill: Hình bị scale lại để vừa với kích thước control
  • Uniform: Hình cũng bị Scale lại, nhưng giữ nguyên tỷ lệ
  • Uniform To Fill: Hình bị scale, giữ nguyên tỷ lệ và fill đầy control. Nếu control có tỷ lệ khác với Image, một phần góc trái và góc phải sẽ bị cắt mất

Giải pháp

Thêm một Border bọc ngoài Image Control

<Border Width="200" Height="200" >

<Image Source="truc" Stretch="UniformToFill"/>

</Border>

Ngay khi thêm border, bạn sẽ thấy nó hiển thị một kết quả như khi không có border. Cũng như ko ==’

Tuy nhiên, Image control sẽ bị giới hạn bởi Border bọc bên ngoài nó có kích thước nhất định. Bây giờ, bạn có thể canh chỉnh bằng thuộc tính HorizontalAlignment và VerticalAlignment để chỉnh vị trí của ImageControl. Áp dụng “Center” cho cả hai, bạn sẽ có tấm hình “Tuyệt vời”

Advertisements

One thought on “[Windows Phone – Silverlight] Uniform to fill, centered

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s